[Xamarin.Forms] Utilizando TitleView

Introducción

Necesitar personalizar la barra superior de la aplicación añadiendo un logo, o un texto personalizado (utilizando una fuente específica, múltiples líneas, etc.) es bastante habitual. Hasta ahora, en Xamarin.Forms era algo posible pero…utilizando un Custom Renderer. Es un punto positivo de Xamarin.Forms, poder crear un Custom Renderer para acceder a características y elementos específicos de cada plataforma. Sin embargo, añade la necesidad de añadir más código (por plataforma) para conseguir un resultado.

Sin embargo, con la llegada de Xamarin.Forms 3.2 nos llega TitleView, una nueva opción para personalizar la barra superior sin necesidad de llegar a necesitar código específico por plataforma.

TitleView

TitleView es parte de NavigationPage, donde se muestra el contenido del título de una ContentPage.

Cabecera personalizada

Comenzamos por un ejemplo sencillo. Vamos a personalizar la cabecera con un icono y título:

<NavigationPage.TitleView>
     <StackLayout
          Orientation="Horizontal"
          VerticalOptions="Center"
          Spacing="10">
          <Image
               Source="Icon.png"
               Aspect="AspectFit" />
          <Label
               Text="TitleView"
               FontSize="18"
               TextColor="White"
               VerticalTextAlignment="Center" />
     </StackLayout>
</NavigationPage.TitleView>

Podemos añadir el contenido deseado tal y como haríamos en el contenido de una página.

El resultado:

Cabecera personalizada!

Comandos

Podemos utilizar los eventos, comandos e incluso GestureRecognizers en los elementos de la cabecera:

<NavigationPage.TitleView>
     <StackLayout
          Orientation="Horizontal"
          VerticalOptions="Center"
          Spacing="10">
          <Image
               Source="Icon.png"
               Aspect="AspectFit">
               <Image.GestureRecognizers>
                    <TapGestureRecognizer
                         Tapped="OnHeaderIconTapped"/>
               </Image.GestureRecognizers>
          </Image>
          <Label
               Text="TitleView"
               FontSize="18"
               TextColor="White"
               VerticalTextAlignment="Center" />
     </StackLayout>
</NavigationPage.TitleView>

En este sencillo, ejemplo, mostramos un dialogo al pulsar sobre el logo de la cabecera:

Gestos

Barra de búsqueda

Pasemos a un ejemplo más complejo y típico. Vamos a añadir una barra de búsqueda:

<NavigationPage.TitleView>
     <Frame
          CornerRadius="{OnPlatform 12, UWP=1}"
          BackgroundColor="{OnPlatform Transparent, Android={StaticResource WhiteColor}}"
          HasShadow="False"
          IsClippedToBounds="True"
          Padding="0">
          <Frame.Content>
               <SearchBar
                    x:Name="SearchBar"
                    Placeholder="Search movie..."
                    HorizontalOptions="FillAndExpand"
                    SearchCommand="{Binding SearchCommand}"
                    SearchCommandParameter="{Binding Text, Source={x:Reference SearchBar}}">
                    <SearchBar.Behaviors>
                         <behaviors:SearchTextChangedBehavior />
                    </SearchBar.Behaviors>
               </SearchBar>
          </Frame.Content>
     </Frame>
</NavigationPage.TitleView>

Mostramos un listado de peliculas de modo que, cada vez que cambia el texto de la barra de búsqueda, se actualiza el contenido de la página con el listado de películas filtrado.

El resultado:

Búsqueda

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Limitaciones o problemas conocidos actuales

Entre el listado de limitaciones actuales encontramos:

  • SearchBar debe ser contenido en un panel con HorizontalOptions=LayoutOptions.Fill y VerticalOptions=LayoutOptions.Fill, o bien, utilizar WidthRequest y HeightRequest específicos para que todo se vea correctamente en iOS.
  • TitleView no es compatible con Android FormsApplicationActivity.
  • El contenido no puede ser más grande que el tamaño predeterminado de la barra de navegación en iOS/UWP. En caso de intentarlo, habrá recorte de forma automática.
  • Ya contábamos con las propiedades BackTitle, Title, TitleIcon y ahora con TitleView ocupando el mismo espacio en la barra de navegación, puede que haya conflictos y espacio limitado para admitir todas estas propiedades al mismo tiempo. Esto variará según la plataforma y el tamaño de la pantalla.

