Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android

Crear vistas compuestas en Android

by
Difficulty:IntermediateLength:LongLanguages:

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

Al crear aplicaciones complejas, a menudo desearás reutilizar el mismo grupo de vistas en varios lugares de la aplicación. Una forma de resolver este problema es creando una vista que encapsule la lógica y el diseño de un grupo de vistas para que puedas volver a utilizarlas sin duplicar el código en varios lugares del proyecto. En este tutorial, aprenderás cómo usar vistas compuestas para crear vistas personalizadas que sean fácilmente reutilizables.

1. Introducción

En Android, una vista compuesta por un grupo de vistas se denomina vista compuesta o componente compuesto. En este tutorial, crearás un control para seleccionar un valor de una lista que se desplaza de un lado a otro. Denominaremos al compuesto como una rueda lateral ya que la vista predeterminada del SDK de Android para elegir un valor de una lista se llama spinner. La siguiente captura de pantalla muestra lo que crearemos en este tutorial.

2. Configuración del proyecto

Para comenzar, debes crear un nuevo proyecto de Android con Android 4.0 como el nivel de SDK mínimo requerido. Este proyecto solo debe contener una actividad en blanco llamada MainActivity. La Activity no hace más que inicializar el diseño como puedes ver en el siguiente fragmento de código.

El diseño de MainActivity se encuentra en el archivo /res/layout/activity_main.xml y solo debe contener un RelativeLayout vacío en el que la vista compuesta se mostrará más adelante.

3. Crear una vista compuesta

Para crear una vista compuesta, debes crear una nueva clase que administre las vistas en la vista compuesta. Para la rueda lateral, necesitas dos Button vistas para las flechas y una vista TextView para mostrar el valor seleccionado.

Para comenzar, crea el archivo /res/layout/sidespinner_view.xml de diseño que usaremos para la clase secundaria, asegurándote de ajustar las tres vistas en una etiqueta <merge>.

A continuación, necesitamos crear la clase SideSpinner que infla este diseño y establece las flechas como imágenes de fondo para los botones. En este punto, la vista compuesta no hace nada ya que no hay nada que mostrar todavía.

Notarás que la vista compuesta extiende el grupo de vistas LinearLayout. Esto significa que cualquier diseño que use la vista compuesta tiene acceso a los atributos del diseño lineal. Como resultado, el diseño de la vista compuesta es un poco diferente de lo habitual, la etiqueta raíz es una etiqueta <merge> en lugar de la etiqueta para un grupo de vista como <LinearLayout> o <RelativeLayout>.

Cuando agregas la vista compuesta al diseño de MainActivity, la etiqueta de la vista compuesta actuará como una etiqueta <LinearLayout>. Una clase de vista compuesta puede derivar de cualquier clase derivada de ViewGroup, pero en este caso el diseño lineal es el más apropiado ya que las vistas se disponen horizontalmente.

4. Agrega la vista compuesta a un diseño

En este punto, el proyecto se compila pero no se ve nada, ya que la vista compuesta no está en el diseño de MainActivity. La vista del panel lateral debe agregarse al diseño de la actividad como cualquier otra vista. El nombre de la etiqueta es el nombre completo de la clase SideSpinner, incluido el espacio de nombres.

Para agregar la rueda lateral a MainActivity, agrega lo siguiente a la disposición relativa en el archivo /res/layout/activity_main.xml.

Los atributos disponibles en la etiqueta <SideSpinner> son atributos del diseño lineal, ya que la clase SideSpinner que creamos amplía la clase LinearLayout. Si inicias el proyecto, la rueda lateral debería estar visible, pero todavía no contiene ningún valor.

5. Agrega métodos a la vista compuesta

Todavía faltan algunas cosas si realmente queremos usar el spinner lateral. Deberíamos poder agregar nuevos valores a la rueda, seleccionar un valor y obtener el valor seleccionado.

La forma más fácil de agregar nuevos comportamientos a una vista compuesta es agregar nuevos métodos públicos a la clase SideSpinner. Estos métodos pueden ser utilizados por cualquier Activity que tenga una referencia a la vista.

El método onFinishInflate de la vista compuesta se invoca cuando todas las vistas en el diseño están infladas y listas para usar. Este es el lugar para agregar tu código si necesitas modificar las vistas en la vista compuesta.

Con los métodos que acabas de agregar a la clase SideSpinner, ahora se puede agregar el comportamiento de los botones que seleccionan el valor anterior y siguiente. Reemplaza el código existente en el método onFinishInflate con lo siguiente:

