Construyendo una aplicación en Xamarin.Forms

Esteban Yañez
Jul 7, 2018 · 4 min read

En este post vamos a ver los conceptos básicos para construir nuestra primera aplicación en Xamarin.Forms, para ver como aplicarlos prácticamente, te invito a pasar por el siguiente repositorio de Github que te explica paso a paso como construir una aplicación:

Si aún no sabes lo que es Xamarin y llegaste acá, te invito a pasar por mi otro post:

DataBinding

¿Qué es DataBinding?

DataBinding es la técnica de vincular las propiedades de dos objetos para que los cambios en una propiedad se reflejan automáticamente en la otra propiedad. Enlace de datos es una parte integral de la arquitectura de aplicación Model-View-ViewModel (MVVM).

¿Como implemento DataBinding en Xamarin.Forms?

Hay una serie de pasos que tenemos que seguir y desarrollar para utilizar DataBinding en Xamarin.Forms. Primero, tenemos que implementar la interfaz INotifyPropertyChanged. Personalmente, recomiendo tener esta implementación en un BaseViewModel junto con una propiedad que sea IsBusy la cual vamos a utilizar seguido en la mayoría de los ViewModels. Esta implementación se realiza de la siguiente manera:

Hay dos cosas que debemos destacar del código que estamos viendo. Primero, la implementación de INotifyPropertyChanged consta de un EventHandler y el método OnPropertyChanged. Este método es el que tenemos que invocar cuando seteamos el valor de una variable, y esto es lo segundo que destacamos. Para utilizarlo vamos a necesitar una variable privada, que es quien se encarga de almacenar el valor, y una publica que devuelve el valor de la variable privada, y además notifica el cambio al setearla. Para continuar mostrando como utilizar y como fuciona DataBinding, vamos a utilizar el siguiente ViewModel:

El siguiente paso que vamos a realizar es avisarle a la vista cuál es el modelo de datos que vamos a utilizar. Para esto vamos a asignarle el TextViewModel al atributo BindingContext del ContentPage, desde code behind, como lo vemos a continuación:

Por último, desde la vista, utilizando el atributo Binding podemos decir cuál es la propiedad que estamos escuchando, como se muestra a continuación:

De esta forma, cada vez que cambiemos el valor del Entry, se va a actualizar el valor que tenga el Label.

Dependency Service

¿Qué es Dependency Service?

Usando Xamarin.Forms nos vamos a encontrar con situaciones en las que debemos definir el comportamiento de los proyectos para plataformas específicas. Dependency Service encuentra la implementación correcta de la plataforma, permitiendo que desde el código compartido tengamos acceso a la funcionalidad nativa.

¿Cómo utilizo Dependency Service?

Para poder utilizar Dependency Service vamos a necesitar cuatro componentes:

  • Interfaz
  • Implementación por plataforma
  • Registro
  • La llamada a DependencyService — comparten el código debe llamar explícitamente a DependencyService para solicitar las implementaciones de la interfaz.

Lo primero que necesitamos es definir una interfaz con la funcionalidad requerida, para esto, vamos a utilizar el ejemplo de Text to speech sólo para iOS. Entonces, desde el proyecto compartido, definimos la interfaz ITextToSpeech como se muestra a continuación:

El próximo paso es implementar la interfaz en cada plataforma. Como dije anteriormente, para este ejemplo utilizaremos solo iOS, desde el proyecto de iOS colocaremos la siguiente implementación:

A continuación, registramos la implementación con DependencyService. Para hacer esto, simplemente debemos asignarle un atributo de metadato y DependencyService se va a encargar de buscar la implementación correcta a la plataforma en tiempo de ejecución. El metadato a agregar es el siguiente:

Luego, desde el archivo App.xaml.cs vamos a registrar manualmente cada servicio de dependencia definida en el proyecto iOS con el métodoRegister<T> tal y como se muestra a continuación:

Por último, desde el código compartido debemos llamar explícitamente a DependencyService para pedirle la implementación de la interfaz. Esto lo hacemos como se muestra a continuación:

Custom Renderers

¿Qué son los custom renderers?

Las interfaces de usuario de Xamarin.Forms se representan mediante los controles nativos de la plataforma de destino, lo que permite a las aplicaciones conservar la apariencia y comportamiento adecuada para cada plataforma. Los Custom Renderers permiten reemplazar este proceso para personalizar la apariencia y comportamiento de los controles en cada plataforma.

¿Cómo uso custom renderers?

Vamos a realizar una customización de un Entry, para esto, lo primero que vamos a hacer desde código compartido es crear una clase que herede de Entry como se muestra a continuación:

Luego consumimos este Entry desde una vista. Para esto debemos agregar un namespace en la vista y luego utilizarlo como se muestra a continuación:

Por último, generamos el Renderer desde cada plataforma en particular. A continuación veremos la implementación para iOS:

Y para Android la implementación es la siguiente:

En ambos casos lo que estamos realizando es cambiar el background del componente para que se vea como a continuación:

Para que al ejecutar la aplicación se renderice customizada, solo tenemos que agregar el metadato ExportRenderer e indicarle cuál es el componente al cual estamos customizando.

Más recursos

Para aprender más recomiendo ver la documentación oficial:

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade