[Xamarin.Forms] Efecto para personalizar la StatusBar

Introducción

La StatusBar es un área importante de cara al usuario final. Disponible para mostrar información importante relacionada con el estado del sistema (hora, batería, red, etc.) además de notificaciones de otras aplicaciones.

StatusBar

Al desarrollar aplicaciones móviles, entre los objetivos, debemos conseguir un estilo único y uniforme. Para conseguirlo, en ocasiones será necesario modificar el aspecto de la StatusBar o incluso cambiarlo de forma uniforme para adaptarla a diferentes páginas de nuestra aplicación.

¿Cómo personalizamos la StatusBar?. En este artículo vamos a crear un efecto de Xamarin.Forms para personalizar la StatusBar en Android, iOS y en UWP.

Efectos

Un efecto permite el acceso al control nativo de cada plataforma con el objetivo de personalizarlo, principalmente aplicando pequeños cambios estéticos o de comportamiento. Permiten simplificar la personalización del control y sobretodo se convierten en “piezas” reutilizables de código incluso aceptando parametrización.

Crear un efecto

El proceso de creación de un efecto, se puede resumir en una serie de sencillos pasos:

  1. Crear en la libería .NET Standard una clase que herede de RoutingEffect. Código independiente de la plataforma encargado de hacer el wrapping del efecto. Podemos definir distintas propiedades que permitan modificar la acción realizada por el efecto. Por ejemplo, en un efecto encargado de aplicar Blur a una imagen, se puede definir una propiedad encarga de aplicar mayor o menor distorsión.
  2. Crear clases en cada plataforma soportada que hereden de PlatformEffect.
  3. Sobrecargar el método OnAttached y añadir la lógica de personalización del control.
  4. Sobrecargar el método OnDetached y añadir lógica de liberación de recursos.
  5. Añadir el atributo ResolutionGroupName. Este atributo permite establecer el nombre del creador o compañia tras el efecto. Recuerda que uno de los objetivos fundamentales de los efectos es lograr permitir compartir y reutilizar con suma facilidad. Con este atributo se previenen colisiones con otros efectos que compartan nombre.
  6. Añadir el atributo ExportEffect. Este atributo registra el efecto con un identificador único usado por Xamarin.Forms, junto al nombre del grupo, permite localizar y aplicar el efecto.

Definición del efecto

Comenzamos con la definición del efecto. Creamos una clase que hereda de RoutingEffect:

public class StatusBarEffect : RoutingEffect
{
     public Color BackgroundColor { get; set; }

     public StatusBarEffect() : base("Xamarin.StatusBarEffect")
     {

     }
}

Fíjate que definimos una propiedad de tipo Color llamada BackgroundColor que nos permitirá establecer el color de la StatusBar.

Android

En Android, accedemos a la Window de la actividad, para modificar el color de la StatusBar utilizando el método SetStatusBarColor:

var statusBarEffect = (StatusBarXamarinForms.Effects.StatusBarEffect)Element.Effects.FirstOrDefault(e => e is StatusBarXamarinForms.Effects.StatusBarEffect);

if (statusBarEffect != null)
{
     var backgroundColor = statusBarEffect.BackgroundColor.ToAndroid();
     Window currentWindow = GetCurrentWindow();
     currentWindow.SetStatusBarColor(backgroundColor);
}

Convertimos el color de Xamarin.Forms a Android utilizando la extensión ToAndroid. Mientras que, para tener acceso de forma sencilla a la actividad actual, usamos el plugin CurrentActivityPlugin:

var window = CrossCurrentActivity.Current.Activity.Window;

iOS

En iOS, accedemos a la StatusBar, y le establecemos el color de fondo utilizando la propiedad BackgroundColor:

if (statusBarEffect != null)
{
     UIView statusBar = UIApplication.SharedApplication.ValueForKey(new NSString("statusBar")) as UIView;
     if (statusBar.RespondsToSelector(new ObjCRuntime.Selector("setBackgroundColor:")))
     {
          statusBar.BackgroundColor = statusBarEffect.BackgroundColor.ToUIColor();
     }
}

En este caso, el color lo convertimos a un UIColor con la extensión ToUIColor.

UWP

En el caso de UWP, contemplamos dos posibilidades:

NOTA: Para tener acceso a estas APIs es necesario añadir como referencia a las extensiones UWP correspondientes.

Comenzamos por el uso de la TitleBar:

// Desktop Customization
if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.ApplicationView"))
{
     var titleBar = ApplicationView.GetForCurrentView().TitleBar;
     if (titleBar != null)
     {
          titleBar.BackgroundColor = statusBackgroundColor;
          titleBar.ButtonBackgroundColor = statusBackgroundColor;
     }
}

Accedemos a la misma y establecemos el color de fondo.

En el caso de StatusBar es bastante similar:

// Mobile Customization
if (ApiInformation.IsTypePresent("Windows.UI.ViewManagement.StatusBar"))
{
     var statusBar = StatusBar.GetForCurrentView();
     if (statusBar != null)
     {
          statusBar.BackgroundOpacity = 1;
          statusBar.BackgroundColor = statusBackgroundColor;
     }
}

Sencillo, ¿verdad?.

Utilizando el efecto

Llega el momento de utilizar nuestro efecto!. Comenzamos añadiendo el namespace correspondiente en XAML:

xmlns:local="clr-namespace:StatusBarXamarinForms.Effects"

Y utilizamos el efecto:

<ContentPage.Effects>
<local:StatusBarEffect 
     BackgroundColor="Red"/>
</ContentPage.Effects>

El resultado:

Podemos añadir el efecto desde código C# y nos da la posibilidad de moficar la StatusBar programáticamente de forma sencilla.

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Más información

[SVQXDG] Analizando interfaces de usuario avanzadas con Xamarin.Forms

El evento

