Introducción
Xamarin.Forms añade una capa de abstracción sobre la capa de la interfaz de usuario permitiendo definir la misma una única vez siendo válida para todas las plataformas.
A pesar de definir la interfaz de usuario una única vez para todas las plataformas, tenemos la posibilidad de realizar personalizaciones y adaptaciones para ofrecer la mejor experiencia posible en cada una de las plataformas soportadas.
La clase Device
La clase Device sin duda alguna es una de las claves a la hora de personalizar la interfaz de usuario por plataforma. Esta clase contiene diversas propiedades y métodos para personalizar la UI y la funcionalidad en base a la plataforma.
La propiedad OS permite identificar la plataforma en la que se ejecuta la aplicación. Puede ser un valor de la enumeración TargetPlatform con uno de los siguientes valores:
- iOS
- Android
- WinPhone (Windows 8 Silverlight)
- Windows (Windows 8.1, Windows Phone 8.1 y UWP)
Permite de forma sencilla y efectiva personalizar la interfaz o la lógica de la aplicación en base a la plataforma:
if (Device.OS == TargetPlatform.iOS)
{
stackLayout.Padding = new Thickness (0, 20, 0, 0);
}
La interfaz de usuario de las aplicaciones Xamarin.Forms podemos definirla en C# o desde código XAML. Desde XAML también podemos realizar personalizaciones en base a la plataforma utilizando el método OnPlatform. Device.OnPlatform es un método que cuenta con uno de los siguientes parámetros opcionales:
- iOS
- Android
- WinPhone
<BoxView WidthRequest="100" HorizontalOptions="Center"> <BoxView.Color> <OnPlatform x:TypeArguments="Color" iOS="Green" Android="#738182" WinPhone="Accent" /> </BoxView.Color> </BoxView>
Lo visto esta genial pero hay un pequeño detalle que nos puede causar problemas…
¿Qué ocurre si deseamos personalizar la UI desde XAML y dinstinguir entre Windows Phone y Windows?.
La clase OnPlatform no nos facilita la gestión completa. Siempre nos queda la posibilidad de hacer lo necesario desde código C# pero aspectos directamente relacionados con la UI sería fantástico poder llevarlo a cabo desde la propia UI o lo que es lo mismo desde código XAML.
CustomOnPlatform
Aquí es donde entra en juego un pequeños helper creado en código C#:
public sealed class CustomOnPlatform<T>
{
public CustomOnPlatform()
{
Android = default(T);
iOS = default(T);
WinPhone = default(T);
Windows = default(T);
}
public T Android { get; set; }
public T iOS { get; set; }
public T WinPhone { get; set; }
public T Windows { get; set; }
public T Other { get; set; }
public static implicit operator T(CustomOnPlatform<T> onPlatform)
{
switch (Xamarin.Forms.Device.OS)
{
case Xamarin.Forms.TargetPlatform.Android:
return onPlatform.Android;
case Xamarin.Forms.TargetPlatform.iOS:
return onPlatform.iOS;
case Xamarin.Forms.TargetPlatform.WinPhone:
return onPlatform.WinPhone;
case Xamarin.Forms.TargetPlatform.Windows:
if (Xamarin.Forms.Device.Idiom == Xamarin.Forms.TargetIdiom.Desktop)
return onPlatform.Windows;
else
return onPlatform.WinPhone;
}
}
}
Sencillo. Utilizamos la propiedad OS de la clase Device para determinar la plataforma en la que estamos. En el caso de Windows, dado que nos indica el mismo valor en UWP (tanto si estamos en el Desktop como Mobile) hacemos uso combinado con la propiedad Idiom.
La propiedad Idiom tiene como objetivo fundamental determinar si la aplicación se ejecuta en teléfono, tableta o escritorio. Puede contener unos de los siguientes valores de la enumeración TargetIdiom:
- Desktop: Detecta aplicación UWP en Windows 10.
- Phone: La aplicación corre en iPhone, iPod Touch, móvil Android o Windows Phone.
- Tablet: iPad, tableta Android o Windows 8.1.
De esta forma, además de detectar cuando se ejecuta en iOS y Android, podremos detectar cuando se ejecuta en Windows Phone y en Windows (UWP) tanto en escritorio como móvil.
Para usar el helper desde XAML, definimos el namespace:
xmlns:helpers="clr-namespace:CustomOnPlatform.Helpers;assembly=CustomOnPlatform"
Y lo usamos tal y como usaríamos OnPlatform:
<BoxView HorizontalOptions="Center" VerticalOptions="Center" HeightRequest="100" WidthRequest="100"> <BoxView.BackgroundColor> <helpers:CustomOnPlatform x:TypeArguments="Color" Android="Red" iOS="Blue" WinPhone="Yellow" Windows="Green"/> </BoxView.BackgroundColor> </BoxView>
El resultado de la ejecución anterior es, cuadrado rojo en Android, azul en iOS, amarillo en Windows Phone (Silverlight) y Windows Mobile (UWP) siendo por último, verde en Windows escritorio.
Tenéis el código fuente del ejemplo utilizado disponible en GitHub:
Recuerda, cualquier tipo de duda o sugerencia es bienvenida en los comentario del artículo.
Más información
- Xamarin: Device Class
- Xamarin: OnPlatform