Lección 1: Introducción a la Interfaz Gráfica en XamarinEnrique Aguilar@enriqueaguilarFollow #XamarinDiplomado

Agenda

Lección 1Introducción a la Interfaz Gráfica de Android en Xamarin

Tema 1Generación de una Aplicación con Interfaz Gráfica de tipo Relative Layout

codificado y su vinculación con el código del Activity principal.

AgendaExisten diferentes esquemas de Interfaz Gráfica en Android.

De las más usadas se encuentran:

Linear Layout Relative Layout Table Layout Grid View Tab Layout List View

Agenda

LinearLayout Relative Layout Table Layout Grid View Tab Layout List View

Existen diferentes esquemas de Interfaz Gráfica en Android. De las más usadas se encuentran:

Agenda

LinearLayout Relative Layout Table Layout Grid View Tab Layout List View

Existen diferentes esquemas de Interfaz Gráfica en Android. De las más usadas se encuentran:

Agenda

LinearLayout Relative Layout Table Layout Grid View Tab Layout List View

Existen diferentes esquemas de Interfaz Gráfica en Android. De las más usadas se encuentran:

Agenda

LinearLayout Relative Layout Table Layout Grid View Tab Layout List View

Existen diferentes esquemas de Interfaz Gráfica en Android. De las más usadas se encuentran:

Agenda

LinearLayout Relative Layout Table Layout Grid View Tab Layout List View

Existen diferentes esquemas de Interfaz Gráfica en Android. De las más usadas se encuentran:

Ejemplo con Relative Layout codificado y su vinculación con el Activity.

Creamos una nuevaaplicación para Androidcon Visual Studio

Archivo Main.axml

En el explorador desoluciones con botónderecho se agrega unnuevo elemento, en estacaso será una imagenque servirá de fondo enla carpeta Resources /drawable.

Archivo Main.axml

En el explorador desoluciones con botónderecho se agrega unnuevo elemento, en estacaso será una imagenque servirá de fondo enla carpeta Resources /drawable.

Archivo Main.axmlEl archivo .axml identificael formato de la interfazgráfica.

Por lo general las 3principales plataformasmóviles (Android, iOS yWindows Phone) tienenarquitecturas similares conun formato de tipo xml conlas adecuaciones de cadatecnología.

Archivo Main.axml

Se define el tipo de Layouta utilizar, estableciendopropiedades de colocacióny asignando la imagen defondo que se encuentra enla carpeta drawable.

Archivo Main.axml

Se definen en esta zonados controles de tipoTextView que sonetiquetas que puedentener o no relación conla codificación. Cadauno también con suspropiedades dedimensión y el segundocon la ubicación.

Archivo Main.axml

Se define en esta zonaun control de tipoEditText que tiene dediferencial que cuentacon un “id” en donde sele establece el nombre.

Además cuenta con laforma del tipo deteclado, en este casonumérico para sucaptura.

Archivo Main.axml

Se definen unTextView adicionalcon característicassimilares al anterior.

Archivo Main.axml

Se define en esta zonaotro control de tipoEditText. en este casoserá con el teclado pordefault para la captura.

Archivo Main.axml

Por último se define elcontrol de tipo Botón,que al igual que losEditText recibe unidentificador.

Se cierra la etiqueta delLayout.

Archivo Main.axml

Una vez terminadanuestra codificación o altérmino de cada controlpodemos ir apreciandolos elementos de maneravisual.

Archivo Main.axml

Está la alternativa de usar drag and drop, sin embargo se recomienda iniciaren modo de codificación para entender la estructura de los diferentesesquemas de Layout.

Al ser archivos independientes, puedes crear la interfaz gráfica en VisualStudio, Xamarin Studio, Android Studio, DroidDraw, etc, y vincularlo con tuActivity en C#.

Archivo Main.axml

En la parte superiorpodemos definir el tipode resolución, versión deAndroid, temas, MaterialDesign.

Se recomienda iniciarprobando endispositivos físicosdirectamente paramejorar la experiencia ylos emuladores paraadecuar a lasresoluciones máscomunes.

Archivo MainActivity.cs

Cuenta con un Métodode “inicio” el cualpermitirá vincularmediante la instrucciónSetContentView lainterfaz gráfica.

Archivo MainActivity.cs

Se declaran loscontroles para realizar lainstancia de loselementos de la interfazgráfica, mediante lainstrucción FindViewById

Archivo MainActivity.cs

Se define el evento delbotón, agregando untry/catch, se recibe lainformación de las cajasde texto y se asignan alas variables, realizandola operación delejemplo.

Archivo MainActivity.cs

En el catch se define unnotificador mediante lainstrucción Toast endonde se colocará elmensaje que capture elcatch y se enviará demanera corta en caso dealguna excepción.

Archivo MainActivity.cs

Se ejecuta la aplicaciónen el dispositivo físico oen el emulador, dondese podrán realizar laoperación del ejemplo.

Archivo MainActivity.cs

La aplicación quedaguardada en eldispositivo.

DEMO

Módulo 2: Introducción al desarrollo para Android con Xamarin

EnriqueAguilar@enriqueaguilar

Follow #XamarinDiplomado

Gracias por su atención

Lección 1: Introducción a la Interfaz Gráfica en Xamarin