En los últimos tiempos, la mejora de Xamarin.Forms tanto en posibilidades a nivel de UI (VisualStateManager, FlexLayout, etc.) como a nivel de renderers y rendimiento (a destacar en Android) ha sido importante.

Realmente, en el estado actual de Xamarin.Forms se pueden conseguir aplicaciones nativas de gran escala, con interfaces cuidadas y con alta integración con la plataforma. Hay que tener en cuenta el conjunto de Custom Renderers (código específico en cada plataforma) necesario para lograrlo.

NOTA: La elección entre Xamarin Classic o Xamarin.Forms es importante. Es necesario evaluar la aplicación a desarrollar, el conjunto de características específicas de cada plataforma (que pueden requerir un Custom Renderer), etc. 

Es cada vez mayor el recopilatorio de ejemplos Open Source con Xamarin.Forms buscando interfaces complejas:

En este evento, vamos a analizar entre todos, abriendo debate e intercambiando ideas algunos de los ejemplos revisando opciones disponibles para conseguir ciertos resultados. Hablaremos de opciones como efectos, Custom Renderers, SkiaSharp, VisualStateManager, etc.

El lugar

El evento se celebrará en la ETS de Ingeniería Informática.

ETS de Ingeniería Informática

Dirección detallada:

E.T.S. Ingeniería Informática – Universidad de Sevilla, Aula B1.32
Av. Reina Mercedes s/n
Sevilla Se 41012

La fecha

Será el próximo Miércoles, 26 de Septiembre de 19:00h a 20:30h (GMT+1).

¿Te apuntas?

Más información

[Xamarin] Utilizando OpenJDK

¿OpenJDK?

OpenJDK es una opción alternativa al JDK de Oracle creada y diseñada con el desarrollo Android en mente. La idea es conseguir una versión más reducida (descarga menor, menos espacio en disco), evitar problemas con instaladores y herramientas de terceros además de mejorar la experiencia de desarrollo evitando que futuras actualizaciones de JDK (9, 10) afecte al desarrollo en Android.

Actualmente ya se puede probar en las últimas versiones de Visual Studio tanto para Windows como macOS y a partir de la versión 15.9 en Windows y 7.7 en macOS, será la opción que vendrá por defecto.

Porbar Open JDK

Ventajas

Las principales ventajas son:

  • Contar siempre con una versión operativa de OpenJDK con desarrollo Android independientemente de JDKs o herramientas de terceros.
  • Descargas de menor tamaño.
  • Menor espacio en disco.
  • Evitar problemas de configuración y versionado relacionadas con JDK.

Configuración

Debemos comenzar por la descarga:

NOTA: Al momento de escribir este artículo, estamos probando con la versión 1.8.0.9 de OpenJDK . Es posible que pruebes con una versión posterior. Descarga la versión más reciente y el único cambio es la versión y nombre de la carpeta de OpenJDK .

En Windows

Tras descargar, en Windows debemos copiar la carpeta descomprimida en C:\Archivos de programa\Android\jdk\microsoft_dist_openjdk_1.8.0.9

A continuación, accedemos a la configuración de Xamarin, Android Settings:

Configuración en Windows

Y cambiamos la ruta de “Java Development Kit Location” por la de OpenJDK.

En macOS

En macOS debemos descomprimir OpenJDK en $HOME/Library/Developer/Xamarin/jdk/microsoft_dist_openjdk_1.8.0.9.

Tras crear la carpeta, desde Visual Studio macOS, accedemos a Tools > SDK Manager > Locations donde cambiaremos la ubicación del SDK de Java por la de OpenJDK.

NOTA: En cualquier momento podemos volver a usar el JDK de Oracle. Bastará con volver a cambiar las rutas y recompilar la solución.

Más información

[Xamarin.Forms Challenge] PulseMusic

Introducción

La evolución de Xamarin.Forms es meritoria. En los últimos tiempos se han recibido novedades interesantes como efectos, vistas nativas, Forms Embedding, FlexLayout, etc. Sin embargo, en muchos casos se sigue asociado a desarrollos muy simples o formularios básicos.

Realmente, en el estado actual de Xamarin.Forms se pueden conseguir aplicaciones nativas de gran escala, con interfaces cuidadas y con alta integración con la plataforma. Hay que tener en cuenta el conjunto de Custom Renderers (código específico en cada plataforma) necesario para lograrlo.

NOTA: La elección entre Xamarin Classic o Xamarin.Forms es importante. Es necesario evaluar la aplicación a desarrollar, el conjunto de características específicas de cada plataforma (que pueden requerir un Custom Renderer), etc. 

En este artículo, vamos a tomar como referencia un diseño de Dribble, que intentaremos replicar con Xamarin.Forms paso a paso.

Music Player

Carátula circular

Comenzamos por una de las partes principales de la vista, la carátula circular. Vamos a utilizar FFImageLoading junto a las opciones de transformación disponibles:

xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"

Utilizamos CircleTransformation para conseguir la imagen circular:

<ffimageloading:CachedImage 
     Aspect="AspectFit"
     Source="{Binding Song.Cover}">
     <ffimageloading:CachedImage.Transformations>
          <fftransformations:CircleTransformation />
     </ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>

Sencillo, ¿verdad?.

Botón de reproducción

Tenemos un botón totalmente circular. Podríamos al igual que la barra de progreso circular, crearlo con SkiaSharp facilmente. Sin embargo, si queremos contar con un botón, debemos crear un Custom Renderer.

Contamos con un botón circular preparado para utilizar con ButtonCirclePlugin. Tras añadir el paquete NuGet, añadimos el namespace:

xmlns:buttonCircle="clr-namespace:ButtonCircle.FormsPlugin.Abstractions;assembly=ButtonCircle.FormsPlugin.Abstractions"

Y utilizamos el control:

