Enrique Aguilar Lección 1: Introducción a la Interfaz...
30
Transcript of Enrique Aguilar Lección 1: Introducción a la Interfaz...
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