Más información

Anuncios

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

El evento

El pasado 26 de Septiembre, teníamos en SVQXDG un divertido evento donde abriendo debate e intercambiando ideas algunos de los ejemplos revisamos opciones disponibles para conseguir interfaces atractivas con Xamarin.Forms. Vimos opciones como efectos, Custom Renderers, SkiaSharp, VisualStateManager, etc.

El material

A continuación puedes encontrar la presentación utilizada en el evento:

En cuanto a ejemplos, revisamos muchos ejemplos revisando UI y opciones en cada uno de ellos.

My Trip Countdown

Sencillo contador atrás hacia el momento de una fecha (viaje).

My Trip Countdown

Las claves:

  • Uso de SkiaSharp para crear progreso circularcon degradado.
  • Gestión de imágenes con efectos (circular).
  • Botón con degradado.

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Pulse Music

Interfaz de un reproductor de música.

Pulse Music

Las claves:

  • Uso de SkiaSharp para crear progreso circular.
  • Animaciones infinitas.
  • Gestión de imágenes con efectos (circular).

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Walkthrough

Creación de un Walkthrough con diferentes pasos animados.

Walkthrough

Las claves:

  • Uso de Carousel.
  • Animaciones con Lottie.
  • API de animaciones de Xamarin.Forms.

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Netflix

Ejemplo donde se replica la interfaz básica de Netflix.

Vista principal en Android

La claves de este ejemplo:

  • Navegación personalizada (logo, transparencias, etc.).
  • Listados horizontales.
  • Parallax.

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Movies

El último ejemplo que revisamos. Aplicación utilizando la API de TheMovieDB.

Movies

La claves de este ejemplo:

  • Crear aplicaciones para Linux y WPF utilizando Xamarin.Forms.
  • Personalizar estilos para Linux y WPF.
  • Aplicar temas GTK.

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Más información

Primer vistazo a Xamarin.Forms gui.cs Backend

Introducción

Las aplicaciones de consola son geniales!. Probablemente, has realizado alguna aplicación de consola con alguna pequeña (o gran) herramienta.Tener una aplicación de consola tiene ventajas: liviana, multiplataforma, rápida, etc.

¿Y si pudiesemos realizar aplicaciones de consola con Xamarin.Forms?.

gui.cs

Estamos ante un Toolkit de UI para .NET, .NET Core y Mono que permite crear apliaciones de consola (si, con interfaz!) para Linux, macOS y Windows. Creado por Miguel de Icaza.

gui.cs

El Toolkit cuenta con una variedad de controles:

Añade soporte a colores, reescalado de pantalla, eventos, async, etc. A nivel de gestión de vistas es bastante similar a otros frameworks de UI como GTK# .

Conceptos básicos

gui.cs cuenta on Application.Run, que facilita un bucle principal donde:

  • Procesar eventos de teclado.
  • Gestiona el foco.
  • Redibuja áreas de la pantalla.
  • Timers.
  • Etc.

Cada elemento visual, hereda de la clase View. Toda View cuenta con propiedades X, Y, Height y Width para la gestión de tamaño y posición. Todo se pone más interesante al poder realizar composición de Views.

¿Y por qué Xamarin.Forms?

Buena pregunta. El framework ya permite grandes posibilidades, es sencillo de usar, así que, ¿por qué?.

EL origen

Why not?

Xamarin.Forms cada vez llega a más plataformas tras los backends de WPF y GTK, además de seguir aumentando en posibilidades. Ya había utilizada gui.cs para herramientas y pruebas, vi un tweet, nació un reto personal y voila. ¿Por qué no añadir la posibilidad de crear aplicaciones de consola con Xamarin.Forms?.

Backend gui.cs

Disponible en GitHub y en NuGet, nace el backend de Xamarin.Forms de gui.cs.

NOTA: Todos los ejemplos anteriores estan realizados con Xamarin.Forms.

Actualmente con soporte a:

  • ContentPage
  • Layouts
  • Label
  • Button
  • Editor
  • Entry
  • ListView
  • ProgressBar
  • Switch

Paulatinamente se añadirá soporte a otras características y controles.

¿Cómo lo uso?

Partimos de una aplicación de consola. Tras crear la aplicación, añadimos el paquete NuGet Terminal.Gui.Forms:

Terminal.Gui.Forms

Se encarga de añadir las referencias necesarias tanto a Terminal.Gui como a Xamarin.Forms.

Creamos un Application de Xamarin.Forms:

public class App : Xamarin.Forms.Application
{
     public App()
     {
          MainPage = new MainView();
     }
}

Se encargará de iniciar y establecer la página inicial. La página inicial, creada con XAML:

<StackLayout>
     <Grid 
          Padding="10, 10, 10, 10">
     <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
          <ColumnDefinition Width="60" />
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="100" />
     </Grid.ColumnDefinitions>
     <Label 
          Text="Search by Zip Code" 
          Grid.Row="0" 
          Grid.Column="0" 
          Grid.ColumnSpan="3"
          TextColor="White"
          Margin="0, 6"/>
     <Label 
          Text="Zip Code:" 
          Grid.Row="1"
          Grid.Column="0"
          Style="{StaticResource LabelStyle}"
          TextColor="#C0C0C0" />
     <Entry
          Grid.Row="1"
          Grid.Column="1"
          Text="{Binding ZipCode, Mode=TwoWay}"
          Margin="5, 0" />
     <Button 
          Text="Get Weather" 
          Grid.Row="1" 
          Grid.Column="2"
          Command="{Binding WeatherCommand}"/>
     </Grid>
     <StackLayout
          Padding="10, 10, 10, 10">
          <Label 
               Text="Location" 
               Style="{StaticResource LabelStyle}" />
          <Label 
               Text="{Binding Weather.Title}"
               Style="{StaticResource FieldStyle}" />
          <Label 
               Text="Temperature"
               Style="{StaticResource LabelStyle}" />
          <Label 
               Text="{Binding Weather.Temperature}" 
               Style="{StaticResource FieldStyle}" />
          <Label
               Text="Wind Speed"
               Style="{StaticResource LabelStyle}" />
          <Label 
               Text="{Binding Weather.Wind}"
               Style="{StaticResource FieldStyle}" />
          <Label 
               Text="Humidity" 
               Style="{StaticResource LabelStyle}" />
          <Label
               Text="{Binding Weather.Humidity}"
               Style="{StaticResource FieldStyle}" />
          <Label 
               Text="Visibility" 
               Style="{StaticResource LabelStyle}" />
          <Label 
               Text="{Binding Weather.Visibility}"
               Style="{StaticResource FieldStyle}" />
          <Label 
               Text="Time of Sunrise" 
               Style="{StaticResource LabelStyle}" />
          <Label
               Text="{Binding Weather.Sunrise}"
               Style="{StaticResource FieldStyle}" />
          <Label
               Text="Time of Sunset" 
               Style="{StaticResource LabelStyle}" />
          <Label 
               Text="{Binding Weather.Sunset}"
               Style="{StaticResource FieldStyle}" />
     </StackLayout>
</StackLayout>

Hacemos uso de:

  • Diferentes Layouts
  • Diferentes controles
  • Enlace a datos
  • Estilos
  • Etc

La página cuenta con una ViewModel enlazada que se encarga de usar un servicio que accederá a información de OpenWeatherMap para informar de datos climatológicos dado un código postal.

Sólo nos falta, en la clase Program, inicializar Terminal.Gui, XamarinForms; cargar nuestra aplicación; y ejecutar la misma:

public class Program
{
     public static void Main()
     {
          Terminal.Gui.Application.Init();
          Forms.Init();
          var app = new App();
          var window = new FormsWindow("WeatherApp");
          window.LoadApplication(app);
          Terminal.Gui.Application.Run();
     }
}

Sencillo, ¿verdad?. Veamos el resultado:

WeatherApp

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Recuerda, es una Preview…

Estamos ante la primera Preview con un soporte limitado de guis.cs y de Xamarin.Forms. Sin embargo, hay algunas características aun no disponibles:

  • Frame
  • Menus
  • ScrollView
  • Etc

Más información

Channel 9: Retro Computing with .NET

[Xamarin.Forms] Nueva extensión de marcado para OnPlatform y OnIdiom

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.

Xamarin.Forms

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.

Hasta ahora…

