Android Desde Cero: Comprendiendo Vistas y Grupo de Vistas

Dejando de lado un puñado de casos extremos, cada aplicación que construyas tiene algo de interfaz de usuario. En Android, esto se logra a través del uso de objetos Vistas o View y Grupo de Vistas o ViewGroup En este artículo, aprenderás sobre algunos de los componentes View disponibles para la visualización de contenido y se le demostrará la forma en que son utilizados.

1. Vistas/Views

Los objetos View son empleados específicamente para dibujar contenido en la pantalla del dispositivo Android. Mientras que puedes instanciar una View en tu código Java, la forma más sencilla de usarlo, es a través de un archivo de diseño XML. Puedes ver un ejemplo de esto al crear una aplicación sencilla de Hola Mundo en Android Studio. El archivo layout está nombrado como activity_main.xml, y luce de esta forma.

1

<TextView

2

    android:id="@+id/hello_world"

3

    android:layout_width="wrap_content"

4

    android:layout_height="wrap_content"

5

    android:text="Hello World!" />

El ejemplo anterior, muestra un tipo de View que será visualizada en la pantalla. Los atributos layout_width y layout_height establecen que View debería sólo tomar el espacio que sea necesario en la pantalla para visualizar el texto "¡Hola Mundo!" El atributo id es la manera en que se puede hacer referencia a View en tu código Java como se muestra a continuación:

1

setContentView(R.layout.activity_main);

2

TextView textView = (TextView) findViewById(R.id.hello_world);

Si bien puedes establecer atributos para una Vista o View en XML, también puedes cambiar los atributos en tu código Java, como cambiar el texto del TextView anterior.

1

textView.setText("This is a changed View");

El código anterior actualiza el texto del TextView a "Esta es una Vista modificada". Cuando ejecutes la app aparecerá algo así.

Ahora que ya sabes cómo trabajar con objetos básicos View, vamos a revisar algunos de los diferentes tipos que tienes disponible en el Android SDK.

Visualización de Vistas

TextView

Esta es una View que empleamos en el ejemplo anterior. El trabajo principal del TextView es mostrar texto en la pantalla de una aplicación Android. Mientras que esto pueda parecer una tarea sencilla, la clase TextView contiene lógica compleja que permite visualizar el texto subrayado, hyperlinks, números de teléfono, emails, y otras funcionalidades útiles.

ImageView

Como implica su nombre, el ImageView es designado específicamente para mostrar imágenes en la pantalla. Esto se puede utilizar para la visualización de los recursos almacenados en la aplicación o para la visualización de imágenes que se descargan desde Internet.

Entrada y Controles

Algunos objetos View son utilizados para más que simplemente mostrar contenido a los usuarios. A veces necesitas recibir algún tipo de input o entrada para controlar tus aplicaciones. Afortunadamente, Android provee de varias subclases View específicamente para este propósito.

Button

La clase Button es uno de los controles más básicos disponibles en la app. Escucha los clicks del usuario y llama a un método en tu código, de forma que puedas responder apropiadamente.

Switch y CheckBox

Las clases Switch y CheckBox tienen un estado activo e inactivo entre los que pueden alternarse. Esto es útil para cambiar los ajustes en una app. Versiones compatibles con Material Design, están disponibles a través de AppCompat support library

EditText

Esta subclase View es una extensión de la clase TextView y permite a los usuarios actualizar el texto que figura a través de una entrada de teclado.

Adapter Based Views

Si bien cada uno de los ejemplos anteriores de View son elementos individuales, a veces deseas mostrar una colección de elementos. Estas clases View, requieren la utilización de un Adapter para manejar la manera en que se muestra la interfaz de usuario adecuada para cada elemento de una colección.

ListView

La clase ListView es utilizada para mostrar una colección de elementos en una View linear, de una sola columna y desplegable. Cada elemento individual puede ser seleccionado para visualizar más detalles o llevar a cabo una acción relacionada a ese elemento.

GridView

Similar a la clase ListView, la clase GridView emplea un Adapter y muestra los elementos en múltiples columnas en la pantalla.

Spinner

