Android desde cero: comprensión de las vistas y los grupos de vistas

¿Te resulta más fácil aprender con vídeo? ¿Por qué no echas un vistazo a nuestro curso?

1. Puntos de vista

View los objetos se utilizan específicamente para dibujar contenido en la pantalla de un dispositivo Android. Si bien puede instanciar un View en su código Java, la forma más fácil de usarlos es a través de un archivo de diseño XML. Un ejemplo de esto se puede ver cuando crea una aplicación simple «Hello World» en Android Studio. El archivo de diseño es el que se llama actividad_principal.xmlluciendo algo como esto.

El ejemplo anterior muestra un tipo de View que se mostrará en la pantalla. los layout_width y layout_height atributos indican que View solo debe ocupar tanto espacio en la pantalla como sea necesario para mostrar el texto «¡Hola mundo!». los id atributo es cómo eso View se puede hacer referencia en su código Java de esta manera:

Si bien puede establecer atributos para un View en XML, también puede cambiar atributos en su código Java, como cambiar el texto de lo anterior TextView.

El código anterior actualiza el texto del TextView a «Esta es una vista modificada». Así es como se ve cuando ejecutas la aplicación.

Ahora que ya sabe cómo trabajar con las funciones básicas View objetos, repasemos algunos de los diferentes tipos que están disponibles en el SDK de Android.

Vistas de visualización

TextView

Este es el View usamos en el ejemplo anterior. El trabajo principal del TextView es mostrar texto en la pantalla de una aplicación de Android. Si bien esto puede parecer una tarea sencilla, el TextView La clase contiene una lógica compleja que le permite mostrar texto marcado, hipervínculos, números de teléfono, correos electrónicos y otras funciones útiles.

Estos son algunos atributos importantes que puede establecer para un TextView en XML:

  • Android: diseño_ancho — Esto establecerá el ancho de la TextView elemento. Puede ser una dinámica constante como match_parent o wrap_content o puede ser un valor fijo como 20dp o 40sp, etc.
  • android:layout_height — Esto establecerá la altura de la TextView elemento. También puede ser un valor dinámico constante o algo fijo como 15dp o 20.5sp, etc.
  • androide:texto — Puede usar este atributo para configurar el texto como quiera que se muestre en la pantalla.
  • Android: color de texto — Utilice este atributo para especificar un valor de color como referencia a otra imagen o como valor de color hexadecimal.
  • Android: gravedad — Controla la alineación del texto cuando ocupa menos espacio que el TextView. Puede configurarlo como arriba, abajo, izquierda, derecha, centro, etc.

los TextView class le da acceso a muchos métodos para obtener y establecer los valores de diferentes propiedades. Ya hemos visto cómo usar setText() para especificar un valor de texto para la vista. De manera similar, puede especificar valores para otros atributos como el textColor y gravity utilizando los métodos setTextColor() y setGravity().

TextClock es otra clase útil que se extiende TextView para mostrar la fecha y/o la hora actual a los usuarios como una cadena formateada. También puede usar los siguientes atributos con esta clase para mostrar la hora en un formato específico o desde una zona horaria específica.

  • Android: formato 12 horas — Este atributo es útil para especificar el formato para mostrar la fecha/hora en el modo de 12 horas.
  • androidformat24Hour — Este atributo es útil para especificar el formato para mostrar la fecha/hora en el modo de 24 horas.
  • Android: zona horaria — Este atributo es útil para especificar la zona horaria que se utilizará.

ImageView

los ImageView la clase extiende la View clase. Como su nombre lo indica, el ImageView está diseñado específicamente para mostrar imágenes en la pantalla. Esto se puede usar para mostrar recursos almacenados en la aplicación o para mostrar imágenes que se descargan de Internet.

Entrada y controles

Alguno View los objetos se utilizan para algo más que mostrar contenido a los usuarios. A veces necesita recibir algún tipo de entrada para controlar sus aplicaciones. Afortunadamente, Android proporciona varios View subclases específicamente para este propósito.

