Fundamentos de Android UI Desafío: ComposicionesLineales

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Ha leído acerca de cómo funcionan los layout lineales en Android. Pruebe sus nuevas habilidades con estos desafíos progresivos que involucran controles layout lineales y fortalezca su conocimiento del lenguaje de programación Java y en el diseño y desarrollo de la interfaz de usuario Android.

Configuración

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

Si lo que le estamos pidiendo es demasiado desafiante, entonces le recomendaríamos que retroceda. Comience con alguno de los tutoriales Android, tal como Introducción al Desarrollo Android o Comenzando en Android: Empezando con Fortune Crunch. Una vez que haya dominado la configuración de un proyecto Android, entonces regrese y pruebe estos ejercicios continuos.

Un Desafío Continuo

Este es un desafío continuo. Integra numerosas habilidades que la mayoría de los desarrolladores que están comenzando en Android deben dominar para diseñar y desarrollar aplicaciones. Al seguir cada uno de los pasos que se muestran abajo, lo cual aumentará la dificulta, usted fortalecerá sus conocimientos de layouts lineales y sobre el diseño en general de la interfaz de usuario Android.

Paso 0: Defina su String

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

Crear:

Crear siete recursos string, uno para cada color en la gama ("Rojo", "Naranja", "Amarillo", "Verde", "Azul", "Indigo", "Violeta").
Crear siete recursos de colores, uno para cada color en la gama (Rojo=>#f00, Naranja=>#ffa500, Amarillo=>#ffff00, Verde=>#0f0, Azul=>#00f, Indigo=>#4b0082, Violeta=>#ee82ee).
Crear dos recursos de color más para los colores de los textos (Negro=>#000, Blanco=>#fff).

¿Confundido por crear string o recursos de colores? Revise este tutorial sobre formato string.

Desafío 1: Definir su Layout Resource

Comience por crear un nuevo archivo layout resource llamado rainbow.xml. Dentro de éste archivo XML, agregue un control layout lineal alineado de forma vertical que ocupa toda la pantalla. Después, agregue siete controles TextView como controles child dentro del layout lineal: uno por cada color en la gama. Ajuste el texto de cada control TextView con el color string apropiado en la gama y, también, el valor de color de fondo apropiado. También, ajuste cada atributo layout_width del control para fill_parent y su atributo layout_height para wrap_content.

Si ha completado este paso de forma correcta, entonces su layout debería verse así:

Desafío 2: Ajustar sus Alineaciones

En este paso, enfocará su atención en varias propiedades de gravedad disponibles para los controles, incluyendo estos usado por los layout lineales.

Actualice el layout resource; rainbow.xml con los siguientes cambios: centre los controles TextView en la pantalla, y centre el texto dentro de cada control. PISTA: Esto requerirá que dos atributos XML diferentes sean ajustados, uno en el layout lineal y el otro en el control TextView.

Si ha completado este paso de forma correcta, entonces debería de verse así:

Desafío 3:
Modificando los Controles Layout Child Lineales

Layout lineales son muy flexibles. Si hace modificaciones a los controles child dentro de un parent layout lineal, entonces ajuste los layouts, cuando:

El control de texto TextView es un pequeño y un tanto difícil de leer. Comenzando con hacer un cambio a los mismos controles TextView. Actualizar el archivo layout resource; rainbow.xml con los siguientes cambios: Primero, añada un valor de dimensión llamado: textsize. En este caso, lo ajustamos a 22dp.

Ahora su layout debe de verse algo parecido a esto:

Observe como el layout lineal es lo suficientemente flexible para acomodar los controles TextView más grandes, sin embargo, aún no se utilizan el espacio disponible en la pantalla y aún existen las bandas negras.

CONSEJO AVANZADO: Es probable que quisiera considerar alternar los valores de las dimensiones para usarlo con diferentes tamaños de pantallas. Por ejemplo, para pantallas grandes, un tamaño de texto de 22dp luce bien, mientras que en pantallas más pequeñas un tamaño de texto de 14dp o 16dp puede más apropiado. Para más información sobre como crear recursos alternativos, vea Soporte a Múltiples Pantallas.

Desafío 4: Usar el Espacio de Pantalla de forma efectiva

¿Observó todo el espacio blanco sin usar? En este paso, enfocará su atención en usar la pantalla completa, pero de forma efectiva. Los controles TextView dentro del layout lineal tienen un tamaño adecuado, pero aún se pueden hacer más grandes para que use ese espacio en blanco sin usar.

Queremos que los controles TextView abarquen todo el espacio disponible, independientemente de cual sea la orientación del dispositivo, o cuál sea la tamaño del dispositivo.

Haga esto por medio de ajustar los atributos layout_weight para los controles child dentro del layout lineal para dar a cada control específico límites para transformarse. La efectividad del atributo layout_weight es más obvia cuando el dispositivo está en cierta orientación: para layout lineales en posición vertical, verá como el peso funciona mejor cuando el dispositivo esta en modo vertical, mientras que para layout lineales en posición horizontal, verá cómo el peso funciona mejor en el modo panorámico.

Primero, pruebe ajustar el peso que permita que cada banda TextView de color sea igual al área en la pantalla. Pista: pesos de 0.14 para 5 controles y 0.15 para 2 controles suman 1.0.

Si ha configurado el peso de sus controles correctamente, entonces su pantalla se deberá ver así:

Después, pruebe ajustar los pesos de algo que le permita a cada banda del control TextView incrementar de manera gradual el área en la pantalla tal como esa banda de color ROJO que es el área más pequeña y la banda de color VIOLETA es la más grande. PISTA: una buena distribución es: 0.08, 0.10, 0.12, 0.14, 0.16, 0.18 y 0.22.

Si ha completado este paso correctamente, entonces sus layout deberá verse así:

Solo para probar, cambie al modo panorama y revise como luce el mismo layout:

Bono: Recrear el Layout utilizado en el paso 4b por medio de programación en Java.

Si encontró el desafío anterior razonablemente sencillo, entonces consideré el siguiente bono: recrear su layour resource (con el peso progresivo en los controles TextView individuales) por medio de programación en Java, al contrario de un layout XML resource.

Necesitará comentar la llamada al método setContentView() en su método onCreate() de la clase Activity e incorporar su LinearLayout, como se discutió en Diseño de Interfaz de Usuario Android: Linear Layouts.

Estas son algunas pistas para implementar el layout rainbow por medio de programación:

Comience a construir cada uno de los controles TextView.
Configure los parámetros del layout apra cada control TextView, construya un grupo de LinearLayout.LayoutParams, para ajustaar el layout_width, layout_height y el peso de cada control.
Use el método setText() de la clase TextView para cargar y mostrar el string resource apropiado.
Use el método setTextSize() de la clase TextView para configurar el tamaño de la fuente del texto. Puede usar los métodos getResources().getDimension() para cargar la dimensión resource.
Use el método setTextColor() de la clase TextView para configurar el color de la fuente del texto. Puede usar los métodos getResources().getColor() para cargar la dimensión resource.
Use el método setBackgroundColor() de la clase TextView para configurar el color de la fuente del texto. Nuevamente, puede usar los métodos getResources().getColor() para cargar la dimensión resource.
Use el método setGravity() de la clase TextView para configurar la alineación del texto. La clase Gravity contiene definiciones para diferentes tipos de gravedad.
A continuación, construya un control LinearLayout.
Use el método setOrientation() de la clase LinearLayout para configurar la orientación del layout. La clase LinearLayout contiene definiciones para las dos orientaciones.
Use el método setGravity() de la clase LinearLayout para configurar la alineación de todos los controles child del layout. La clase Gravity contiene definiciones para diferentes tipos de gravedad.
Cuando ajusta los pesos de los child por medio de la programación, usted debe ajustar la suma del peso total usando el método setWeightSum() de la clase LinearLayout(), por ejemplo, setWeightSum(1.0f);
No olvide construir un objeto LayoutParams para ajustar los atributos altura y anchura del mismo layout lineal.
Agregue cada control TextView de su objeto LinearLayout usando el método addView().
Finalmente, use el método setContentView() para mostrar el LinearLayout que acaba de configurar.

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

En conclusión

Los diseñadores de la interfaz Android usan layouts lineales todo el tiempo para mostrar controles para modelar horizontal y verticalmente. Puede controlar donde se mostrarán los child de los controles usando el atributo gravedad del layout lineal. Puede controlar cuanto espacio es asignado usando el atributo layout_weight.

¡Mucha suerte!

Acerca de 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.