Android Schiebeschalter [Toggle Switch]

TRiViUM · 28. Januar 2015, 09:10

Android 4.1+ Jelly Bean - Toggle Switch

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Hi liebe Community!

Ich habe vor, ein Steuerelement zu programmieren, dass dem Android-Schiebeschalter in der Version 4.1+ Jelly Bean ähnelt.

Ich weiß, dass es bereits ein Thread mit DroidControls gibt, jedoch möchte ich bei dem Schiebeschalter auch nicht auf das
Schieben verzichten.

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Google's Stock Jelly BeanToggle:

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Vielleicht bekommen wir ja zusammen am Ende ein schickes Control bei raus, dass ich dann auch gern OpenSource stellen möchte :saint:

Wenn euch etwas unklar ist , fragt mich einfach

Vielen Dank für eure Infos

MfG

Murdock · 28. Januar 2015, 09:49

Ich würde keinesfalls von TrackBar erben lassen, wofür auch? Von CheckBox könnte ich ja noch verstehen, aber ich würde einfach nur von Control erben lasssen. Ich würde das MouseDown Event nutzen um die Mouseposition zu ermitteln und zwischenspeichern im MouseMove die aktulle Position zu ermitteln, im MouseUp dann ermitteln ob der Thumb die erfoderliche Distanz verschoben wurde.

TRiViUM · 28. Januar 2015, 10:00

Naja, ich hatte an die Trackbar gedacht, wegen dem Schieber.
Aber allein von dem Verhalten bzw Events wäre Checkbox schon logischer.

Die Trackbar, die ich mit entworfen und programmiert habe, habe ich unter Mithilfe eines Forenmitglieds erstellt, der sich allerdings hier abgemeldet hat. ich habe den Code gerade vor mir aber noch nicht so ganz nachvollzogen, wo im Code z.b. definiert wird, dass der Schieber nur horizontal verschiebbar ist, und links und rechts eben einen Anschlag hat.

Verstehst du, was ich meine?

Murdock · 28. Januar 2015, 10:08

Nicht ganz, ich kenne den Code ja nicht. So ein Control kann ich in eines meiner aktuellen Projekte gebrauchen, ich mach nach der Arbeit mal die Basis für das Control, werde den Code dann Posten. Dein Design wirste dann selbst machen müssen.

TRiViUM · 28. Januar 2015, 10:17

Nicht, dass du denkst, ich erwarte hier die ganze Arbeit von den Usern und ich muss den Code dann nur noch einfügen...
In Sachen GFX kann ich einiges mehr leisten, falls du da was brauchst.

Nochmal zu meinerm "Problem":
Den Schieber einer Trackbar kann man nur nach links und nach rechts verschieben, nicht aber auch noch nach oben und unten (bei einer horizontalen anordnung).

Ich hatte das in Bezug zum Schiebeschalter gedacht, wo ich nicht wusste, wo man im Code festlegt, dass der Schieber eben nur nach links und rechts verschiebbar sein darf.

Im Anhang mal die besagte Trackbar.

Danke schonmal für deine Hilfe!

Murdock · 28. Januar 2015, 10:24

Nein das denk ich nicht. Mach ich nur weil ich so ein Control gebrauchen kann, du bekommst ja auch nur die Basis. Aber den Code kenne ich so in etwa, das hast du mit derfuhr gemacht, kann das sein?

TRiViUM · 28. Januar 2015, 10:30

Okay, da bin ich zu frieden.
Genau, mit derfuhr. Er hat allerdings auch das meiste programmiert.
Ich selbst hab lediglich Anpassungen an Farbe/ Abmessungen/ Optierungen vorgenommen, getestet, und kleine Fehler/ Bugs behoben.
Woher kennst du sie, die Trackbar ?

Murdock · 28. Januar 2015, 10:36

derfuhr gab mir den Code auch, ich kenne ihn, hab schon ein paar Projekte mit ihm gemacht. Jetzt muss ich aber wieder was tun.