Button

los Button clase se extiende desde el TextView clase. Es uno de los controles más básicos disponibles en una aplicación. Escucha los clics del usuario y llama a un método en su código para que pueda responder adecuadamente. Dado que Button extiende el TextView clase podemos usar los métodos y atributos de TextView para controlar la apariencia y el comportamiento de Button. Aquí hay un ejemplo:

El botón de arriba ejecutará el takeAction() método en cada clic. Tenga en cuenta que deberá implementar un método con este nombre dentro de la clase de actividad del diseño.

Switch y CheckBox

los Switch y CheckBox las clases tienen un estado activo e inactivo que se puede alternar. Esto es útil para cambiar la configuración en una aplicación.

EditText

Este View La subclase es una extensión de la TextView class y permite a los usuarios actualizar el texto contenido a través de la entrada del teclado. los EditText clase hereda una gran cantidad de atributos de la TextView clase para que puedas usar android:layout_width, android:layout_height, android:gravity etc. para controlar la posición y la alineación de la vista, así como su contenido. También puede controlar el ancho de la entrada con android:ems atributo.

los EditText La clase se utiliza para crear un elemento de interfaz de usuario para que las personas ingresen y modifiquen texto. Esta entrada de texto puede ser de diferentes tipos como el date, number, numberPassword, textPassword, text, textPersonName etc. Todos estos son valores válidos para el android:inputType atributo. El valor que especifique para el atributo determinará el tipo de teclado que se muestra a los usuarios.

La siguiente imagen muestra cómo se adapta el teclado para configurar el inputType a numberPassword o text.

Diferentes tipos de teclado en EditText

Vistas basadas en adaptador

los AdapterView La clase es una extensión de la ViewGroup clase. Mientras que cada uno de los anteriores View los ejemplos son elementos individuales, a veces desea mostrar una colección de elementos. Estas View las clases requieren el uso de un Adapter para manejar la visualización de la interfaz de usuario adecuada por elemento en una colección. El adaptador hace un par de cosas importantes, como brindar acceso a los elementos de datos que desea mostrar y crear un View para cada elemento del conjunto de datos.

Algunas clases comunes que son subclases directas o indirectas de AdapterView están enlistados debajo.

ListView

los ListView La clase se utiliza para mostrar una colección de elementos en un formato lineal, de una sola columna y desplazable. View. Cada elemento individual se puede seleccionar para mostrar más detalles o realizar una acción relacionada con ese elemento. Tenga en cuenta que un ListView no contiene ninguna información sobre el tipo y el contenido de las vistas que contiene.

los ListView La clase ha existido desde hace un tiempo. Ahora hay un suplente RecyclerView clase que debería considerar usar en lugar de ListView. RecyclerView es más flexible y proporciona un mejor rendimiento en comparación.

GridView

Similar a ListView clase, la GridView la clase toma un Adapter y muestra elementos en múltiples columnas en la pantalla. los GridView La clase básicamente proporciona una cuadrícula de desplazamiento bidimensional.

los GridView es adecuado para crear diseños en los que desea crear un contenedor desplazable con elementos que se muestran en forma de cuadrícula. Sin embargo, GridView ahora está obsoleto al igual que ListView. Deberías considerar usar RecyclerView en su lugar.

Spinner

la coleccion final View La clase para que usted aprenda en este tutorial es la Spinner clase. Acepta un Adapter y muestra elementos en un menú desplegable cuando el Spinner se hace clic para que el usuario pueda seleccionar un elemento.

2. Ver grupos

A ViewGroup es un objeto invisible usado para contener otros View y ViewGroup objetos para organizar y controlar el diseño de una pantalla. ViewGroup Los objetos se utilizan para crear una jerarquía de View objetos (ver más abajo) para que pueda crear diseños más complejos. Dicho esto, cuanto más simple pueda mantener un diseño, más eficaz será.

ViewGroup los objetos se pueden instanciar de la misma manera que el estándar View elementos en XML o en código Java.

