Curso de Android con Java

© Todos los Derechos Reservados Global Mentoring

Experiencia y Conocimiento para tu Vida

1

Curso de Android con Java

Cada día surgen nuevos dispositivos con pantallas más grandes, mayores resoluciones, multitouch y en general con mejoras que incrementan la experiencia visual del usuario. En esta lección estudiaremos los componentes disponibles en Android para crear la Interface de Usuario (UI). Aprenderemos a utilizar los distintos layouts, las Vistas, los Fragmentos, y en general cómo crear interfaces intuitivas y funcionales en nuestras Actividades. Los elementos individuales en una actividad, son agrupados por distintos Layout Managers, los cuales heredan de la clase ViewGroup. Uno de los grandes retos de Android, es ser capaz de adaptarse a pantallas y tamaños de dispositivos muy variados. A partir de la versión 3.0 se introdujo el concepto de Fragmentos, con el objetivo de proveer un mejor soporte al momento de crear layout para tablets y dispositivos de mayor tamaño comparado con los que se contaba originalmente. Algunos de los términos con los que debemos familiarizarnos cuando trabajamos con las vistas en Android son: View: Una vista es la clase base para todos los elementos visuales, también conocidos como controles o widgets. Todos los controles UI heredan de la clase View. View Groups: Los grupos de vistas son extensiones de la clase View, y se utilizan para crear controles compuestos conformados de Views interconectados. Fragments: Los fragmentos se introdujeron en la versión 3.0 (API Level 11), y son utilizados para encapsular porciones de elementos UI. Esto permite optimizar los layout para diferentes tamaños de pantalla y crear elementos UI reutilizables. Activities: Las actividades, según hemos comentado, representan una ventana de la pantalla. Para desplegar una actividad es necesario asignarle una vista, usualmente un layout o fragmento. Para asignar una vista a una actividad, según hemos visto, utilizamos el método setContentView y proporcionamos como parámetro el layout a utilizar. Ej. setContentView(R.layout.main). Al utilizar un layout desacoplamos la presentación de la lógica de la aplicación, así podemos realizar cambios a la interface gráfica sin necesidad de modificar el código. De igual manera, podemos cambiar de manera dinámica la vista a utilizar, dependiendo del dispositivo que estemos utilizando, y así optimizar la presentación de la aplicación. También es posible agregar elementos visuales desde el código Java, sin embargo esto no desacopla la presentación del código, así que no se recomienda a menos que lo necesitemos para resolver un requerimiento en particular al crear elementos y/o componentes de manera dinámica. Por ejemplo: TextView miTextView = new TextView(this); setContentView(myTextView); miTextView.setText("Hola Android"); Para más información de vistas consultar: http://developer.android.com/guide/topics/ui/overview.html http://developer.android.com/tools/debugging/debugging-ui.html#hierarchyViewer

© Todos los Derechos Reservados Global Mentoring

Experiencia y Conocimiento para tu Vida

2

Curso de Android con Java