<buttonCircle:CircleButton
     Command="{Binding PlayCommand}"
     FontIcon="FontAwesome"
     Icon="{Binding Icon}" 
     FontSize="{StaticResource FontSize16}"
     TextColor="{StaticResource WhiteColor}" 
     HeightRequest="60" 
     WidthRequest="60" 
     BackgroundColor="{StaticResource PlayerRedColor}" />

De nuevo, muy sencillo esta parte de la interfaz, ¿verdad?.

Animación de la carátula

Xamarin.Forms cuenta con una potente API de animaciones. Entre las animaciones incluidas, encontramos las de rotación:

await CoverImage.RelRotateTo(360, AppSettings.CoverAnimationDuration, Easing.Linear);

La única parte con mayor complejidad de la animación, es que:

  • Por un lado mientras se esta reproduciendo la música, debe estar en ejecución en bucle.
  • Por otro lado, si el usuario pausa la reproducción o bien, la canción termina; se debe pausar o detener la animación.

Para la reproducción en bucle utilizamos una Task donde repetimos la misma animación. Para cancelar la Task hacemos uso de CancellationTokenSource. Para pausar la animación usamos:

ViewExtensions.CancelAnimations(CoverImage);

Progreso circular

Sin duda alguna, una de las claves de la vista es la barra de progreso circular. Por un lado, podemos irnos a por Custom Renderer y aprovechar código nativo en cada plataforma. Si queremos conseguir todo sólo con código compartido podríamos conseguir una barra circular de forma sencilla con imágenes y rotaciones, por ejemplo.

En este caso, vamos a utilizar SkiaSharp.

public class CircleProgress : SKCanvasView
{

}

Para dibujar el progreso circular, utilizaremos el método DrawPath para dibujar un Path al que le daremos la forma deseada utilizando el método AddArc.

path.AddArc(rect, StartAngle, angle);

canvas.DrawPath(path, paint);

Para utilizar el control, definimos el namespace:

xmlns:controls="clr-namespace:PulseMusic.Controls"

Y utilizamos el control:

<controls:CircleProgress 
     VerticalOptions="FillAndExpand"
     HorizontalOptions="FillAndExpand"
     Progress="{Binding Progress}"
     LineBackgroundColor ="{StaticResource BlackColor}"
     ProgressColor="{StaticResource PlayerRedColor}"
     StrokeWidth="12"/>

El progreso lo tenemos enlazado a una propiedad en la ViewModel donde se irá realizando el cálculo del progreso.

Fondo con degradado circular

De nuevo, SkiaSharp al rescate!. Definimos algunas propiedades que nos permitan gestionar la apariencia del control:

  • Radius: Propiedad de tipo entero que nos permitirá controlar el radio del gradiente radial.
  • StartColor: Color inicial del degradado.
  • EndColor: Color final del degradado.

Crearemos un shader para definir el degradado. Para crear el degradado, usamos el método CreateRadialGradient:

var colors = new SKColor[] { StartColor.ToSKColor(), EndColor.ToSKColor() };
SKPoint startPoint = new SKPoint(info.Width / 2, info.Height / 2);
var shader = SKShader.CreateRadialGradient(startPoint, Radius, colors, null, SKShaderTileMode.Clamp);

SKPaint paint = new SKPaint
{
     Style = SKPaintStyle.Fill,
     Shader = shader
};

canvas.DrawRect(new SKRect(0, 0, info.Width, info.Height), paint);

A la hora de usar el control:

<controls:CircleGradientBackground 
     VerticalOptions="FillAndExpand"
     HorizontalOptions="FillAndExpand"
     Radius="600"
     StartColor="{StaticResource LightBackgroundColor}"
     EndColor="{StaticResource BackgroundColor}" />

¿Qué plugins o componentes se han utilizado?

Se ha utilizado:

  • FFImageLoading – Con el objetivo principal de gestionar la carátula circular. Esta librería también nos facilita importante funcionalidad relacionada con el cacheo de imágenes, etc. Aunque recuerda, en este ejemplo todas las imágenes son locales.
  • ButtonCirclePlugin – De forma sencilla permite crear botones circulares. Ideal para el botón central que gestiona Play/Pause. Además, soporta directamente iconos con algunas de las fuentes más utilizadas.

Y llegamos a la parte final del artículo. Es un concepto de artículo que ya hemos realizado previamente con la creación de la interfaz de Netflix, por ejemplo. Es sumamente divertido preparar un diseño con cierto nivel de “reto” e intetar “desgranar” cada paso a realizar. Pero, ¿qué te parece este tipo de artículos?.

Cualquier duda o comentario es bienvenido en los comentarios!

El resultado

Pulse Music

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Más información

[Xamarin.Forms Challenge] My Trip Countdown

Introducción

La evolución de Xamarin.Forms es meritoria. En los últimos tiempos se han recibido novedades interesantes como efectos, vistas nativas, Forms Embedding, FlexLayout, etc. Sin embargo, en muchos casos se sigue asociado a desarrollos muy simples o formularios básicos.

Realmente, en el estado actual de Xamarin.Forms se pueden conseguir aplicaciones nativas de gran escala, con interfaces cuidadas y con alta integración con la plataforma. Hay que tener en cuenta el conjunto de Custom Renderers (código específico en cada plataforma) necesario para lograrlo.

NOTA: La elección entre Xamarin Classic o Xamarin.Forms es importante. Es necesario evaluar la aplicación a desarrollar, el conjunto de características específicas de cada plataforma (que pueden requerir un Custom Renderer), etc. 

En este artículo, vamos a tomar como referencia un diseño de Dribble, que intentaremos replicar con Xamarin.Forms paso a paso.

Countdown Timer