mientras todos ViewGroup clases realizan una tarea similar, cada ViewGroup subclase existe para un propósito específico. Echemos un vistazo a algunos de ellos.

LinearLayout

los LinearLayout existe para mostrar elementos en un orden apilado, ya sea horizontal o verticalmente. Los diseños lineales también se pueden usar para asignar pesos al niño View elementos para que los elementos estén espaciados en la pantalla en una proporción entre sí.

RelativeLayout

Este ViewGroup La subclase le permite mostrar elementos en la pantalla relacionados entre sí, proporcionando más flexibilidad y libertad sobre cómo aparece su diseño en comparación con el LinearLayout.

FrameLayout

Diseñado para mostrar un solo niño. View a la vez, el FrameLayout dibuja elementos en una pila y proporciona una forma sencilla de mostrar un elemento en varios tamaños de pantalla.

ScrollView

es una extensión de la FrameLayout clase. los ScrollView class maneja el desplazamiento de su objeto secundario en la pantalla. También puede agregar múltiples vistas dentro de la vista de desplazamiento. Solo asegúrese de que el elemento secundario directo sea un grupo de vista y que otras vistas se coloquen dentro de ese elemento secundario.

ViewPager

Se utiliza para administrar múltiples vistas y mostrar solo una a la vez, la ViewPager la clase acepta un Adapter y permite a los usuarios deslizar hacia la izquierda y hacia la derecha para ver todos los disponibles View elementos.

RecyclerView

los RecyclerView la clase es un ViewGroup subclase que es una mejora sobre la ahora obsoleta ListView y GridView clases y que ha sido puesto a disposición por Google a través de la Biblioteca de soporte de AndroidX para versiones anteriores de Android.

los RecyclerView clase requiere el uso de la patrón de diseño del titular de la vista para el reciclaje eficiente de artículos y apoya el uso de un LayoutManagerun decorador y un animador de elementos para hacer que este componente sea increíblemente flexible a costa de la simplicidad.

En términos simples, el RecyclerView class proporciona una solución moderna y de mayor rendimiento para sus necesidades de diseño. Se puede utilizar con un adecuado LayoutManager para crear listas unidimensionales y diseños de cuadrícula bidimensionales.

los LayoutManager es responsable de un montón de cosas, como el posicionamiento de las vistas de elementos y determinar cuándo debe reciclar las vistas de elementos que ya no están a la vista del usuario.

CoordinatorLayout

los CoordinatorLayout la clase usa un Behavior objeto para determinar cómo niño View los elementos deben colocarse y moverse a medida que el usuario interactúa con su aplicación. Básicamente, le permitirá coordinar diferentes vistas para que las animaciones y las transiciones entre ellas sean perfectas y fáciles de implementar.

3. Vistas personalizadas

Si bien existe una gran variedad de View y ViewGroup clases para que las use dentro de sus aplicaciones, a veces desea crear algo nuevo que se ajuste a sus necesidades. En este caso, puede crear una nueva clase Java que amplíe View o ViewGroup, dependiendo de lo que necesites. El acto de crear una nueva costumbre. View subclase está más allá del alcance de este artículo, pero puede encontrar más información en este tutorial de Envato Tuts+ sobre cómo crear vistas personalizadas.

Conclusión

En este tutorial, ha aprendido acerca de uno de los componentes más básicos de Android, los diseños y las vistas. Dado lo fundamentales que son estos componentes para Android, aprenderá continuamente cosas nuevas sobre ellos a medida que continúe trabajando con la plataforma Android y encontrará nuevas formas de hacer cosas increíbles usándolos en sus proyectos.

Esta publicación ha sido actualizada con contribuciones de Nitish Kumar. Nitish es un desarrollador web con experiencia en la creación de sitios web de comercio electrónico en varias plataformas. Pasa su tiempo libre trabajando en proyectos personales que le facilitan la vida diaria o dando largos paseos nocturnos con amigos.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.