Android UI Retos Fundamentales: ComposicionesRelativas

Ha leído acerca de como los relative layouts trabajan en Android. Ahora pruebe sus nuevas habilidades con estos desafíos progresivos que conllevan controles relative layouts y consolide su conocimiento del lenguaje de programación Java y sobre el diseño y desarrollo de la interfaz de usuario Android.

Configuración

Para prepararse para este desafío, seguramente querrá empezar con una aplicación Android básica. Sencillamente, crear un aplicación Android dentro de Eclipse y editar su Activity por defecto, específicamente el método onCreate() para probar el código que usted creo para éste desafío.

Si lo que le pedimos es demasiado desafiante, entonces le recomendaremos dar un paso hacia atrás. Empezar con algunos de los tutoriales Android, tales como Introducción al Desarrollo en Android o Comenzando Android: Empezando con Fortune Crunch. Una vez que haya dominado la configuración de un proyecto Android, regrese y pruebe estos ejercicios progresivos.

Un Desafío Progresivo

Este es un desafío progresivo. Integra numerosas habilidades que los programadores principiantes en Android deben dominar para diseñar y desarrollar aplicaciones. Siguiendo cada uno de los pasos abajo, que aumentan en dificulta, usted consolidará su conocimiento de relative layouts y sobre el diseño de la interfaz de usuario en Android en general.

Paso 0: Prepara sus Recursos

Ahora que ha creado un proyecto Android de forma apropiada, va a necesitar crear algunos recursos para usarlos dentro de su interfaz de usuario.

Crear:

• Haga siete recursos string, uno para cada color en el espectro (“Red”, “Orange”, “Yellow”, “Green”, “Blue”, “Indigo”, “Violet”).
• Haga siete recursos de color, uno para cada color en el espectro (Rojo=>#f00, Naranja=>#ffa500, Amarillo=>#ffff00, Verde=>#0f0, Azul=>#00f, Indigo=>#4b0082, Violeta=>#ee82ee).
• Haga dos recursos más de color para los colores de los textos (Negro=>#000, Blanco=>#fff).

¿Confundido por crear string o recursos de colores? Entonces revise este tutorial sobre el formato string.

Desafío 1: Defina su Layout Resource

Comience creando un archivo nuevo layout resource llamado relativerainbow.xml. Dentro de este archivo XML, añada un control relative layout que llene toda la pantalla, ajuste la gravedad de sus controles al centro. Luego, añada siete controles TextView como controles child dentro del relative layout: uno para cada color en el espectro. Configure el texto de cada control TextView para el string de color adecuado en el espectro y el color de fondo para el valor de color apropiado. Además, ajuste cada atributo de control como layout_width a wrap_content, su atributo layout_height a wrap_content y su padding a algo razonable como 8dp.

Si ha completado este paso correctamente, entonces sus layou debería de lucir igual que este:

Observe que todos los controles están aplicados arriba uno del otro, con el último control que fue añadido en la parte "superior".

Desafío 2: Apilando controles Child

Queremos que cada control TextView sea visible y que cada color sea mostrado en el orden correcto. Podríamos haber usao un layout linear para organizar nuestros controles, pero queremos más flexibilidad aquí.

Comience añadiendo una regla relative layout para cada control TextView apropiado tal que los controles sean presentados uno después de otros de forma vertical en un orden de pila (Rojo, Naranja, Amarillo, Verde, Azul, Indigo, Violeta).

Ahora sus layouts deberían tener la siguiente apariencia:

PISTA: Verifique el atributo android:layout_below.

Desafío 3: Intercalando controles Child

Hasta ahora, podríamos haber usado sencillamente un layou linear orientado verticalmente para mostrar los controles. En este paso, avanzaremos más allá del orden de pila de los controles TextView y comenzaremos ajustándolos a la izquierda o derecha de los otros controles para alcanzar el diseño resultante:

PISTA: Para alcanzar este efecto, usted necesita usar dos reglas diferentes para los relative layout, asociados con los atributos: android:layout_toLeftOf y android:layout_toRightOf.

Sólo para probar, cambie al modo panorámico y compruebe que el mismo layout luce igual que:

¡Siéntase con toda la libertad de publicar sus soluciones XML en la sección de comentarios!

Desafío Extra: Recrear el Layout por medio de programación en Java.

Si ha encontrado que el desafío anterior fue razonablemente sencillo, entonces considere seguir este desafío extra: recrear su layout resource por medio de programación en Java, al contrario que en un layout XML resource.

Necesitará comemtar la llamada setContentView() en su método onCreate() del Activity y desarrollar su RelativeLayout, como se discutió en Diseño de Interfaz de Usuario Android: Relative Layouts.

Estas son algunas pistas que puede implementar en el relative layout rainbow, por medio de programación:

• Comience construyendo cada uno de los controles TextView: De a cada control un identificador único usando el método setId().
• Para configurar los parámetros del layout para cada control TextView
• Use el método addRule() del objeto RelativeLayout.LayoutParams para configurar apropiadamente las reglas para cada control TextView.
• Use el método setText() de la clase TextView para cargar y mostrar el recurso string apropiado.
• Use el método setTextSize() de la clase TextView para configurar el tamaño de la fuente del texto. Puede usar el método getResources().getDimension() para cargar el dimensión resource.
• Use el método setTextColor() de la clase TextView para configurar el color de fuente del texto. Usted puede usar el método getResources().getColor() para cargar el color resource.
• Use el método setBackground() de la clase TextView para configurar el color de fondo del control. Usted puede usar el método getResources().getColor() para cargar el color resource.
• Use el método setGravity() de la clase TextView para configurar la alineación. La clase Gravity contiene definiciones para diferentes tipos de gravedad.
• Después, construya un control RelativeLayout.
• Use el método setGravity() para configurar la alineación de todos los controles child del layout. La clase Gravity contiene definiciones para diferentes tipos de gravedad.
• No olvide construir un objeto LayoutParams para configurar el atributo altura y anchura del mismo relative layout.
• Añada cada control TextView para su objeto RelativeLayout usando el método addView().
• Finalmente, use el método setContentView() para mostrar el RelativeLayout que usted acaba de configurar.

Encontrará la solución Java en la descarga proporcionada con este tutorial.

En conclusión

Los diseñadores de la interfaz de usuario Android usen relative layouts todo el tiempo para mostrar controles en relación unos a otros. Los controles child pueden ser mostrados uno cerca de otros (arriba, abajo, a la izquierda o la derecha) o relativos al parent layout. Las reglas layout son utilizadas para describir donde cada control child debería ser colocado en la pantalla.

¡Mucha suerte!

Sobre los Autores

Desarrolladores de Celulares; Lauren Darcey y Shane Conder son coautores de varios libros sobre el desarrollo en Android: un libro de programación a fondo titulado: Desarrollo de Aplicaciones Inalámbricas de Android y Sams Aprenda usted mismo a Desarrollar Aplicaciones para Android en 24 horas. Cuando no escriben, ellos pasan su tiempo desarrollando programas para celulares en sus empresas y proporcionando servicios de consultoría. Pueden ser localizado a través de correo electrónico: androidwirelessdev+mt@gmail.com o por medio de su blog en androidbook.blogspot.com y en Twitter @androidwireless.

¿Necesita más ayuda escribiendo aplicaciones de Android? ¡Revise nuestros últimos libros y recursos!