Con los nuevos métodos creados setValues y setSelectedIndex, ahora podemos inicializar el spinner lateral desde nuestro código. Al igual que con cualquier otra vista, debes encontrar la vista del panel lateral en el diseño con el método findViewById. A continuación, podemos llamar a cualquier método público en la vista desde el objeto devuelto, incluidos los que acabamos de crear.

El siguiente fragmento de código muestra cómo actualizar el método onCreate de la clase MainActivity para mostrar una lista de valores en el spinner lateral, utilizando el método setValues. También podemos seleccionar el segundo valor en la lista por defecto invocando el método setSelectedIndex.

Si inicias la aplicación, la rueda lateral debería funcionar como se esperaba. La lista de valores se muestra y el valor Orange se selecciona de manera predeterminada.

6. Agrega atributos de diseño a la vista compuesta

Las vistas disponibles en Android SDK se pueden modificar mediante código, pero algunos atributos también se pueden configurar directamente en el diseño correspondiente. Agreguemos un atributo a la rueda giratoria lateral que establece los valores que el spinner lateral necesita para mostrar.

Para crear un atributo personalizado para la vista compuesta, primero debemos definir el atributo en el archivo /res/values/attr.xml. Cada atributo de la vista compuesta debe agruparse en un estilo con una etiqueta <declare-styleable>. Para el spinner lateral, el nombre de la clase se usa como se muestra a continuación.

En la etiqueta <attr>, el atributo name contiene el identificador utilizado para referirse al nuevo atributo en el diseño y el atributo format contiene el tipo del nuevo atributo.

Para la lista de valores, se utiliza el tipo reference ya que el atributo se referirá a una lista de cadenas definidas como un recurso. Los tipos de valores que normalmente se usan en los diseños se pueden usar para sus atributos personalizados, incluidos boolean, color, dimension, enum, integer, float y string.

Aquí se explica cómo definir el recurso para una lista de cadenas a las que se referirá el atributo values del spinner lateral. Se debe agregar al archivo /res/values/strings.xml como se muestra a continuación.

Para probar el nuevo atributo values, crea una vista para el spinner lateral en el diseño MainActivity debajo del spinner lateral existente. El atributo debe ir precedido de un espacio de nombre agregado a RelativeLayout, como xmlns:sidespinner="http://schemas.android.com/apk/res-auto". Esto es lo que debería ser el diseño final en /res/layout/activity_main.xml.

Finalmente, la clase SideSpinner necesita ser modificada para leer el atributo de valores. El valor de cada atributo de la vista está disponible en el objeto AttributeSet que se pasa como un parámetro del constructor de la vista.

Para obtener el valor de tus atributos values personalizados, primero llamamos al método getStyledAttributes del objeto AttributeSet con el nombre del estilo que contiene el atributo. Esto devuelve la lista de atributos para ese estilo como un objeto TypedArray.

Luego llamamos al método getter del objeto TypedArray que tiene el tipo correcto para el atributo que deseas, pasando el identificador del atributo como parámetro. El siguiente bloque de código muestra cómo modificar el constructor de la rueda lateral para obtener la lista de valores y configurarlos en la rueda lateral.

Si inicias la aplicación, deberías ver dos marcadores laterales que funcionan independientemente el uno del otro.

7. Guardar y restaurar el estado

El último paso que debemos completar es guardar y restaurar el estado de la vista compuesta. Cuando se destruye y recrea una actividad, por ejemplo, cuando se gira el dispositivo, los valores de las vistas nativas con un identificador único se guardan y restauran automáticamente. Esto actualmente no es cierto para el spinner lateral.

El estado de las vistas no se guarda. Los identificadores de las vistas en la clase SideSpinner no son únicos, ya que se pueden reutilizar muchas veces. Esto significa que somos responsables de guardar y restaurar los valores de las vistas en la vista compuesta. Hacemos esto implementando los métodos onSaveInstanceState, onRestoreInstanceState y dispatchSaveInstanceState. El siguiente bloque de código muestra cómo hacer esto para el spinner lateral.

Conclusión

El spinner lateral ahora está completo. Ambos spinners laterales funcionan como se espera y sus valores se restauran si la actividad se destruye y se recrea. Ahora puedes aplicar lo que has aprendido para reutilizar cualquier grupo de vistas en una aplicación de Android mediante el uso de vistas compuestas.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.