Cómo dar sentido a los muchos diseños de Android

Lineal, Relativo, Restricción, Tabla, Marco y así sucesivamente. Las aplicaciones de Android tienen un montón de diseños para elegir cuando desee diseñar su aplicación. La pregunta es, ¿cuál es el mejor?

Antes de detallar los diferentes diseños, primero repasaremos la jerarquía de objetos de vista y el proceso de dibujo de Android.

Ver y ViewGroup

Piense en ViewGroup como la clase principal de cualquier vista y también, la clase base para diseños. Representa un objeto que es el contenedor de otras vistas. Por ejemplo, LinearLayout es un ViewGroup ya que puede contener vistas y otros diseños también.

View, por otro lado, es el componente básico de los elementos de la interfaz de usuario. Las vistas pueden formar parte de un ViewGroup. Por ejemplo, TextView es una vista .

Medir -> Diseño -> Dibujar -> Repetir

Los diseños se guardan como archivos XML en Android. Pero, ¿cómo se convierten en los objetos que vemos en la pantalla? Cada archivo XML se crea una instancia (leído: inflado) y se forma un árbol de jerarquía de vistas. Esto significa que si tiene el diseño B anidado dentro del diseño A, tendrán una relación hijo-padre (el diseño A es el padre del diseño B). Una vez que se forma el árbol, hay 3 fases que sucederán: Medir, Diseñar y Dibujar. Cada una de estas fases atraviesa el árbol en un orden de búsqueda en profundidad.

Medida

En la primera fase, cada nodo padre descubre ciertas limitaciones que tienen sus hijos con respecto a su tamaño. Transfiere estas limitaciones a sus hijos, donde cada niño evaluará su propio tamaño (qué tan grande quiere ser) y tomará en consideración las limitaciones que se le han dado y las limitaciones de sus hijos.

Diseño

Aquí, cada nodo decidirá el tamaño final y la posición de cada uno de sus hijos en la pantalla.

Dibujar

A partir del nodo raíz, que se dibuja a sí mismo, luego le dice a sus hijos que se dibujen a sí mismos. De esta manera, lo que sucede es que se dibujará un padre y sus hijos se dibujarán encima de él.

Teniendo en cuenta el proceso anterior, debe intentar mantener el diseño de su aplicación lo más superficial posible para reducir el tiempo que lleva recorrer la jerarquía de vistas

Desglose de diseños

Lineal

Organiza a sus hijos en una fila con una orientación vertical u horizontal. Es decir, las vistas estarán todas en una fila o en una columna. Puede especificar la dirección utilizando el atributo android: orientación .

Una característica interesante que tiene un diseño lineal es el atributo layout_weight . Esto se usa para indicarle a Linear Layout cómo dividir el espacio entre las vistas secundarias. Es útil cuando desea que su diseño sea coherente entre dispositivos y orientaciones.

Supongamos que desea que el primer TextView, que contiene la palabra Hola, ocupe siempre 3/4 del ancho de la pantalla. Para hacer esto, podemos usar el atributo layout_weight.

Relative

As the name implies, this layout will set its inner child views in relative position. This can keep your layout hierarchy flat with no nested view groups. At the same time, however, each Relative Layout has to undergo a process of two Measure passes, which can impact performance.

One useful feature of a RelativeLayout is the ability to center a child view by using the centerInParent attribute.

Original text


Constraint

A constraint is a connection or an alignment to the element the constraint is tied to. You define various constraints for every child view relative to other views present. This gives you the ability to construct complex layouts with a flat view hierarchy (no nested ViewGroups). Similar to RelativeLayout, this layout also requires two Measure passes.

Frame

This layout is used only to hold a single child view, thus blocking any other view in the layout. The layout itself will be as big as its biggest child view (visible or not), plus some padding.

Avoid having several child views inside a FrameLayout since it will be difficult to avoid the child views from overlapping one another. You can control the positions of these child views by assigning the layout_gravity attribute to each child.

List View/Grid View

Use when you have a need to present several items on screen (like in a restaurant menu). List View is a single column list that the user can scroll through. You can think of Grid View as a List View with more than one column.

What is important to know about these layouts is that the Views are dynamic and created at runtime. To make the items populate at runtime, you need to use an AdapterView.

TableLayout

Very similar to Grid View, this layout arranges its children into rows and columns. Each layout will contain several TableRow objects, each defining a row.

Don’t be afraid to try different layouts until you find the one that works best for you. Feel free to let me know in the comments below which layout is most useful to you and why.