Lo primero que debemos realizar, es un breve análisis de la pantalla:

  • Simplificando, estamos ante un contador hacia atrás, en concreto, hacia una fecha. En Xamarin.Forms contamos con la clase Device, una clase importante que nos facilita información importante como si estamos en una plataforma u otra, o si ejecutamos la App en teléfono o tableta. Además, Device cuenta con un Timer que podemos utilizar para la cuenta atrás, entre otras opciones.
  • De lo que más llama la atención de la simple interfaz de usuario, son los degradados. La línea de progreso circular es candidata a realizarse con SkiaSharp. A pesar de poder abordarla con un Custom Renderer, SkiaSharp nos facilitará dibujarla una única vez para todas las plataformas. El botón, a pesar de poder abordarlo también con SkiaSharp, vamos a realizarlo en nativo para poder contar con los diferentes estados, etc. En este caso, vamos a necesitar Custom Renderer o plugin de comunidad.
  • La carátula circular no es compleja. Entre en conjunto de posibilidades que tenemos, FFImageLoading gana enteros por su facilidad de uso, opciones de cache además de transformaciones.
  • La rotación de la carátula es una sencilla animación de rotación. Xamarin.Forms cuenta con una API de animaciones bastante completa.

¿Manos a la obra?

Imagen circular

Comenzamos por una de las partes principales de la vista, la imagen circular. Vamos a utilizar FFImageLoading junto a las opciones de transformación disponibles:

xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"

Vamos a utilizar CircleTransformation para conseguir la imagen circular:

<ffimageloading:CachedImage 
     Aspect="AspectFit"
     Source="{Binding MyTrip.Picture}">
     <ffimageloading:CachedImage.Transformations>
          <fftransformations:CircleTransformation />
     </ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>

Sencillo, ¿verdad?.

Progreso circular con degradado

Sin duda alguna, la clave de la vista es la barra de progreso circular… y con degradado!. Por un lado, podemos irnos a por Custom Renderer y aprovechar código nativo en cada plataforma. Si queremos conseguir todo sólo con código compartido podríamos conseguir una barra circular de forma sencilla con imágenes y rotaciones, por ejemplo. Sin embargo, necesitamos diferentes recursos gráficos para adaptarnos a diferentes resoluciones. Por otro lado, el degradado añade complejidad.

¿La solución sencilla?

SkiaSharp. Engine gráfico 2D disponible para iOS, Android, UWP, macOS, Windows, etc.

Nos permite trabajar de forma sencilla desde co n figuras básicas a efectos y shaders más complejos.

En este caso, vamos a crear un control personalizado que herede de la clase SKCanvasView.

SKCanvasView es una vista Xamarin.Forms donde podremos dibujar utilizando SkiaSharp.

public class CircleCountdown : SKCanvasView
{

}

Vamos a crear varias BindableProperties para gestionar el comportamiento y apariencia de la barra de progreso:

public static readonly BindableProperty StrokeWidthProperty =
     BindableProperty.Create(nameof(StrokeWidth), typeof(float), typeof(CircleCountdown), 10f, propertyChanged: OnPropertyChanged);

public static readonly BindableProperty ProgressProperty =
     BindableProperty.Create(nameof(Progress), typeof(float), typeof(CircleCountdown), 0f, propertyChanged: OnPropertyChanged);

public static readonly BindableProperty ProgressStartColorProperty =
     BindableProperty.Create(nameof(ProgressStartColor), typeof(Color), typeof(CircleCountdown), Color.Blue, propertyChanged: OnPropertyChanged);

public static readonly BindableProperty ProgressEndColorProperty =
     BindableProperty.Create(nameof(ProgressEndColor), typeof(Color), typeof(CircleCountdown), Color.Red, propertyChanged: OnPropertyChanged);

public float StrokeWidth
{
     get { return (float)GetValue(StrokeWidthProperty); }
     set { SetValue(StrokeWidthProperty, value); }
}

public float Progress
{
     get { return (float)GetValue(ProgressProperty); }
     set { SetValue(ProgressProperty, value); }
}

public Color ProgressStartColor
{
     get { return (Color)GetValue(ProgressStartColorProperty); }
     set { SetValue(ProgressStartColorProperty, value); }
}

public Color ProgressEndColor
{
     get { return (Color)GetValue(ProgressEndColorProperty); }
     set { SetValue(ProgressEndColorProperty, value); }
}

Contamos con:

  • StrokeWidth: Permite controlar el grosor de la barra de progreso.
  • Progress: Determina el progreso. Acepta un valor numérico entre 0  y 1.
  • ProgressStartColor: ¿Recuerdas la necesidad de crear degradado?. Por ese motivo, vamos a contar con esta propiedad para gestionar el color de inicio del degradado.
  • ProgressEndColor: Color final del degradado.

Para dibujar el progreso circular, utilizaremos el método DrawPath para dibujar un Path al que le daremos la forma deseada utilizando el método AddArc.

using (SKPath path = new SKPath())
{
     path.AddArc(rect, StartAngle, angle);

     canvas.DrawPath(path, paint);
}

¿Y el degradado?.

En lugar de utilizar un SKColor (color en SkiaSharp) sólido, vamos a crear un shader. Utilizaremos el método CreateSweepGradient para crear el degradado:

var shader = SKShader.CreateSweepGradient(
     new SKPoint(size / 2, size / 2),
     new[]
     {
          ProgressStartColor.ToSKColor(),
          ProgressEndColor.ToSKColor(),
          ProgressStartColor.ToSKColor()
     },
     new[]
     {
          StartAngle / 360,
          (StartAngle + progressAngle + 1) / 360,
          (StartAngle + progressAngle + 2) / 360
});

Para utilizar el control, definimos el namespace:

xmlns:controls="clr-namespace:MyTripCountdown.Controls"

Y utilizamos el control:

<controls:CircleCountdown 
     VerticalOptions="FillAndExpand"
     HorizontalOptions="FillAndExpand"
     Progress="{Binding Progress}"
     ProgressStartColor="{StaticResource ProgressPinkColor}"
     ProgressEndColor="{StaticResource ProgressBlueColor}"
     StrokeWidth="10"/>

El progreso lo tenemos enlazado a una propiedad en la ViewModel donde se irá realizando el cálculo del progreso.