TRiViUM · 28. Januar 2015, 10:38

Achso, cool.
Okay, dito. Ich schau gegen Abend nochmal nach, was du gepostet hast.
Alles weitere dann hier in diesem Thread

Murdock · 28. Januar 2015, 13:39

Grad schnell in der Pause gemacht, denke als Basis geht das in Ordnung.

VB.NET-Quellcode

<System.ComponentModel.DefaultEvent("CheckedChanged")>
Public Class Toggler
Inherits Control
Private T As Thumb
Private Diff As Integer
Private IsMouseDown As Boolean
Public Event CheckedChanged(sender As Object)
Private _checked As Boolean = False
Public Property Checked As Boolean
Get
Return _checked
End Get
Set(value As Boolean)
If value Then
T.Rect.X = Width - T.Width
Else
T.Rect.X = 0
End If
If _checked <> value Then
_checked = value
RaiseEvent CheckedChanged(Me)
End If
Invalidate()
End Set
End Property
Sub New()
MyBase.New()
SetStyle(ControlStyles.OptimizedDoubleBuffer Or ControlStyles.UserPaint Or ControlStyles.ResizeRedraw, True)
BackColor = Color.Black
Width = 80
Height = 20
T = New Thumb(Width \ 2, Height)
End Sub
Protected Overrides Sub OnPaint(e As PaintEventArgs)
MyBase.OnPaint(e)
If T.Rect.X < 0 Then T.Rect.X = 0
If T.Rect.X > Width - T.Width Then T.Rect.X = Width - T.Width
T.DrawThumb(e.Graphics, Check)
End Sub
Private Sub Toggler_SizeChanged(sender As Object, e As EventArgs) Handles Me.SizeChanged
T = New Thumb(Width \ 2, Height)
If Checked Then
T.Rect.X = Width - T.Width
End If
End Sub
Private Sub Toggler_MouseDown(sender As Object, e As MouseEventArgs) Handles Me.MouseDown
If e.Button = Windows.Forms.MouseButtons.Left AndAlso T.Rect.IntersectsWith(New Rectangle(e.Location.X, e.Location.Y, 1, 1)) Then
Diff = e.Location.X - T.Rect.X
IsMouseDown = True
End If
End Sub
Private Sub Toggler_MouseMove(sender As Object, e As MouseEventArgs) Handles Me.MouseMove
If IsMouseDown Then
T.Rect.X = e.Location.X - Diff
Invalidate()
End If
End Sub
Private Sub Toggler_MouseUp(sender As Object, e As MouseEventArgs) Handles Me.MouseUp
Checked = Check()
IsMouseDown = False
End Sub
Private Function Check() As Boolean
Select Case True
Case Checked And T.Rect.X <= Width / 4
Return False
Case Checked And Not T.Rect.X <= Width / 4
Return True
Case Not Checked And T.Rect.X >= Width / 4
Return True
Case Not Checked And Not T.Rect.X >= Width / 4
Return False
Case Else
Return Checked
End Select
End Function
Private Class Thumb
Private S As New StringFormat With {.LineAlignment = StringAlignment.Center, .Alignment = StringAlignment.Center}
Private F As New Font("Microsoft Sans Serif", 10)
Public Width As Integer
Public Height As Integer
Public Rect As Rectangle
Sub New(width As Integer, height As Integer)
Me.Width = width
Me.Height = height
Rect = New Rectangle(0, 0, width, height)
End Sub
Public Sub DrawThumb(g As Graphics, drawChecked As Boolean)
If drawChecked Then
g.FillRectangle(Brushes.Green, Rect)
g.DrawString("I", F, Brushes.Black, Rect, S)
Else
g.FillRectangle(Brushes.Red, Rect)
g.DrawString("O", F, Brushes.Black, Rect, S)
End If
End Sub
End Class
End Class

