C#, Desarrollo, Xamarin

Lo basico con Xamarin Studio {Android App}


En publicaciones pasadas brinde una breve introducción a Xamarin y el abanico de posibilidades que nos ofrece esta herramienta multiplataforma. 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 utilizando Xamarin Studio.

Xamarin Studio Logo1

Instalando Xamarin

Si aun no cuentas con Xamarin, puedes optar por conseguir la 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 – Ctrl + Shift + 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

1

  • 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.

2

  • 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 Activity 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 ya hemos visto 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:

<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout

xmlns:android=”http://schemas.android.com/apk/res/android&#8221;

android:orientation=”vertical”

android:layout_width=”fill_parent”

android:layout_height=”fill_parent”>

<TextView

android:id=”@+id/myLabel”

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:text=”@string/helloLabel” />

<Button

android:id=”@+id/myButton”

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:text=”@string/hello” />

</LinearLayout>

Antes:

3

Después:

4

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#.

Después de haber realizado esto, deberemos de navegar y abrir el archivo Strings.xml que esta en la carpeta de values y añadir el recurso faltante:

<string name=”helloLabel”>Hello World!</string>

5

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.

6

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:

base.OnCreate (bundle);
SetContentView(Resource.Layout.Main);
var myButton = FindViewById<Button> (Resource.Id.myButton);
var myLabel = FindViewById<TextView> (Resource.Id.myLabel);

A continuación se inicializará un contador que nos indicará cuantas veces se ha presionado en botón aButton.

int count = 0;

El paso siguiente es agregar el evento click de nuestro botón:

myButton.Click += (sender, e) => {
count ++;
myLabel.Text = “Presionado” + count +”veces” ;
};

El contenido de nuestro archivo MainActivity.cs debe lucir de la siguiente forma:

7

 

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 se utilizo el emulador HTC One XL – Android 4.1.1 API 16) 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.

8

Este fue un tutorial rápido de los conceptos más básicos sobre crear una App para Android usando Xamarin Studio, 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.

Hasta la proxima!!

Anuncios

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s