Botón con degradado

Llegamos al botón con degradado. Podríamos al igual que la barra de progreso circular, crearlo con SkiaSharp facilmente. Sin embargo, un botón cuenta con estados que tienen importancia. Habilitado, deshabilitado, pulsado, etc. Si queremos contar con un botón, debemos crear un Custom Renderer. No es complejo haciendo un Custom Renderer del botón y utilizando RippleDrawable con GradientDrawable en Android, y CAGradientLayer en iOS.

Sin embargo, la comunidad de Xamarin es fantástica. Contamos con un botón con degradado preparado para utilizar con Skor.UI. Tras añadir el paquete NuGet, añadimos el namespace:

xmlns:skor="clr-namespace:Skor.Controls;assembly=Skor.Controls"

Y utilizamos el control:

<skor:GradientButton 
     HeightRequest="60" 
     CornerRadius="96"
     StartColor="{StaticResource ProgressPinkColor}"
     EndColor="{StaticResource ProgressBlueColor}"
     Command="{Binding RestartCommand}"/>

De nuevo, muy sencillo esta parte de la interfaz, ¿verdad?.

Otros

Y no hay que olvidar que estamos haciendo un contador hacia atrás. ¿Formas de conseguirlo?. Tenemos diferentes opciones, directamente en Xamarin.Forms, tenemos el método StartTimer en la clase Device:

Device.StartTimer(TimeSpan.FromSeconds(seconds), () =>
{
     RemainTime = (EndDate - DateTime.Now);

     var ticked = RemainTime.TotalSeconds > 1;

     if (ticked)
     {
          Ticked?.Invoke();
     }
     else
     {
          Completed?.Invoke();
     }

     return ticked; 
});

¿Qué plugins o componentes se han utilizado?

Se ha utilizado:

  • FFImageLoading – Con el objetivo principal de gestionar la imágen circular. Esta librería también nos facilita importante funcionalidad relacionada con el cacheo de imágenes, etc. Aunque recuerda, en este ejemplo todas las imágenes son locales.
  • SKOR.UI – Nos facilita la creación de botones con degradados evitandonos crear un Custom Renderer.

Y llegamos a la parte final del artículo. Es un concepto de artículo que ya hemos realizado previamente con la creación de la interfaz de Netflix, por ejemplo. Es sumamente divertido preparar un diseño con cierto nivel de “reto” e intetar “desgranar” cada paso a realizar. Pero, ¿qué te parece este tipo de artículos?.

Cualquier duda o comentario es bienvenido en los comentarios!

El resultado

My Trip Countdown

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Más información

[Xamarin.Forms] Ejemplos de Backend Linux

Introducción

Xamarin.Forms añade una capa de abstracción en la capa de UI que nos permite definir la misma una única vez para todas las plataformas. Podemos definir esta interfaz con código C# o XAML. El soporte de Linux (GTK) ahora está  disponible en Xamarin.Forms.

Para conocer y revisar las diferentes opciones disponibles, ¿algo mejor que contar con ejemplos?

Ejemplos Xamarin.Forms.Platform.GTK

El repositorio de ejemplos oficial de Xamarin.Forms es una fuente inmejorable de ejemplos cubriendo desde ejemplos básicos a uso de SkiaSharp, SQlite, gestos, efectos, etc. A continuación, puedes encontrar un repositorio donde encontrar la mayoría de ejemplos (y creciendo!) con versión GTK.

Puedes encontrar el repositorio en GitHub:

Ver GitHub

Más información

[Xamarin.Forms] Ejemplos de Backend WPF

Introducción

Xamarin.Forms añade una capa de abstracción en la capa de UI que nos permite definir la misma una única vez para todas las plataformas. Podemos definir esta interfaz con código C# o XAML. El soporte de WPF ahora está  disponible en Xamarin.Forms.

Para conocer y revisar las diferentes opciones disponibles, ¿algo mejor que contar con ejemplos?

Ejemplos Xamarin.Forms.Platform.WPF

El repositorio de ejemplos oficial de Xamarin.Forms es una fuente inmejorable de ejemplos cubriendo desde ejemplos básicos a uso de SkiaSharp, SQlite, gestos, efectos, etc. A continuación, puedes encontrar un repositorio donde encontrar la mayoría de ejemplos (y creciendo!) con versión WPF.

Puedes encontrar el repositorio en GitHub:

Ver GitHub

Más información

[Xamarin.Forms] Novedades de la versión 3.2 pre1 (Preview)

Introducción

Recientemente se ha liberado la primera Preview de la versión 3.2 de Xamarin.Forms. Una nueva versión repleta de novedades que vamos a revisar en este artículo.

Las mejoras principales

A continuación, vamos a revisar las novedades principales (no son todas).

Control de la posición del caret

Comenzamos revisando una novedad sencilla pero muy interesante, controlar la posición del Caret. Ahora contamos con una nueva propiedad de tipo entero llamada CursorPosition.

<Entry 
     CursorPosition="4"
     Text="CursorPosition"/>

También tenemos un Platform Specific en el caso de iOS para poder controlar el color del cursor Entry<iOS>.CursorColor.

Commandable Span regions

Ya contábamos con la propiedad FormattedText para poder crear texto con formato utilizando Spans. Ahora nos llega la posibilidad de añadir Gesture Recognizers a cada elemento.

<Label>
     <Label.FormattedText>
          <FormattedString>
               <Span Text="{Binding Span1}" />
               <Span 
                    Text="{Binding Span2}" 
                    TextColor="Blue">
                    <Span.GestureRecognizers>
                         <TapGestureRecognizer Command="{Binding TapCommand}" />
                    </Span.GestureRecognizers>
               </Span>
               <Span Text="{Binding Span3}"/>
          </FormattedString>
     </Label.FormattedText>
</Label>

El resultado:

Commandable Spans