TRiViUM · 28. Januar 2015, 16:25

Hey, das ist echt ne gute Basis!

Danke schonmal für deine Mühe.
Momentan sieht das Control so aus:

Ich habe die Farben an dem Original Jelly Bean angepasst und eine (kleine) Optimierung bei der Zeichnung des Strings vorgenommen.
Desweiteren habe ich das Größenverhältnis angepasst.

Nun bin ich gerade dabei, den Thumb an allen Seiten um 2 Pixel zu schrumpfen:
Auf der linken Seite müssen zwar auch 2 Pixel weg, jedoch muss der Thumb dann quasi den Anschlag schon haben, wenn links noch 2 Pixel übrig sind, siehe Original:

ToDo:
• Thumb verkleinern
• Ecken des Thumbs abrunden

Und ich habe gesehen, dass du deinen Beitrag bearbeitet hast.
Kannst du mir sagen, was du im Code verändert hast?

Murdock · 28. Januar 2015, 16:40

Ich habe die Methode Toggler_SizeChanged mit

VB.NET-Quellcode

If Checked Then
T.Rect.X = Width - T.Width
End If

erweitert, damit wenn Checked = True ist, der neue Thumb auch auf der richtigen Seite gemalt wird, wenn die Größe des Controls verändert wird.

TRiViUM · 28. Januar 2015, 16:49

Ah, ich verstehe.
Ist mir gar nicht aufgefallen

hab den 3Zeiler eingefügt und bin weiter am basteln

Murdock · 28. Januar 2015, 16:56

So müsste es passen, nur spicken wenn's net klappt

.

Spoiler anzeigen

VB.NET-Quellcode

<System.ComponentModel.DefaultEvent("CheckedChanged")>
Public Class Toggler
Inherits Control
Private T As Thumb
Private Diff As Integer
Private IsMouseDown As Boolean
Public Event CheckedChanged(sender As Object)
Private _checked As Boolean = False
Public Property Checked As Boolean
Get
Return _checked
End Get
Set(value As Boolean)
If value Then
T.Rect.X = Width - T.Width
Else
T.Rect.X = 2
End If
If _checked <> value Then
_checked = value
RaiseEvent CheckedChanged(Me)
End If
Invalidate()
End Set
End Property
Sub New()
MyBase.New()
SetStyle(ControlStyles.OptimizedDoubleBuffer Or ControlStyles.UserPaint Or ControlStyles.ResizeRedraw, True)
BackColor = Color.Black
Width = 80
Height = 20
T = New Thumb(Width \ 2, Height)
End Sub
Protected Overrides Sub OnPaint(e As PaintEventArgs)
MyBase.OnPaint(e)
If T.Rect.X < 2 Then T.Rect.X = 2
If T.Rect.X > Width - T.Width Then T.Rect.X = Width - T.Width
T.DrawThumb(e.Graphics, Check)
End Sub
Private Sub Toggler_SizeChanged(sender As Object, e As EventArgs) Handles Me.SizeChanged
T = New Thumb(Width \ 2, Height)
If Checked Then
T.Rect.X = Width - T.Width
End If
End Sub
Private Sub Toggler_MouseDown(sender As Object, e As MouseEventArgs) Handles Me.MouseDown
If e.Button = Windows.Forms.MouseButtons.Left AndAlso T.Rect.IntersectsWith(New Rectangle(e.Location.X, e.Location.Y, 1, 1)) Then
Diff = e.Location.X - T.Rect.X
IsMouseDown = True
End If
End Sub
Private Sub Toggler_MouseMove(sender As Object, e As MouseEventArgs) Handles Me.MouseMove
If IsMouseDown Then
T.Rect.X = e.Location.X - Diff
Invalidate()
End If
End Sub
Private Sub Toggler_MouseUp(sender As Object, e As MouseEventArgs) Handles Me.MouseUp
Checked = Check()
IsMouseDown = False
End Sub
Private Function Check() As Boolean
Select Case True
Case Checked And T.Rect.X - 1 <= Width / 4
Return False
Case Checked And Not T.Rect.X - 1 <= Width / 4
Return True
Case Not Checked And T.Rect.X - 1 >= Width / 4
Return True
Case Not Checked And Not T.Rect.X - 1 >= Width / 4
Return False
Case Else
Return Checked
End Select
End Function
Private Class Thumb
Private S As New StringFormat With {.LineAlignment = StringAlignment.Center, .Alignment = StringAlignment.Center}
Private F As New Font("Microsoft Sans Serif", 10)
Public Width As Integer
Public Height As Integer
Public Rect As Rectangle
Sub New(width As Integer, height As Integer)
Me.Width = width
Me.Height = height
Rect = New Rectangle(2, 2, width - 2, height - 4)
End Sub
Public Sub DrawThumb(g As Graphics, drawChecked As Boolean)
If drawChecked Then
g.FillRectangle(Brushes.Green, Rect)
g.DrawString("I", F, Brushes.Black, Rect, S)
Else
g.FillRectangle(Brushes.Red, Rect)
g.DrawString("O", F, Brushes.Black, Rect, S)
End If
End Sub
End Class
End Class

TRiViUM · 28. Januar 2015, 17:08

Zu gütig der Herr :saint:

Habe es bis hier hin geschafft:

Unten müssen also noch die 2 Pixel weg.

Ich habe viel Geduld

Aber wenn ich versuch logisch nachzudenken, müsste ich das rectangle vom Thumb logischerweise schon verkleinern, bevor ich es fülle.

Edit:
Soweit-Sogut:

Falls du denkst, die Schrift wäre zu klein bzw zu groß, lass es mich wissen

ich weiß, dass man das alles selber ändern kann, aber ich würde gern ein sauberes, fertiges, und vor allem ein nah am original orientiertes Control basteln

ToDo:
•Die Ecken von dem Thumb Rectangle abrunden...

Fällt dir noch was ein?

Murdock · 28. Januar 2015, 18:47

Sicher hab ich eine Idee. Anstatt das Rectangle zu malen, nimmst einen GraphicsPath, den malste mit Graphics.FillPath. So geht das, musst die Funktion GetRoundedPath ein wenig anpassen, damit es an den Ecken auch passt

.

Spoiler anzeigen

VB.NET-Quellcode

Private Class Thumb
Private S As New StringFormat With {.LineAlignment = StringAlignment.Center, .Alignment = StringAlignment.Center}
Private F As New Font("Microsoft Sans Serif", 10)
Public Width As Integer
Public Height As Integer
Public Rect As Rectangle
Sub New(width As Integer, height As Integer)
Me.Width = width
Me.Height = height
Rect = New Rectangle(2, 2, width - 2, height - 4)
End Sub
Public Sub DrawThumb(g As Graphics, drawChecked As Boolean)
Using GP As GraphicsPath = New GraphicsPath
GetRoundedPath(Rect, 1, GP)
If drawChecked Then
g.FillPath(Brushes.Green, GP)
g.DrawString("I", F, Brushes.Black, Rect, S)
Else
g.FillPath(Brushes.Red, GP)
g.DrawString("O", F, Brushes.Black, Rect, S)
End If
End Using
End Sub
Private Function GetRoundedPath(re As Rectangle, r As Integer, GP As GraphicsPath) As GraphicsPath
GP.AddLine(re.X + r, re.Y, re.X + re.Width - r, re.Y)
GP.AddArc(re.X + re.Width - r, re.Y, r, r, 270, 90)
GP.AddLine(re.X + re.Width, re.Y + r, re.X + re.Width, re.Y + re.Height - r)
GP.AddArc(re.X + re.Width - r, re.Y + re.Height - r, r, r, 0, 90)
GP.AddLine(re.X + re.Width - r, re.Y + re.Height, re.X + r, re.Y + re.Height)
GP.AddArc(re.X, re.Y + re.Height - r, r, r, 90, 90)
GP.AddLine(re.X, re.Y + re.Height - r, re.X, re.Y + r)
GP.AddArc(re.X, re.Y, r, r, 180, 90)
GP.CloseFigure()
Return GP
End Function
End Class

TRiViUM · 28. Januar 2015, 19:38

Dann sollte es abgerundet so aussehen:

Dann die letzten Feinschliffe:
Im Original ist oben auf dem Schieber ein heller Glanz, also nur die erste Pixelreihe.
Zeichne ich dann einfach ein Strich und versuche ihn mit Antialiasing weich zu zeichnen?

Und, Kann ich die jetzt abgerundeten Kanten vom Thumb auch weich zeichnen? hab zwar ein wenig experimentiert, aber immer schlechtere Ergebnisse bekommen als auf dem Bild zu sehen.

Und, kann man den String bzw Text auf dem Thumb weichzeichnen?
habe zwar SmoothingMode.HighQuality aber bringt nix..

Murdock · 28. Januar 2015, 22:27

Für LiniarGradientBrushes, isses ein bischen zu schmal(1px). Evtl. ein PathGradientBrush, ich würde das auch mit einer Linie machen, allerdings mit Transparenz. Ein Graphics-Object hat mehrere Properties welche du einfach mal durchtesten muss, so hab ich schon ein relativ gutes Ergebniss. Ganz so fein wie auf einem Android wird das in WinForms mit GDI nicht machbar sein, da das ganz unterschiedlich Gerendert wird. Manchmal nehm ich auch gern Bitmaps für so kleine Sachen, damit krieg ich das etwas feiner hin.

VB.NET-Quellcode

Public Sub DrawThumb(g As Graphics, drawChecked As Boolean)
Using GP As GraphicsPath = New GraphicsPath
GetRoundedPath(Rect, 2, GP)
g.TextContrast = 0 '0 bis 12
g.TextRenderingHint = Drawing.Text.TextRenderingHint.AntiAlias
g.InterpolationMode = InterpolationMode.HighQualityBicubic
g.CompositingQuality = CompositingQuality.GammaCorrected
g.SmoothingMode = SmoothingMode.HighQuality
Using SB As New SolidBrush(Color.FromArgb(40, 255, 255, 255))
Using p As New Pen(SB, 1)
If drawChecked Then
g.FillPath(Brushes.Green, GP)
g.DrawString("ON", F, Brushes.Black, Rect, S)
Else
g.FillPath(Brushes.Red, GP)
g.DrawString("OFF", F, Brushes.Black, Rect, S)
End If
g.DrawLine(p, Rect.X, 2, Rect.X + Rect.Width - 2, 2)
End Using
End Using
End Using
End Sub

TRiViUM · 29. Januar 2015, 08:51

Sehr Cool!
Habe es hier und da ein wenig angepasst/ optimiert.
Hinzugekommen ist u.A. die Funktion, dass beim Klicken auf das Control das Control umgeschaltet wird.

Das Ergebnis? Ein fertiges Android 4.1+ Jelly Bean - Toggle Switch Control!

Vielen Dank @Murdock für die Basis des Toggle-Controls :saint:

Im laufe der Woche werde ich noch versuchen die Samsung Toggle Switch zu bauen.
Alles weitere kommt dann in diesen Thread!

dertobis · 29. Januar 2015, 12:57

Danke für das tolle Control! Evtl. werd ich es in meinem Projekt (in abgewandelter Form) einsetzen.

Android Schiebeschalter [Toggle Switch]

Android Schiebeschalter [Toggle Switch]

VB.NET-Quellcode

VB.NET-Quellcode

VB.NET-Quellcode

VB.NET-Quellcode

VB.NET-Quellcode

Ähnliche Themen

2 Benutzer haben hier geschrieben