La última colección de la clase View sobre la que aprenderás en este tutorial, es la clase Spinner. Acepta un Adapter y enseña los elementos en un menú desplegable cuando el Spinner es presionado para que un elemento pueda ser seleccionado por el usuario.

2. Grupos de Vistas o View Groups

Un ViewGroup es un objeto invisible que se usa para contener otros objetos View y ViewGroup con el fin de organizar y controlar el layout de una pantalla. Los objetos ViewGroup son utilizados para la creación de una jerarquía de objetos View (ver abajo) de modo que pueda crear layouts más complejos. Dicho esto, cuánto más simple pueda mantenerse un layout, más simple será el desempeño.

Los objetos ViewGroup pueden ser instanciados de la misma manera que los elementos View estándar en XML o en código Java.

1

<?xml version="1.0" encoding="utf-8"?>

2

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

3

    android:layout_width="match_parent"

4

    android:layout_height="match_parent"

5

    android:orientation="vertical">

6

    <TextView

7

        android:id="@+id/hello_world"

8

        android:layout_width="wrap_content"

9

        android:layout_height="wrap_content"

10

        android:text="Hello World!" />

11

    <TextView

12

        android:id="@+id/hello_world_2"

13

        android:layout_width="wrap_content"

14

        android:layout_height="wrap_content"

15

        android:text="Hello World 2!" />

16

</LinearLayout>

Mientras todas las clases ViewGroup desempeñan una tarea similar, cada subclase ViewGroup existe para un propósito específico. Veamos algunos de ellos.

LinearLayout

LinearLayout existe para mostrar los elementos en un orden apilado, ya sea horizontal o verticalmente. Layouts lineares también pueden ser aplicados para asignar peso a los elementos View hijos, de forma tal que estén espaciados en la pantalla con una proporción determinada uno del otro.

RelativeLayout

Esta subclase ViewGroup, permite visualizar elementos en la pantalla relacionados entre sí, proporcionando más flexibilidad y libertad a la manera en que tu layout aparece, comparado con el LinearLayout

FrameLayout

Designado para mostrar sólo un View hijo por vez, el FrameLayout dibuja los elementos en una pila y provee una manera sencilla de visualizar un elemento en diferentes tipos de tamaños de pantalla.

ScrollView

Una extensión de FrameLayout, la clase ScrollView, maneja el despliegue de los objetos hijos en la pantalla.

ViewPager

Utilizado para administrar vistas múltiples mientras que sólo visualiza una a la vez, la clase ViewPager acepta un Adapter y permite a los usuarios deslizarse de izquierda a derecha para ver todos los elementos View disponibles.

RecyclerView

La clase RecyclerView es una subclase de ViewGroup que está relacionada a las clases ListView y GridView y que ha sido puesto a disposición por Google a través de RecyclerView support library para las versiones anteriores de Android. La clase RecyclerView requiere el uso de view holder design pattern para un eficiente reciclado del elemento y soporta el uso de un LayoutManager , un decorador, y un animador de elementos a fin de convertir a este componente en algo increíblemente flexible a costa de la simplicidad.

CoordinatorLayout

Recientemente agregada a la biblioteca de soporte de diseño, la clase CoordinatorLayout utiliza un objeto Behavior o de Comportamiento para determinar cómo los elementos View hijos deberían ser dispuestos y movidos mientras el usuario interactúa con tu app.

3. Vistas Personalizadas/Custom Views

Mientras que existe una amplia variedad de clases View y ViewGroup para que apliques a tus apps, a veces deseas crear algo nuevo que se adapte a tus necesidades. En este caso, puedes crear una nueva clase Java que extienda ya sea View o ViewGroup, dependiendo de lo que necesitas. El acto de crear una nueva subclase View personalizada, está más allá del alcance de este artículo, pero puedes encontrar más información aquí: Envato Tuts+ tutorial.

Conclusión

En este tutorial, has aprendido sobre algunos de los componentes más básicos de Android, layouts y vistas. Teniendo en cuenta cuán fundamentales son estos componentes para Android, continuamente aprenderás cosas nuevas sobre ellos al trabajar con la plataforma Android y encontrarás nuevas maneras de hacer cosas increíbles aplicándolas en tus proyectos.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!