Abre muchas posibilidades a crear enlaces, abrir otras Apps (enviar correo, etc.).

Bordes redondeados en BoxView

Vamos con otra novedad bastante requerida, bordes redondeandos en el control BoxView.

<BoxView 
     CornerRadius="24, 0, 24, 24"
     BackgroundColor="Red"
     Color="Red"
     HeightRequest="100"
     Margin="12, 0"/>

Contamos con la propiedad CornerRadius que permite establecer el valor del borde de cada esquina.

Bordes redondeados en BoxView

Paddings en botones

Añadida opción para controlar el Padding en botones:

<Button 
     Text="With Padding"
     Padding="6, 12, 48, 0"/>

La nueva propiedad Padding es de tipo Thickness.

Page TitleView

Estoy seguro que la siguiente novedad va a ahorrar más de un Custom Renderer. Estamos ante una propiedad adjunta llamada TitleView, como TitleIcon de la NavigationPage.

<NavigationPage.TitleView>
     <StackLayout>
          <Label 
               Text="TitleView"
               TextColor="White"
               FontSize="28"/>
          <Label 
               Text="I can be a subtitle"
               TextColor="White"/>
          <SearchBar 
               Placeholder="This is a SearchBar"
               PlaceholderColor="Black"
               BackgroundColor="White"
               HorizontalOptions="FillAndExpand"/>
     </StackLayout>
</NavigationPage.TitleView>

Podemos establecer el valor de TitleView en cada Page para personalinar el valor.

El resultado:

TitleView

Es posible establecer también el valor desde C#:

NavigationPage.SetTitleView(this, MyTitleView());

Nuevas propiedades Placeholder y PlaceholderColor en el Editor

Añadidas propiedades Placeholder y PlaceholderTextColor:

<Editor 
     Placeholder="This is the Placeholder"
     PlaceholderColor="Orange"/>

El resultado:

Placeholder en Editor

OnPlatform/OnIdiom markup extensions

Llega nueva extensión de marcado para simplificar la gestión de valores utilizados con OnPlatform u OnIdiom desde XAML.

¿El cambio?

Podemos pasar de:

<Label Text="This is nice!">
     <Label.FontSize>
          <OnPlatform x:TypeArguments="x:Double">
               <On Platform="iOS" Value="20" />
               <On Platform="Android" Value="24" />
               <On Platform="UWP" Value="28" />
          </OnPlatform>
     </Label.FontSize>
</Label>

A:

<Label 
     Text="This is nice!"
     FontSize="{OnPlatform Android=24, iOS=20, UWP=28}" />

SwipeGestureRecognizer

Dentro del conjunto de gestos disponibles en Xamarin.Forms, había uno que se echaba de menos, Swipe.

var swipe = new SwipeGestureRecognizer
{
     Direction = SwipeDirection.Left
};

swipe.Swiped += (sender, args) => 
{

};

Podemos detectar el gesto Swipe a izquierda, derecha, arriba y abajo.

Swipe!

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Más información

[Xamarin.Forms] Principales novedades de la versión 3.1

Introducción

Contamos con nueva versión de Xamarin.Forms, la 3.1. Una versión que tiene una variedad de novedades centradas en reducir la cantidad de controles personalizados y código específico en nuestras aplicaciones. En este artículo, vamos a hacer un rápido repaso sobre las novedades principales.

Novedades

Entre el conjunto de novedades principales encontramos:

Pestañas en la parte inferior

Google añadió BottomNavigationView en Android Support Library 25, y gracias a ello, ha sido posible añadirlo en Xamarin.Forms de forma sencilla utilizando Platform Specific.

<TabbedPage
     xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
     BarBackgroundColor="LightBlue"
     android:TabbedPage.ToolbarPlacement="Bottom"
     android:TabbedPage.BarItemColor="Gray"
     android:TabbedPage.BarSelectedItemColor="Black"
     Title="Bottom Tabs">
     <TabbedPage.Children>
          <ContentPage 
               Title="First"
               Icon="first">
               <Grid />
          </ContentPage>
          <ContentPage
               Title="Second"
               Icon="second">
               <Grid />
          </ContentPage>
          <ContentPage
               Title="Third"
               Icon="third">
               <Grid />
          </ContentPage>
     </TabbedPage.Children>
</TabbedPage>

Se puede establecer la posición de las pestañas con la propiedad ToolbarPlacement. También se cuentan con propiedades destinadas a personalizar el estilo de las pestañas:

  • BarItemColor: Color del icono y texto de cada pestaña.
  • BarSelectedItemColor: Color del icono y texto de la pestaña seleccionada.
Pestañas en la parte inferior

Auto-Resize Editor

Otra pequeña novedad bastante requerida. Según se va escribiendo en un control de tipo Editor, el control va creciendo automáticamente. Lo podemos conseguir gracias a la propiedad AutoSize que permite los siguientes valores:

  • Disabled: Valor por defecto. El control no crecerá.
  • TextChanges: El control crece automáticamente para permitir mostrar el contenido.
<Editor
     Text="AutoResize"
     AutoSize="TextChanges"/>

El resultado:

Autoresize Editor

Return key para Entry

Con la nueva propiedad ReturnType del Entry podemos modificar la apariencia del botón para completar la acción en el teclado virtual.

<Entry 
     ReturnType="Send"/>

Los valores posibles para ReturnType son:

  • Default
  • Done
  • Go
  • Next
  • Search
  • Send

El resultado:

Return Key

AutoCapitalization keyboard para el Entry

A veces en ciertos formularios no deseamos que el teclado automáticamente establezca la primera letra en mayúsculas. Por ejemplo, al introducir un correo electrónico. Ahora podemos controlar el comportamiento del teclado con KeyboardFlags:

<Entry 
     Placeholder="Insert text">
     <Entry.Keyboard>
          <Keyboard x:FactoryMethod="Create">
               <x:Arguments>
                    <KeyboardFlags>CapitalizeNone</KeyboardFlags>
               </x:Arguments>
          </Keyboard>
     </Entry.Keyboard>
</Entry>

Puedes consultar los valores posibles de KeyboardFlags en el siguiente enlace.

Auto Capitalization

Opciones de scrollbar Vertical y Horizontal

Se han añadido propiedades para controlar la visibilidad de las barras de scroll del ScrollView, tanto horizontal como vertical.

<ScrollView
     VerticalScrollBarVisibility="Always" 
     HorizontalScrollBarVisibility="Never">
</ScrollView>

Bindable Span

Otra novedad bastante interesante. Ahora podemos usar enlace a datos en Spans además de poder personalizar el color de cada Span:

<Label>
     <Label.FormattedText>
          <FormattedString>
               <FormattedString.Spans>
                    <Span Text="Test" />
                   <Span Text="{Binding Info}"
                         TextColor="Red" />
               </FormattedString.Spans>
          </FormattedString>
     </Label.FormattedText>
</Label>

Invocar JavaScript desde WebView

Ahora podemos invocar de forma sencilla código JavaScript desde el control WebView, utilizando una cadena con la posibilidad de obtener el valor de retorno.

string result = await EvaluateJsWebView.EvaluateJavaScriptAsync(
"var test = function(){ return 'This string came from Javascript'; }; test();");

Lo conseguimos con el nuevo método EvaluateJavaScriptAsync que evalua el código pasado como parámetro y retorno un valor siempre en formato de cadena.

Otros

Hay muchos más pequeños cambios como:

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Más información

[Xamarin.Forms] Addins y extensiones para Visual Studio macOS y Windows

Introducción

Visual Studio para macOS y Windows cuentan con modelos de extensión diferentes, modelos para crear interfaces de usuario diferentes y habitualmente trasladar un addin de macOS a una extension en Windows o viceversa, es costoso. ¿Podemos simplificar el proceso?, ¿podemos lograr compartir más elementos?.

En este artículo, vamos a ver como crear addins para Visual Studio macOS así como extensiones para Visual Studio Windows utilizando Xamarin.Forms para lograr compartir la UI.

Utilizaremos Measurer4000, herramienta diseñada para obtener métricas de código compartido en proyectos Xamarin. Nuestro objetivo será añadir la herramienta dentro de Visual Studio.

Add-ins para Visual Studio macOS

La arquitectura de Visual Studio para macOS es extensible. La forma de extender se basa en rutas de extensión que permiten que terceros extiendan el comportamiento. Por ejemplo: para extender la zona de edición de código, se expone /MonoDevelop/SourceEditor2/ContextMenu/Editor permitiendo añadir nuevos comandos en el menu contextual al hacer clic derecho.

AddIn Maker es un proyecto Open Source creado por Mikayla Hutchinson que permite el desarrollo y la depuración de add-ins para Visual Studio macOS desde Visual Studio macOS.

Para la gestión de la interfaz de usuario se utiliza GTK# o XWT.

Extensiones para Visual Studio Windows

En Windows tenemos la posibilidad de extender practicamente cualquier parte: menús, barras de herramientas, ventanas, etc.

Para crear extensiones se deben instalar las opciones de Desarrollo de extensiones de Visual Studio.

Extensiones en Windows

Para crear extensiones contamos con una plantilla de proyecto VSIX vacía que puede usar junto con las nuevas plantillas de elemento que crean extensiones de editor, ventanas de herramientas y comandos de menú.

Para la definición de la UI, utilizamos WPF.

Xamarin.Forms

Con la llegada de Xamarin.Forms 3.0 encontramos soporte a Linux gracias a un nuevo backend basado en GTK# además de un backend WPF.

Por lo que si usamos GTK# y WPF, ¿podríamos usar XAML y Xamarin.Forms para definir la UI de add-ins para Visual Studio tanto para macOS como para Windows?, ¿podría ser compartida?.

El proyecto en macOS

Comenzamos creando un proyecto de tipo IDE Extension:

IDE Extension

Este proyecto ya cuenta con la referencia a MonoDevelop.Addins. Continuamos añadiendo el paquete NuGet de Xamarin.Forms y Xamarin.Forms.Platform.GTK.

Para trabajar con Xamarin.Forms, debemos realizar la inicialización. La mejor opción para realizar esta tarea es realizarla nada más se abra el IDE. Para ello, vamos a crear un comando:

public class InitXamarinFormsCommand : CommandHandler
{
     protected override void Run()
     {
          Forms.Init();
     }
}

Y modificaremos el archivo Manifiest.addin.xml para añadir nuestro comando como punto de extensión en el arranque del IDE.

<Extension path="/MonoDevelop/Ide/StartupHandlers">
     <Class class="Measurer4000.Addin.Mac.Commands.InitXamarinFormsCommand"/>
</Extension>

Llega la hora de extender.

Añadimos otro punto de extensión:

<Extension path = "/MonoDevelop/Ide/MainMenu/Tools">
     <CommandItem id="Measurer4000.Addin.Mac.Commands.MeasurerCommand"/>
</Extension>

Fíjate que en esta ocasión, añadiremos un nuevo comando en el menu principal, opción herramientas.

Veamos la definición del comando:

public class MeasurerCommand : CommandHandler
{
     protected override void Update(CommandInfo info)
     {
          info.Visible = true;

          var projects = IdeApp.Workspace.GetAllProjects();

          if (projects.Any())
               info.Enabled = true;
          else
               info.Enabled = false;
     }

     protected override void Run()
     {
          new MeasurerWindow().Show();
     }
}

Comenzamos utilizando IdeApp. La clase estática MonoDevelop.Ide.IdeApp es su punto de entrada de extension de Visual Studio. Expone Workbench, Workspace, múltiples servicios  así como métodos relacionados con el ciclo de vida del IDE.

