Write custom switch control

This commit is contained in:
Frank A. Krueger 2018-02-02 20:51:05 -08:00
parent e4b1c44aa3
commit d58625129b
No known key found for this signature in database
GPG Key ID: 0471C67474FFE664
4 changed files with 87 additions and 8 deletions

View File

@ -3,7 +3,7 @@ using Xamarin.Forms;
namespace Ooui.Forms.Renderers namespace Ooui.Forms.Renderers
{ {
public class SwitchRenderer : ViewRenderer<Switch, Input> public class SwitchRenderer : ViewRenderer<Switch, SwitchRenderer.SwitchElement>
{ {
public override SizeRequest GetDesiredSize (double widthConstraint, double heightConstraint) public override SizeRequest GetDesiredSize (double widthConstraint, double heightConstraint)
{ {
@ -26,7 +26,7 @@ namespace Ooui.Forms.Renderers
if (e.NewElement != null) { if (e.NewElement != null) {
if (Control == null) { if (Control == null) {
var input = new Input (InputType.Checkbox); var input = new SwitchElement ();
SetNativeControl (input); SetNativeControl (input);
Control.Change += OnControlValueChanged; Control.Change += OnControlValueChanged;
} }
@ -47,5 +47,52 @@ namespace Ooui.Forms.Renderers
{ {
Control.IsChecked = Element.IsToggled; Control.IsChecked = Element.IsToggled;
} }
public class SwitchElement : Div
{
public event EventHandler Change;
bool isChecked = false;
readonly Div knob = new Div ();
public bool IsChecked {
get => isChecked;
set {
isChecked = value;
UpdateUI ();
}
}
public SwitchElement ()
{
AppendChild (knob);
knob.Style.Position = "absolute";
knob.Style.BorderRadius = "10px";
knob.Style.Cursor = "pointer";
knob.Style.Top = "2px";
knob.Style.Width = "18px";
knob.Style.Height = "34px";
Style.BorderRadius = "10px";
Style.Cursor = "pointer";
Style.BorderStyle = "solid";
Style.BorderWidth = "2px";
Click += (s, e) => {
IsChecked = !IsChecked;
Change?.Invoke (this, EventArgs.Empty);
};
UpdateUI ();
}
void UpdateUI ()
{
Style.BackgroundColor = isChecked ? "#337ab7" : "#888";
Style.BorderColor = Style.BackgroundColor;
knob.Style.BackgroundColor = isChecked ? "#FFF" : "#EEE";
if (isChecked) {
knob.Style.Left = "34px";
}
else {
knob.Style.Left = "2px";
}
}
}
} }
} }

View File

@ -1,6 +1,6 @@
// Ooui v1.0.0 // Ooui v1.0.0
var debug = true; var debug = false;
const nodes = {}; const nodes = {};
const hasText = {}; const hasText = {};

View File

@ -65,15 +65,47 @@ namespace Ooui
if (styleValue == "inherit") if (styleValue == "inherit")
return Colors.Clear; return Colors.Clear;
//if (styleValue[0] == '#' && styleValue.Length == 4) { if (styleValue[0] == '#' && styleValue.Length == 4) {
//} var r = ReadHexNibble (styleValue[1]);
var g = ReadHexNibble (styleValue[2]);
var b = ReadHexNibble (styleValue[3]);
return new Color (r, g, b, 255);
}
//if (styleValue[0] == '#' && styleValue.Length == 7) { if (styleValue[0] == '#' && styleValue.Length == 7) {
//} var r = ReadHexByte (styleValue[1], styleValue[2]);
var g = ReadHexByte (styleValue[3], styleValue[4]);
var b = ReadHexByte (styleValue[5], styleValue[6]);
return new Color (r, g, b, 255);
}
throw new ArgumentException ($"Cannot parse color string `{styleValue}`", nameof (styleValue)); throw new ArgumentException ($"Cannot parse color string `{styleValue}`", nameof (styleValue));
} }
static byte ReadHexByte (char c0, char c1)
{
var n0 = ReadHex (c0);
var n1 = ReadHex (c1);
return (byte)((n0 << 4) | n1);
}
static byte ReadHexNibble (char c)
{
var n = ReadHex (c);
return (byte)((n << 4) | n);
}
static byte ReadHex (char c)
{
if ('0' <= c && c <= '9')
return (byte)(c - '0');
if ('a' <= c && c <= 'z')
return (byte)((c - 'a') + 10);
if ('A' <= c && c <= 'Z')
return (byte)((c - 'A') + 10);
return 0;
}
public override string ToString () public override string ToString ()
{ {
if (A == 255) if (A == 255)

View File

@ -22,7 +22,7 @@ namespace Samples
}; };
sw.Toggled += (sender, args) => sw.Toggled += (sender, args) =>
{ {
label.Text = $"Switch state is :{((Switch)sender).IsToggled}"; label.Text = $"Switch state is: {((Switch)sender).IsToggled}";
}; };
layout.Children.Add(label); layout.Children.Add(label);
layout.Children.Add(sw); layout.Children.Add(sw);