Customizing a Slider In Xamarin.Forms


Introducción

Sin duda alguna los controles en Xamarin.Forms, son un elemento relevante en cada una de nuestras aplicaciones desarrolladas. En este pequeño manual trabajaremos sobre el control deslizante o Slider (mayormente conocido) y cómo utilizarlo desde el código en XAML.

¿Qué es el Slider?
En Xamarin.Forms, según la documentación es un control o View usado para seleccionar un valor lineal.

Su etiqueta para desplegarlo en XAML es el siguiente:

Slider

Si la escribiésemos como tal y la desplegáramos en nuestro emulador o dispositivo, nos dibujaría el control con un valor en 0.

Propiedades del Slider

Dicho control cuenta específicamente con 3 propiedades:

Maximum: El cual delimita el tope superior de los valores que se pueden seleccionar.

Minimum: Este delimita el tope inferior de los valores que se pueden seleccionar.

Value: Valor actual del Slider.

Como lo indica el título, personalizaremos el control para que pueda contener más propiedades como:

MaxColor | MinColor  | ThumbColor | ThumbImage

Manos a la obra… Implementación

Para este ejemplo voy a suponer que ya han creado su aplicación en Xamarin.Forms, en dado caso de que no lo hayan hecho realicemos lo siguiente:

Abramos Visual Studio y seleccionemos un Nuevo Proyecto.

Después, elijamos la aplicación multiplataforma, asignemos un nombre al proyecto y establezcamos la ruta del proyecto. Luego, hagamos clic en OK.

01

Ahora seleccionemos la plantilla: Aplicación en Blanco (Blank App) y la estrategia del código compartido será: .NET Standard

02

Una vez creada la solución, procedamos a crear una clase denominada “CustomSlider” la cual nos permitirá generar las propiedades personalizadas antes mencionadas. Para esto, hagamos clic derecho en el proyecto .NET Standard y seleccionemos Agregar > Nuevo elemento o Agregar > Clase.

03

04

Editemos el código añadiendo lo siguiente:


public class CustomSlider : Slider

{

public static readonly BindableProperty MaxColorProperty = BindableProperty.Create(nameof(MaxColor),

typeof(Color), typeof(CustomSlider), Color.Default);

 

public Color MaxColor

{

get { return (Color)GetValue(MaxColorProperty); }

set { SetValue(MaxColorProperty, value); }

}

 

public static readonly BindableProperty MinColorProperty = BindableProperty.Create(nameof(MinColor),

typeof(Color), typeof(CustomSlider), Color.Default);

 

public Color MinColor

{

get { return (Color)GetValue(MinColorProperty); }

set { SetValue(MinColorProperty, value); }

}

 

public static readonly BindableProperty ThumbColorProperty = BindableProperty.Create(nameof(ThumbColor),

typeof(Color), typeof(CustomSlider), Color.Default);

 

public Color ThumbColor

{

get { return (Color)GetValue(ThumbColorProperty); }

set { SetValue(ThumbColorProperty, value); }

}

 

public static readonly BindableProperty ThumbImageProperty = BindableProperty.Create(nameof(ThumbImage),

typeof(string), typeof(CustomSlider), string.Empty);

 

public string ThumbImage

{

get { return (string)GetValue(ThumbImageProperty); }

set { SetValue(ThumbImageProperty, value); }

}

}

Estas propiedades se utilizarán en el proyecto de Android, así como en el proyecto de iOS.

Una vez concluido esta parte, comencemos con Android, en donde deberemos crear un Render (clase) que permitirá renderizar (valga la redundancia) el control. Susodicho llamémosle: MySliderRenderer.

05

06

No olvidemos de añadir la dependencia:


[assembly: ExportRenderer(typeof(CustomSlider), typeof(MySliderRenderer))]

En donde MySliderRenderer pertenece a Android y CustomSlider al proyecto .NET Standard.

Luego, deberemos configurar todas las propiedades que se establecieron en el archivo CustomSlider.