Habitualmente, la clase IdeApp se utiliza para acceder a Workbench o a Workspace. IdeApp.Wortkspace se usa para acceder al estado general del Ide durante una sesión de usuario. Podemos abrir nuevos proyectos y documentos, detectar archivos abiertos y mucho más.

En nuestro caso, lo utilizamos para detectar si el usuario tiene abierto al menos un proyecto.

En caso de abrir un proyecto, habilitamos la opción.

Al ejecutar el comando lanzamos una ventana llamada MeasurerWindow.

public class MeasurerWindow: Gtk.Window
{
     public MeasurerWindow()
     : base(Gtk.WindowType.Toplevel)
     {
          Title = "Measurer4000";
          WindowPosition = Gtk.WindowPosition.Center;

          var page = new MeasurerView();

          Add(page.CreateContainer());

          SetSizeRequest(800, 480);
     }
}

Es una ventana realizada con Gtk cuyo contenido utilizará una ContentPage de Xamarin.Forms. La clave para utilizar Xamarin.Forms es embeber el contenido. Tenemos disponible el método de extensión CreateContainer de Xamarin.Forms en el backend GTK para obtener la ContentPage como contenido nativo.

El proyecto en Windows

Comenzamos el proyecto en Windows añadiendo un comando.

Nuevo comando

Los menús y las barras de herramientas son la forma en que los usuarios acceden a los comandos en el VSPackage. Los comandos son funciones que realizan tareas, como mostrar una ventana o crear un nuevo archivo. Los menús y barras de herramientas son formas gráficas convenientes para presentar los comandos a los usuarios.

En este comando realizamos la inicializacion de Xamarin.Forms:

public static void Initialize(Package package)
{
     Instance = new MeasurerCommand(package);

     Forms.Init();
}

Al ejecutar el comando:

private void MenuItemCallback(object sender, EventArgs e)
{
     var measurerWindow = new MeasurerWindow();

     var measurerContent = new MeasurerView().ToFrameworkElement();
     measurerWindow.Content = measurerContent;

     measurerWindow.Show();
}

Lanzamos una ventana llamada MeasurerWindow (al igual que ya hacíamos en macOS), ventana WPF cuyo contenido es una ContentPage de Xamarin.Forms. La clave para utilizar Xamarin.Forms es de nuevo embeber el contenido. Tenemos disponible el método de extensión ToFrameworkElement de Xamarin.Forms en el backend WPF para obtener la ContentPage como contenido nativo.

La ventana:

<Window 
     x:Class="Measurer4000.Addin.Windows.Windows.MeasurerWindow"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
     WindowStartupLocation="CenterScreen"
     Title="Measurer 4000">
     <Grid>

     </Grid>
</Window>

UI XAML compartida

Tanto en macOS como en Windows utilizamos una ContentPage para definir la interfaz de usuario. Hablamos de una interfaz definida en XAML que puede ser compartida en macOS y Windows, donde en cada plataforma, se utilizará un backend diferente para renderizar la UI con GTK# en el caso de macOS y con WPF en el caso de Windows.

<Grid>
     <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="*" />
          <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>
     <Grid Grid.Row="0"
          Margin="24">
          <Grid.ColumnDefinitions>
               <ColumnDefinition />
               <ColumnDefinition />
               <ColumnDefinition />
          </Grid.ColumnDefinitions>
          <StackLayout Grid.Column="0">
          <StackLayout Orientation="Vertical"
               HorizontalOptions="Center"
               Margin="0, 24, 0, 0">
               <Label Text="iOS Specific Code" />
               <Label Text="{Binding Stats.iOSSpecificCode}"
                    FontSize="30" />
          </StackLayout>
          <StackLayout Orientation="Vertical"
               HorizontalOptions="Center"
               Margin="0, 24, 0, 0">
               <Label Text="Share code in iOS" />
               <Label Text="{Binding Stats.ShareCodeIniOS}"
                    FontSize="30" />
          </StackLayout>
     </StackLayout>
     ...

En la interfaz utilizaremos algunos Labels donde msotrar información con cantidad de líneas así como porcentajes de código compartido y código específico. Por otro lado, utilizamos Oxyplot para mostrar gráficos de tipo tarta.

public MeasurerView()
{
     InitializeComponent();

     BindingContext = new CustomMainViewModel();
}

Toda la lógica del addin, modelos, ViewModels, etc. es la ya existente en la herramienta. Utilizaremos MVVM de exactamente la misma forma utilizada para crear Apps, en nuestro addin. En la ViewModel es necesario pasar la ruta de la solución para que pueda analizar y obtener toda la información.

En macOS tenemos en IdeApp.Workspace lo necesario para obtener la información necesaria de la solución con la que trabaja el usuario. Podemos obtener el listado de soluciones con el metodo GetAllSolutions.

var solutionPath = Path.Combine(Directory.GetCurrentDirectory(), solution.FileName);
_viewModel.MeasureSolutionByPath(solutionPath);

En el caso de Windows, obtenemos la instancia del objeto DTE (Development Tools Environment). DTE representa el entorno de desarrollo integrado (IDE) de Visual Studio y es el objeto de máximo nivel en la jerarquía. Nos otorga acceso a una gran variedad de propiedad y métodos para obtener información de la solución, propiedades, ventanas, etc.

var solution = ((DTE)ServiceProvider.GlobalProvider.GetService(typeof(DTE))).Solution;
var solutionPath = solution.FullName;
_viewModel.MeasureSolutionByPath(solutionPath);

Accedemos a la solución, y extraemos la ruta a la misma.

El resultado en macOS:

Addin en macOS

Y en Windows:

Addin en Windows

¿Qué te parece?. Quizás en un futuro sea una opción a la hora de extender Visual Studio. Ahora que tenemos el IDE en más de un sistema operativo, es hora de pensar en contar con una opción para crear extensiones que compartan la mayor cantidad de código posible.

Más información