En publicaciones pasadas se presentó una breve introducción a Xamarin y el abanico de posibilidades que nos ofrece. En esta publicación se abordará un pequeño tutorial con el fin de explicar los conceptos básicos del desarrollo de una aplicación de Android para Xamarin, y en una publicación posterior se explicará el desarrollo para iOS, esto con el fin de conocer los aspectos básicos de Xamarin y la forma en la que se diferencian el desarrollo de un tipo de aplicación y de otra.
Instalando Xamarin
Xamarin posee una versión gratuita que podemos encontrar en http://xamarin.com/download, está página nos descargará un instalador, dentro del instalador hay que asegurarse de seleccionar Xamarin.Android durante el proceso de instalación.
Creando el proyecto
Abrimos Xamarin Studio, enseguida notaremos un entorno gráfico muy amigable muy parecido al que nos ofrece Visual Studio.
Seleccionamos el menú Archivo (File) -> Nuevo (New) -> Solution (Solución)
Enseguida aparecerá un cuadro de diálogo con las diferentes templates de soluciones a las que tenemos acceso, en Xamarin.Android podemos identificar principalmente los siguientes tipos de templates:
– Android Library Project – Un proyecto de librería reusable de .NET para Android
– Android Application – Un proyecto básico de aplicación para Android
– Android OpenGL Application – Un proyecto de inicio de OpenGL
Seleccionamos Android Application, ya sea Android Honeycomb Application o Android Ice Cream Sandwich Application (para el tutorial se seleccionará Android Ice Cream Sandwich Application).
En seguida se cargará el template correspondiente dentro del entorno de Xamarin Studio, en el cual podemos identificar 2 partes muy diferenciadas entre sí:
– Explorador de soluciones: Muy parecido al que conocemos en Visual Studio, nos permite explorar dentro de las diferentes carpetas y archivos de nuestro proyecto.
– Área de edición: Nos permite modificar el contenido de cada archivo contenido dentro del proyecto.
Además, cabe mencionar que dicho proyecto se conforma de las diferentes carpetas:
– Assets: Contiene cualquier tipo de archivo que la aplicación necesita incluir en su empaquetado.
– Properties: Contiene la metadata normal del ensamblado de .NET.
– Resources: Contiene los recursos de la aplicación, tales como los archivos .cs en donde codificaremos , cadenas e imágenes, así también como el archivo XML donde se declaran las definiciones de la interfaz de usuario.
Como se puede observar en la imagen, la plantilla del proyecto también creó una clase llamada Activity1 en el archivo MainActivity.cs. Como información extra: un Activity es una clase que modela un destino donde un usuario puede realizar alguna acción mientras está utilizando la app, típicamente vía interfaz de usuario. Como analogía, pensemos que un Activity es en parte parecido a una página en ASP.NET, donde cada actividad tiene un ciclo de vida asociada a ella. Un Activity contiene métodos que pueden ser llamados en ciertos puntos de su ciclo de vida, para más información sobre Activities los invito a consultar el siguiente link: http://docs.xamarin.com/guides/android/application_fundamentals/activity_lifecycle/
Creando la interfaz de usuario
Ahora que hemos visto a groso modo la estructura de un proyecto de aplicación para Android en Xamarin, el siguiente paso a seguir es crear la interfaz de usuario de nuestra aplicación (UI).
En Xamarin.Android podemos crear una interfaz de usuario de dos diferentes maneras: mediante código o mediante XML, por cuestiones de simplicidad de nuestro tutorial rápido solo se examinará la creación de la interfaz de usuario mediante un archivo XML.
Por suerte Android soporta un sistema de creación de interfaz de usuario mediante un archivo XML. Dentro de Resources encontramos una carpeta llamada layout donde se ubica un archivo llamado Main.axml. Este archivo fue generado automáticamente por Xamarin.Android cuando justamente creamos el proyecto. Android generará un único identificador (ID) que le permite referenciar el archivo de layout con el código fuente, pero en nuestro caso para referenciar nuestro archivo Main.axml en nuestro código, usaremos la sintaxis Resource.Layout.Main, y de forma similar para los diferentes Layouts que se necesiten.
Abrimos el archivo Main.axml, notaremos que tenemos una vista de diseño y una vista donde se visualiza el contenido del XML, abrimos la vista donde se visualiza el contenido del XML y reemplazaremos el código existente por el siguiente:
La sintaxis @+id/name le indica al “Android parser” que genere el id del recurso con el nombre especificado, para de esta forma poder utilizar dicho id en todo el código fuente de forma parecida a como lo realiza C#.
Todos los cambios en nuestro archivo XML modificarán nuestra vista de diseño de forma automática; también se puede realizar la interfaz de usuario mediante la vista de diseño, los invito a experimentar con cualquiera de las dos opciones.
Como podemos observar acabamos de agregar a nuestra interfaz de usuario una Label y un Button y podemos observar una mejor organización de la interfaz de usuario mediante el archivo XML que si se realizará por código.
Ya definida nuestra sencilla interfaz de usuario procederemos con la implementación de la lógica de negocio. Para más información sobre las tags correspondientes de los diferentes elementos (buttons, textfields, lists) que podemos agregar a nuestra app es altamente recomendable visitar docs.xamarin.com
Código principal de nuestra aplicación
Ya que se tiene definida totalmente la interfaz de usuario, el siguiente paso es implementar el código correspondiente a la funcionalidad de nuestra aplicación. En este tutorial rápido se modificará el contenido de la label que definimos anteriormente cada vez que se presione un button. Dentro del archivo MainActivity.cs implementaremos nuestro código dentro del método: protected override void OnCreate (Bundle bundle)
Primeramente le diremos a nuestra aplicación que layout va a utilizar y enseguida declaremos los componentes del layout que necesitaremos en nuestro código de la siguiente forma:
A continuación se inicializará un contador que nos indicará cuantas veces se ha presionado en botón aButton.
int cont = 0;
El paso siguiente es agregar el evento click de nuestro botón:
aButton.Click += (sender, e) => {
aLabel.Text = “Presionado” + cont +”veces” ;
};
El contenido de nuestro archivo MainActivity.cs debe lucir de la siguiente forma:
Compilando y probando nuestra aplicación
Presionamos el botón Run que se encuentra localizado exactamente debajo del menú archivo.
Xamarin abrirá una lista de los emuladores disponibles, seleccionamos el que se ajuste a nuestras necesidades (para este tutorial el emulador Mono_for_Android_API_15) y presionamos el botón Start Emulator.
Para finalizar, ya que el emulador se encuentre inicializado presionamos el botón Ok y Xamarin compilará y correrá la aplicación dentro de nuestro emulador.
Este fue un tutorial rápido de los conceptos más básicos sobre crear una app para Android usando Xamarin, existen muchísimos conceptos más que por razones de espacio no pudieron ser incluidas aquí, pero que podemos encontrar en el siguiente enlace: docs.xamarin.android. Les recomiendo altamente la lectura de la documentación y la serie de tutoriales contenidos en el enlace.
Acerca del Autor
Salvador Luna Hernández es un ingeniero en mecatrónica y tecnólogo en informática y computación del Centro de Enseñanza Técnica Industrial, actualmente colabora con Dawcons como desarrollador en .NET en el área de software a la medida.