Los Layout Manager o mejor conocidos como layouts o plantillas, son extensiones de la clase ViewGroup, y son utilizados para colocar objetos View hijos dentro de la interfaz gráfica. Los layout pueden anidarse, permitiendo crear UI complejas al combinar distintos layout’s en una sola actividad o UI. El SDK de Android ya incluye algunos layout nativos, y también podemos crear los propios, dependiendo de las necesidades de la UI. La decisión de cual utilizar depende de las necesidades de la UI, la facilidad de uso, la eficiencia al desplegarse, entre otros requerimientos a cumplir. Por ejemplo, tenemos los siguientes layout’s: LinearLayout: Este layout alinea cada elemento View hijo de manera vertical u horizontal de manera lineal. El layout vertical contiene columnas de Views, mientras que el layout horizontal contiene renglones de Views. RelativeLayout: Este es uno de los layout más flexibles, ya que permite definir la posición de cada View hijo de manera relativa respecto a otro elemento o respecto a los límites de la pantalla. Android también provee layout’s con Adaptadores, con el objetivo de desplegar información, por ejemplo, en forma de lista, grid, entre otros: ListView: Este ViewGroup despliega una lista de elementos desplazables. Cada elemento (item) se va agregando de manera automática a la lista. Para ello se utiliza un Adapter, el cual utiliza como fuente de datos un array, lista, o un query de base de datos, y convierte cada elemento en un View el cual es colocado en la lista. GridLayout: Este layout fue introducido en la versión 4.0 (API Level 14), el cual utiliza un grid rectangular para ir agregando los elementos uno a uno, en series de renglones y columnas. Este layout es muy flexible y se puede utilizar para simplificar el uso de layout anidados de los tipos mencionados anteriormente. En este caso se recomienda apoyarse del editor visual, en lugar de crearlo directamente en código XML. Todos los layout mencionados fueron diseñados para adaptarse a la pantalla del dispositivo que estemos utilizando, evitando posiciones absolutas o especificación en pixeles. Para más información de los distintos layout disponibles pueden consultar: http://developer.android.com/guide/topics/ui/declaring-layout.html

© Todos los Derechos Reservados Global Mentoring

Experiencia y Conocimiento para tu Vida

3

Curso de Android con Java

La forma preferida para crear layouts en Android es utilizando un archivo XML, el cual es un recurso externo ubicado en la carpeta res/layout. Cada elemento del XML debe contener un elemento raíz simple, por ejemplo: RelativeLayout, LinearLayout, etc. Este elemento principal o raíz, puede contener tantos elementos anidados como sea necesario, pudiendo ser elementos View (ej. textView, editText, Button, etc) o también puede contener elementos anidados de tipo ViewGroup (ej. LinearLayout, RelativeLayout, GridLayout, etc). Por cada uno de los elementos podemos especificar las constantes wrap_content y match_patern, las cuales son utilizadas para ajustar el ancho y alto del elemento. Estas constantes, en combinación con layout que son escalables (ej. LinearLayout, RelativeLayout o GridLayout) proveen la manera más simple, pero poderosa, para asegurar que las interfaces gráficas se ajusten al tamaño de la pantalla del dispositivo y sean independientes de la resolución del mismo. La constante wrap_content se ajusta al tamaño del elemento en sí mismo. Por ejemplo, la cadena de Nombre utiliza esta propiedad para utilizar exactamente el tamaño de la cadena y no más espacio. La constante match_parent se expande para abarcar todo el espacio disponible donde está contenido (elemento padre). Ambas propiedades se pueden aplicar a lo ancho (width) o alto (height) de cada elemento. Por ejemplo, en el código mostrado, la caja de texto EditText, a lo ancho se ajusta con la propiedad android:layout_width="match_parent", con ello se expande todo lo que sea posible y únicamente está limitado por el layout en sí mismo, ya que es su elemento padre. Para definir los atributos de cada elemento en el documento XML, se utiliza el prefijo android, al cual en términos XML se conoce como xml namespace (xmlns), y lo podemos entender como un prefijo para identificar de manera única a las propiedades que estamos definiendo. Por ejemplo, para agregar un identificador al elemento TextView utilizamos el atributo android:id, y con esto definimos de manera única que el id pertenece a un View de Android, evitando cualquier conflicto con otros atributos que también definan un id. El estudio de documentos XML y namespaces queda fuera del alcance de este curso. Pueden consultar el siguiente link para mayor referencia: http://www.w3schools.com/xml/xml_namespaces.asp y para más información de XML pueden consultar: http://www.w3schools.com/xml/default.asp

© Todos los Derechos Reservados Global Mentoring

Experiencia y Conocimiento para tu Vida

4

Curso de Android con Java

En Android existe una gran cantidad de componentes que podemos utilizar de inmediato en nuestras aplicaciones. En la figura podemos observar la paleta que nos proporciona Android, y la clasificación de cada elemento según el IDE de Eclipse. Los tipos de componentes disponibles son:

Form Widgets: Encontramos componentes tales como TextView, CheckBox, RadioButton, Spinner, entre varios más. TextFields: Encontramos componetes para capturar datos, dpendiendo del tipo de dato, se agrega un atributo inputType, el cual especifica si es de tipo texto, dígitos, email, fecha, hora, etc. Layouts: Muestra RelativeLayout, etc.

distintos

layouts

tales

como

GridLayout,

LinearLayout,

Composite: Encontramos componentes como ListView, ExpandableList, Tabuladores, SearchView, entre otros. Images & Media: Encontramos componentes para mostrar imagnes, video, así como sus controles. Time & Date: Muestra controles como TimePicker, DatePicker, una calendario, cronómetro, reloj análogo y digital. Entre otros…

Varios de estos componentes los pondremos en práctica conforme avancemos en el curso. Además de los componentes mencionados, también es posible crear nuestros propios componentes. Lo más sencillo para esta tarea es extender los componentes ya existentes y adecuarlos a nuestros requerimientos, creando nuestros propios componentes personalizados.

Para

más

información

de

componentes

en

Android,

consultar:

http://developer.android.com/guide/topics/ui/controls.html

© Todos los Derechos Reservados Global Mentoring

Experiencia y Conocimiento para tu Vida

5

Curso de Android con Java

Los adaptadores son utilizados para enlazar los datos (ej. Un arreglo o un query) con un View Group (ej. ListLayout o GridLayout). Los adaptadores extienden de la clase AdapterView, y son responsables de crear los View hijos que representan cada uno de los elementos según el ViewGroup donde se va a mostrar el contenido. En resumen, con el uso de los Adapters definimos una forma en común para acceder a las colecciones de datos. Android provee el concepto de Adaptadores para mostrar colecciones de datos en forma de lista: ArrayAdapter: Adapta un arreglo para ser mostrado en una vista tipo lista, por ejemplo un ListView. SimpleCursorAdapter: Adapta el resultado de una consulta, proveniente de un proveedor de contenido, para ser mostrado en una vista tipo lista. Elementos para iniciar un Adapter: Contexto (La Actividad en sí misma) Un layout que muestre la lista (Puede ser de Android o una nuestra) La lista de elementos Por ej: new ArrayAdapter(this, android.R.layout.simple_list_item_1, Items); Android implementa ya algunos Adaptadores y List para manipular este contenido. También es posible personalizarlo y extenderlo, de tal manera que podemos crear Adaptadores según nuestras necesidades. Uno de los layout con que dispone android es: android.R.layout.simple_list_item_1 Pará más información de los layout que android tiene disponibles son: http://developer.android.com/reference/android/R.layout.html https://github.com/android/platform_frameworks_base/tree/master/core/res/res/layout

© Todos los Derechos Reservados Global Mentoring

Experiencia y Conocimiento para tu Vida

6

Curso de Android con Java

© Todos los Derechos Reservados Global Mentoring

Experiencia y Conocimiento para tu Vida

7

Curso de Android con Java

En Global Mentoring promovemos la Pasión por la Tecnología Java. Te invitamos a visitar nuestro sitio Web donde encontrarás cursos Java Online desde Niveles Básicos, Intermedios y Avanzados. Además agregamos nuevos cursos para que continúes con tu preparación como consultor Java de manera profesional. A continuación te presentamos nuestro listado de cursos en constante crecimiento: Fundamentos de Java Programación con Java Java con JDBC HTML, CSS y JavaScript Servlets y JSP’s Struts Framework Hibernate Framework Spring Framework JavaServer Faces Java EE (EJB, JPA y Web Services) JBoss Administration Android con Java Datos de Contacto: Sitio Web: www.globalmentoring.com.mx Email: [email protected] Ayuda en Vivo: www.globalmentoring.com.mx/chat.html

Todos los Derechos Reservados Global Mentoring

Experiencia y Conocimiento para tu Vida

8