lunes, 12 de mayo de 2014

Acerca de las Interfaces de usuario (Views, ViewGroup y Layout)

Las interfaces gráficas para las aplicaciones en Android, se construyen en base a jerarquías de View y ViewGroup

View (vista): Esta clase representa el bloque de construcción básico para los componentes de la interfaz de usuario. Una vista ocupa un área rectangular en la pantalla, y es responsable por el dibujo y manejo de eventos. Vista es la clase base para los widgets, que se utilizan para crear los componentes de interfaz de usuario interactivos (botones, campos de texto, etc.) La subclase ViewGroup es la clase base para los diseños, que son contenedores invisibles que tienen otras vistas (u otros ViewGroups) y definen sus propiedades de diseño.

Un viewgroup es un objeto de la clase android.view.Viewgroup, como su propio nombre indica, un viewgroup es un objeto especial de view cuya función es contener y controlar la lista de views y de otros viewgroups. Los viewgroups te permiten añadir estructuras a la interfaz y acumular complejos elementos en la pantalla que son diseccionados por una sola entidad.

La clase viewgroup es útil como base de la clase layouts, que son subclases implementadas que proveen los tipos más comunes de los layouts de pantalla. Los layouts proporcionan una manera de construir una estructura para una lista de views.

 En la plataforma Android tú defines una Activity del UI usando un árbol de nodos view y viewgroups, como vemos en la imágen de abajo. El árbol puede ser tan simple o complejo como necesites hacerlo, y se puede desarrollar usando los widgets y layouts que Android proporciona o creando tus propios views.


 Los views y viewgroups deben estar contenidos en los layouts, los cuales contienen otros elementos presentes en una vista. Dentro de cada layout podemos poner todos los elementos necesarios, incluidos otros layouts. Así conseguiremos estructurar la pantalla de la manera deseada. Existen una gran variedad de layouts, en función de su posicionamiento en la pantalla y se describen a continuación algunos de ellos:

LinearLayout: Se les conoce como contenedores y sirven para reorganizar los elementos de nuestra aplicación. Sus hijos son los views, viewgroup u otros layouts. Nos permitirán alinear sus hijos en una única dirección, ya sea horizontal o vertical como se muestra en las siguientes imagenes. La orientación predeterminada es horizontal.

Horizontal

Vertical

RelativeLayout: En este caso todos los elementos van colocados en una posición relativa a otro. Aquí podemos jugar con las distancias entre elementos en la pantalla, la cual se expresa en pixeles. A continuación se muestra un ejemplo:



 Absolute layout: Coloca los elementos en posiciones absolutas en la pantalla, teniendo en cuenta que la posición (0,0) es el extremo superior izquierdo de la pantalla. A continuación se puede ver un ejemplo para entender mejor la explicación anterior.El absolute layout especifica la ubicación exacta de sus hijos.


TableLayout: permite colocar los elementos en forma de tabla. Se utiliza el elemento <TableRow> para designar a una fila de la tabla. Cada fila puede tener uno o más puntos de vista. Cada vista se coloca dentro de una fila en forma de celda. 


FrameLayout: Es un marcador de posición que puede usarse para mostrar una única vista. Se pueden agregar multiples puntos de vista a un FrameLayout pero cada uno se acumulará en la parte superior izquierda de la anterior. A continuación mostramos un ejemplo ilustrativo: 


ScrollView: Es un tipo especial de FrameLayout ya que permite a los usuarios desplazarse por una serie de puntos de vista que ocupan más espacio que el despliegue físico. El scrollView solo puede contener un viewGroup y suele ser LinearLayout.