Dentro de la clase Device, la propiedad OS permitía identificar la plataforma en la que se ejecuta la aplicación. La extensión demarcado OnPlatform permite personalizar la interfaz por plataforma. La extensión OnPlatform esta soportada por la clase OnPlatformExtension (se permite la abreviatura OnPlatform desde XAML) que define las siguientes propiedades:

  • Default: Representa el valor por defecto que aplica a todas las plataformas.
  • Android: Valor aplicado en Android.
  • GTK: Valor aplicado en plataformas GTK.
  • iOS: Valor aplicado en iOS.
  • macOS: Valor aplicado en macOS.
  • Tizen: Valor aplicado en plataformas Tizen.
  • UWP: Valor aplicado en Universal Windows Platform
  • WPF: Valor aplicado en la plataforma Windows Presentation Foundation.

Hasta ahora, el uso de OnPlatform era:

<BoxView>
     <BoxView.Color>
          <OnPlatform x:TypeArguments="Color">
               <On Platform="Android" Value="Green" />
               <On Platform="iOS" Value="Blue" />
               <On Platform="UWP" Value="Orange" />
          </OnPlatform>
     </BoxView.Color>
</BoxView>

La extensión de marcado OnIdiom permite realizar personalizaciones de la apariencia basadas en el tipo de dispositivo donde corre la App. Soportado por la clase OnIdiomExtension define las siguientes propiedades:

  • Default: Valor por defecto, aplicado a todos los dispositivos.
  • Phone: Valor aplicado a teléfonos.
  • Tablet: Valor aplicado a tabletas.
  • Desktop: Aplicado a plataformas de escritorio.
  • TV: Valor aplicado a plataformas TV.
  • Watch: En este caso, el valor se aplica a plataformas Watch.

Donde, el uso de OnIdiom hasta ahora era:

<BoxView>
     <BoxView.Color>
          <OnIdiom x:TypeArguments="Color">
               <OnIdiom.Phone>Green</OnIdiom.Phone>
               <OnIdiom.Tablet>Blue</OnIdiom.Tablet>
               <OnIdiom.Desktop>Orange</OnIdiom.Desktop>
          </OnIdiom>
     </BoxView.Color>
</BoxView>

Hasta ahora…

Llega nueva extensión de marcado con Xamarin.Forms 3.2

Con Xamarin.Forms 3.2 llega una nueva versión de extensión de marcado para OnPlatform y OnIdiom.

Veamos su uso con OnPlatform:

<BoxView 
     Color="{OnPlatform Red, Android=Green, iOS=Blue, UWP=Orange}"/>

Y con OnIdiom:

<BoxView 
     Color="{OnIdiom Red, Phone=Green, Tablet=Blue, Desktop=Orange}" />

Como podemos ver, se simplifica la verbosidad para conseguir el mismo resultado.

Puedes encontrar ejemplo en GitHub:

Ver GitHubY a ti, ¿qué te parece la novedad?.

Más información

[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.Forms] Utilizando Toolbox

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. Con la llegada de Visual Studio 2017 15.8 y Visual Studio macOS 7.6 llega la Toolbox o caja de herramientas de controles Xamarin.Forms. Esto permite arrastrar y soltar elementos desde la caja de herramientas a la zona de edición de XAML.

Xamarin.Forms Control Toolbox

Xamarin.Forms Control Toolbox

La Toolbox se puede encontrar en Windows dentro del menu View o pulsando Ctrl + Alt + X. En macOS se puede encontrar en el menu View bajo Pads.

Arrastrar y soltar!

El Toolbox muestra todo el conjunto de controls, layouts y celdas disponibles en Xamarin.Forms permitiendo arrastrar y soltar cualquier elemento desde la propia caja de herramientas a la zona de edición de XAML.

Tenemos agrupados todo el conjunto de controles y Layouts con soporte a Xamarin.Forms 3.0, es decir, se incluyen nuevos elementos como FlexLayout.

Organizando los controles

Se pueden crear nuevos grupos en la caja de herramientas haciendo clic derecho, Add Tab.

Add Tab

Podemos arrastrar y mover elementos de unos grupos a otros de forma sencilla.

Mover elementos

NOTA: Es posible eliminar o editar las nuevas pestañas o grupos creados.

Limitaciones

Si tienes experiencia en desarrollo .NET con aplicaciones de escritorio, Windows Phone, etc. probablemente recuerdes la posibilidad de arrastrar elementos desde la caja de herramientas a la vista del diseñador. Actualmente, no es una posibilidad con Xamarin.Forms.

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