Xamarin Forms, apps nativas multiplataforma. Introducción

Xamarin nos ofrece un enfoque multiplataforma diferente, ya que nos facilita la tarea de desarrollar cualquier tipo de aplicación de forma nativa.

En este artículo vamos a ver Xamarin.Forms, un framework que puso Microsoft a nuestra disposición cuando compró la empresa Xamarin allá por febrero de 2016, la cual llevaba desde 2011 desarrollando esta tecnología.

Fue en la conferencia "Build 2016" cuando Microsoft anunció que Xamarin pasaría a ser gratuito para desarrolladores, incluyéndose en todas las ediciones del IDE Visual Studio, incluida la Community Edition.

¿Qué es Xamarin.Forms?

Xamarin.Forms es un framework dirigido a desarrolladores C#, que posibilita la generación de aplicaciones multiplataforma para los principales ecosistemas móviles (iOS, Android y UWP). No sólo podrás desarrollar para esas plataformas, sino que también tendrás acceso a las principales características específicas de cada plataforma.

La principal característica de Xamarin.Forms es que permite compartir interfaces de usuario. Ésta es realmente la diferencia con otros frameworks como Xamarin.iOS o Xamarin.Android. Utilizando para ello tecnología .NET.

Con Xamarin.Forms, el framework más completo de Xamarin, podrás compartir cerca del 96% del código. Mientras que con Xamarin tradicional puedes compartir el núcleo de tu aplicación, pero tienes que construir interfaces de usuario nativas para cada plataforma. Parece algo obvio, pero es importante destacarlo: Las aplicaciones que generamos son nativas. El código final que se ejecuta en cada dispositivo es un código compilado nativo para ese sistema operativo.

¿Qué son Aplicaciones Multiplataforma?

Se denominan así a todas las aplicaciones en las que una parte significativa del código puede ser compartido en multiplataformas. Generalmente se desarrollan en un único entorno de desarrollo.

¿Por qué utilizar Xamarin.Forms?

Según la encuesta anual de Stack Overflow de 2017, este framework tiene la cuarta posición en el ranking de los más queridos. También destaco que te permite desarrollar aplicaciones en C#, el cual es el tercer lenguaje más utilizado según dicha encuesta.

En este diagrama, podemos ver dónde estaría situado Xamarin.Forms comparado con otras formas de desarrollo móvil:

¿Por qué quedarnos con otras opciones? ¿Por qué no desarrollar usando el SDK nativo de Android, iOS o UWP? Bien, vamos a hacer una pequeña comparativa.

Cosas buenas de desarrollar con SDKs nativos:

• Rendimiento 100% nativo
• Experiencia 100% nativa
• Acceso a las últimas API recién salidas

Cosas malas de desarrollar con SDKs nativos:

• Para cada plataforma distinto lenguaje: Java para Android, Swift para iOS
• Para cada plataforma IDEs distintos: Android Studio y XCode (aunque esto está cambiando)
• Para cada plataforma distintas APIs y diseños de APIs
• Distintos patrones de diseño para cada plataforma
• Es más difícil mantener una experiencia de usuario consistente
• Desarrolladores especializados en cada plataforma
• Complejidad de testear las aplicaciones
• Costes más elevados para obtener resultados: más código, más desarrolladores, más testing

Cosas buenas de desarrollar aplicaciones con Xamarin.Forms:

• Un único lenguaje C#, con todas sus bondades
• Un único IDE: Visual Studio y todas sus bondades
• Rendimiento cercano a nativo
• Experiencia cercana a nativo
• Un único conjunto de APIs consistentes: abstracción para todos los dispositivos
• Una única forma de hacer las cosas: mismo desarrollo en todas las plataformas
• Aplicaciones consistentes en todas las plataformas: aspecto similar, comportamientos similares
• Equipos más pequeños, un desarrollador puede hacer todo
• Más fácil para realizar un testing de calidad
• Más rápido llegar al mercado
• Costes menores para producir aplicaciones de alta calidad
• Permite compartir igualmente código C# / .NET con Backend y aplicaciones Web y Windows

Cosas malas de desarrollar aplicaciones con Xamarin.Forms:

• No siempre están disponibles todas las APIs o características de cada dispositivo
• Las API nativas más nuevas no están rápidamente disponibles
• Puede haber problemas de rendimiento (aunque en la práctica no hay tantos como se podría esperar)

Como conclusión, podríamos decir que si necesitas una aplicación que comparta código y comportamiento entre diferentes plataformas, que quieras que llegue al mercado rápido y que los costes sean menores, Xamarin.Forms es la solución.

Empezar con Xamarin.Forms

Para empezar con Xamarin.Forms sólo necesitas instalar Visual Studio, con el instalador propio de Visual Studio. En el asistente, selecciona "Desarrollo para dispositivos móviles con .NET" (Asegúrate de que tienes instalado .NET Framework 4.6.1).

Con este único instalador ya estarás listo para empezar a programar.

Nuestra primera aplicación con Xamarin.Forms

Vamos a desarrollar una aplicación muy sencilla que admita entrada/salida, utilizando un ejemplo muy sencillo como es un programa que calcula tu edad. Para ello, abre Visual Studio y selecciona "crear un nuevo proyecto". Luego, elige en el panel de tipos de proyecto la opción entre Visual C# y después Cross-Platform App (Xamarin). Por último, indícale un nombre a la aplicación.

Después de indicarle el nombre a la aplicación, Visual Studio nos pregunta por el tipo de aplicación:

Seleccionamos Blank App y le damos a aceptar. Visual Studio tardará unos segundos en generar la aplicación.

Cuando finalice, veremos que hay cuatro proyectos creados en nuestra aplicación:

1. Un proyecto compartido con código común, que usaremos principalmente
2. Un proyecto para la interfaz común de las aplicaciones Android
3. Un proyecto para la interfaz común de las aplicaciones iOS
4. Un proyecto para la interfaz común de UWP

Vamos a añadir una etiqueta, un botón, y un campo en la parte común para poder calcular la edad. Para ello, simplemente tenemos que modificar la clase MainPage.xaml. Al estar en la parte común, se modificará para las tres plataformas.

Entre las etiquetas ContentPage.Content, vamos a añadir etiquetas StackLayout, Label, Button, y Entry, por este orden:

<StackLayout Orientation="Vertical" Padding="30" Spacing="40">
    <Label Text="¿Qué edad tienes?" FontSize="36"/>
    <Entry x:Name="yearEntry" Placeholder="Indica tu año de nacimiento" />
    <Button Text="Calcular edad" x:Name="calculateButton" Clicked="OnCalculate" />
</StackLayout>

Ahora, en la parte del code-behind, tenemos que modificar la clase

MainPage.xaml.cs

y agregar un método OnCalculate que es el que hemos indicado en la llamada:

private void OnCalculate(object sender, EventArgs e)
{
    var currentYear = DateTime.Now.Year;
    var birthYear = yearEntry.Text;
    var resultYear = 0;
 
    if (!string.IsNullOrEmpty(birthYear))
    {
        resultYear = currentYear - int.Parse(birthYear);
    }
 
    var resultText = $"Tienes {resultYear} años";
    calculateButton.Text = resultText;
}

Ya lo tenemos, ahora simplemente compila el proyecto, y podrás probar en un emulador de Android, iOS, o UWP (si estás en Windows). Por si quieres compilar para iOS, también puedes conseguir una demo gratuita para mac.

Cómo funciona Xamarin.Forms

Como hemos dicho, Xamarin.Forms nos permite compartir interfaces. Para hacer esto, utiliza lo que se conoce como renderizadores, definidos para cada plataforma, que traducen los elementos de interfaz comunes a interfaces nativas.

Por ejemplo, si colocamos una etiqueta (control de Label) en una interfaz Xamarin, esto se traducirá a un TextView en Android, un UILabel en iOS, y un TextBlock en UWP. Por lo tanto, para cada control de Xamarin hay un control nativo real al que se traduce.

Ya vimos cómo usar controles de UI en nuestro ejemplo "Calcular Edad", usando XAML. Pero, ¿qué controles están disponibles?

Controles básicos:

• Label: Muestra texto
• Entry: Pides al usuario un "string" de texto
• Editor: Editor de texto multilínea
• Button: Botón que el usuario puede pinchar
• Image: Muestra imágenes
• ActivityIndicator: Muestra que está ocurriendo algo
• DatePicker: Muestra fecha
• Slider: Selección de número dentro de un rango continuo
• TimePicker: Selección de tiempo
• Stepper: Selección de número entero dentro de un rango
• Switch: Switch booleano On/Off
• SearchBar: Entrada de texto para búsqueda
• WebView: Vista para contenido web
• OpenGLView: Vista para OpenGL

Controles de layout:

• StackLayout: Controles en línea simple o vertical
• Grid: Controles en tabla. Filas y columnas con diferentes tamaños
• AbsoluteLayout: Posición con coordenadas exactas en píxeles
• RelativeLayout: Posición relativa a otros controles o al layout principal
• ScrollView: Añade funcionalidad de "scrolling"
• ContentView: Base para controles de usuario personalizados
• Frame: Dibuja un border alrededor de un control

Controles complejos:

• ListView: Lista de filas de información
• TableView: Muestra información particionada en secciones
• Picker: Muestra una lista de texto para elegir uno
• Map: Muestra un mapa

Controles de páginas:

• ContentPage: Página que muestra un único elemento dentro
• TabbedPage: Páginas con pestañas (tabs)
• NavigationPage: Page que gestiona navegación usando pila de páginas
• MasterDetailPage: Páginas con un "Hamburger Menu" a la izquierda y detalles a la derecha
• CarouselPage: Página gestiona la navegación entre páginas usando un gesto de deslizamiento como "carousel"

Controles de celda para ListView:

• TextCell: Muestra dos de texto
• ImageCell: Muestra una imagen y texto
• EntryCell: Muestra texto y elementos Entry
• SwitchCell: Muestra texto y un switch On/Off
• ViewCell: Base para control de celda personalizado

Usando plataformas específicas con Xamarin.Forms

Xamarin nos permite disponer de una serie de herramientas para acceder a las APIs específicas de cada plataforma. Como ya hemos mencionado, habrá características nativas en cada plataforma que querremos usar. Si en algún momento necesitamos utilizar algo específico, disponemos de varias formas de implementarlo.

Xamarin.Forms DependencyService

DependencyService nos permite registrar y resolver pares de interfaces de implementación. Es útil cuando queremos utilizar funciones específicas de cada plataforma, como por ejemplo la geolocalización.

Para utilizarlo, primero creamos en el código compartido interfaces para las funciones. Por ejemplo, para la cámara de fotos:

public interface ICameraService
{
    bool IsCameraAvailable { get; }
    Task<Stream> TakePictureAsync();
}

Luego implementamos esas interfaces por separado en cada plataforma:

public class CameraService : ICameraService
{
    public bool IsCameraAvailable
    {
        get
        {
            var context = Forms.Context as Activity;
            var pm = context.PackageManager;
            return pm.HasSystemFeature(PackageManager.FeatureCamera);
        }
    }
    
    public async Task<Stream> TakePictureAsync()
    {
        // Implementación específica de Android
    }
}

Lo registramos en cada proyecto:

[assembly: Dependency(typeof(CameraService))]
namespace MyApp.Droid.Services
{
    public class CameraService : ICameraService
    {
        // Implementación
    }
}

Para invocar la función, usamos el servicio desde nuestro código compartido:

var cameraService = DependencyService.Get<ICameraService>();
if (cameraService.IsCameraAvailable)
{
    var pictureStream = await cameraService.TakePictureAsync();
    // Hacer algo con la imagen
}

Xamarin.Forms Effect

Los efectos son otra forma de personalizar controles nativos. Son útiles cuando queremos modificar ligeramente la apariencia o el comportamiento de un control existente, como añadir una sombra a un botón o cambiar la forma en que se muestra un borde.

Xamarin.Forms Custom Renderer

Los renderizadores personalizados nos permiten personalizar completamente cómo se renderiza un control Xamarin.Forms en cada plataforma. Esto es útil cuando necesitamos un control totalmente personalizado que no está disponible en Xamarin.Forms.

Para crear un renderizador personalizado, primero definimos nuestro control en el código compartido, y luego creamos una clase que hereda del renderizador específico para cada plataforma.

Conclusión

En este artículo hemos visto qué es Xamarin.Forms y cómo nos permite crear aplicaciones nativas multiplataforma con un alto grado de código compartido. Hemos creado una aplicación básica y visto algunos de los controles disponibles, así como las formas de acceder a funcionalidades específicas de cada plataforma.

Xamarin.Forms es una excelente opción para equipos con experiencia en C# y .NET que quieren desarrollar aplicaciones móviles sin necesidad de aprender múltiples lenguajes de programación y frameworks. Con un único codebase, podemos llegar a iOS, Android y UWP, lo que reduce significativamente el tiempo de desarrollo y mantenimiento.

En los próximos artículos profundizaremos más en aspectos como el patrón MVVM, la navegación, el acceso a datos y otras características avanzadas de Xamarin.Forms.