public class MySliderRenderer : SliderRenderer

{

private CustomSlider view;

 

public MySliderRenderer(Context context) : base(context)

{

AutoPackage = false;

}

 

protected override void OnElementChanged(ElementChangedEventArgs e)

{

base.OnElementChanged(e);

if (e.OldElement != null || e.NewElement == null)

return;

view = (CustomSlider)Element;

if (!string.IsNullOrEmpty(view.ThumbImage))

{

// Establece el icono - ThumbIcon

Control.SetThumb(Resources.GetDrawable(view.ThumbImage));

}

else if (view.ThumbColor != Xamarin.Forms.Color.Default ||

view.MaxColor != Xamarin.Forms.Color.Default ||

view.MinColor != Xamarin.Forms.Color.Default)

Control.Thumb.SetColorFilter(view.ThumbColor.ToAndroid(), PorterDuff.Mode.SrcIn);

Control.ProgressTintList = Android.Content.Res.ColorStateList.ValueOf(view.MinColor.ToAndroid());

Control.ProgressTintMode = PorterDuff.Mode.SrcIn;

 

//Esto es para la línea máxima del control deslizante

Control.ProgressBackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(view.MaxColor.ToAndroid());

Control.ProgressBackgroundTintMode = PorterDuff.Mode.SrcIn;

}

protected override void OnLayout(bool changed, int l, int t, int r, int b)

{

base.OnLayout(changed, l, t, r, b);

if (Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.JellyBean)

{

if (Control == null)

{ return; }

SeekBar ctrl = Control;

Drawable thumb = ctrl.Thumb;

int thumbTop = ctrl.Height / 2 - thumb.IntrinsicHeight / 2;

thumb.SetBounds(thumb.Bounds.Left, thumbTop,

thumb.Bounds.Left + thumb.IntrinsicWidth, thumbTop + thumb.IntrinsicHeight);

}

}

}

Después, añadamos la imagen que deseemos mostrar en la carpeta de Resources – Drawable correspondiente al tamaño.

05-02

05-03

Ahora es el momento de ir con el proyecto de iOS.

Prácticamente repetiremos los mismos pasos que se realizaron en Android, creemos el render (clase).

07

08

Ahora, escribamos el código pertinente para las propiedades del Slider.


public class MySliderRenderer : SliderRenderer

{

protected override void OnElementChanged(ElementChangedEventArgs e)

{

base.OnElementChanged(e);

if (e.OldElement != null || e.NewElement == null)

return;

 

var view = (CustomSlider)Element;

if (!string.IsNullOrEmpty(view.ThumbImage))

{

// Asigna una imagen a los estados de control especificados.

Control.SetThumbImage(UIImage.FromFile(view.ThumbImage), UIControlState.Normal);

}

else if (view.ThumbColor != Color.Default ||

view.MaxColor != Color.Default ||

view.MinColor != Color.Default)

 

// Establece el color a la barra de progreso

Control.ThumbTintColor = view.ThumbColor.ToUIColor();

//Establece el color para el estado minimo

Control.MinimumTrackTintColor = view.MinColor.ToUIColor();

//Establece el color para el estado maximo

Control.MaximumTrackTintColor = view.MaxColor.ToUIColor();

}

}

No olvides agregar la referencia:


[assembly: ExportRenderer(typeof(CustomSlider), typeof(MySliderRenderer))]

Por último, en nuestro proyecto .NET Standard, en el archivo MainPage.xaml añadamos la referencia que nos permitirá acceder al CustomSlider:

xmlns:cs="clr-namespace:CustomizeSliderDemo"

Posterior a esto, escribamos el siguiente código, en donde mostraremos los dos tipos de controles deslizantes con los que contamos ahora:

09

Genial, ya con esto terminamos, es hora de probar .

Resultado

CustomSlider.gif

Descarga el código completo desde mi GitHub.

GitIronMan

¡Hasta la próxima!

Anuncios

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s