Desarrollando aplicaciones - Objetos comunes de esquema

Documento original: Common Layout Objects

Objetos comunes de esquema

[Título original: Common Layout Objects]

Los siguientes son los grupos de vistas más comunes que tú vas a usar en tus aplicaciones. Esta sección te entregará la información básica sobre cada uno de ellos. Para estudiar en más profundidad cada uno de ellos, puedes seleccionar el link que cada elemento provee.

FrameLayout

[Título original: FrameLayout]

Un FrameLayout es el objeto de esquema más sencillo. Está expresamente diseñado como un espacio en blanco reservado en la pantalla que posteriormente podrás llenar con un único objeto, por ejemplo una fotografía cuya imagen será intercambiada. Todos los elementos hijos son posicionados en la parte superior izquierda de la pantalla. No es posible establecer una posición determinada para un elemento hijo de FrameLayout. Elementos hijos que posteriormente se agreguen serán simplemente dibujados sobre elementos que previamente hayan sido dibujados, lo que bloqueará su visión total o parcialmente (a menos que los nuevos elementos sean transparentes).

LinearLayout

[Título original: LinearLayout]

Un LinearLayout alinea todos sus elementos hijos en una única dirección: vertical u horizontal, de acuerdo a qué propiedad tú definiste para LinearLayout. Todos los hijos son ubicados uno al lado del otro, por lo tanto una lista vertical sólo tendrá un hijo por fila sin importar cuan ancha sea la fila. De manera similar, un lista horizontal sólo tendrá un fila de alto (la altura del hijo más alto más el espacio de relleno definido, ie, "padding"). El LinearLayout respeta los márgenes entre hijos y también su gravedad (alineamiento del hijo hacia la derecha, centro o izquierda).

El LinearLayout también soporta la asignación de peso a hijos de manera individual. Este peso, permite a los hijos expandirse para llenar cualquier espacio restante de la pantalla. Esto previene que una lista de pequeños objetos sea confinada hacia uno de los extremos de una pantalla grande y por el contrario se expanda para llenar todo el espacio disponible. El peso que los hios tienen especificado es utilizado para distribuir cualquier espacio restante en la misma proporción de su peso declarado. El valor por omisión del peso de un hijo es cero. Por lo ejemplo, si hay tres casillas de texto, y dos de ellas declaran un un peso de 1, dos de ellas se expandirán de con la misma proporción para llenar el espacio restante, y la tercera no crecerá ninguna cantidad adicional.

Las imágenes de los formularios mostrados a continuación representan un LinearLayout con un conjunto de elementos: un botón, algunas etiquetas de texto y algunas casillas de texto. Ambos tienen definido valores para relleno de contorno, para así mantener un contorno que proporciona un agradable distribución. Las casillas de texto tienen sus anchos fijados al valor "FILL_PARENT", otros elementos lo tienen fijado a "WRAP_CONTENT". Por omisión, el valor de la gravedad es fijado a izquierda ("left"). El formulario de la izquierda no tiene valores de peso fijados, por lo tanto todos sus hijos tienen el valor cero (valor por omisión). El formulario de la derecha tiene fijado el valor del peso de la casilla de texto de comentarios a "1". Si el peso de la casilla de texto para el nombre hubiese sido fijado a "1", las casillas de texto para el nombre y los comentarios hubiesen tenido la misma altura.

CONSEJO: Para crear un esquema de tamaño proporcionado en la pantalla, crea un objeto contenedor que sea "fill_parent", luego asigna la altura y ancho de los hijos a cero y finalmente asigna los valores de peso relativos a cada hijo dependiendo de la proporción que cada uno de ellos debe ocupar en la pantalla

Figura:http://code.google.com/android/images/linearlayout.png

Dentro de un LinearLayout, los items son alineados por la posición de sus líneas base del texto (la primera línea del primer elemento,i.e., la más alta o más a la izquierda es la línea considerada como referencia). Esto es así para evitar que las personas al llenar un formulario tengan que buscar un elemento en elementos vecinos. Esta característica puede ser desactivada agregando android:baselineAligned="false" en tu esquema XML.

TableLayout

[Título original: TableLayout]

Un "TableLayout" posiciona sus hijos dentro de filas y columnas. Un "TableLayout" está compuesto por un número de objetos "TableRow", cada uno de ellos definiendo una fila (más adelante explicaremos que también es posible tener otros elementos hijos). Los contenedores "TableLayout" no despliegan contornos para sus filas, columnas y celdas. Cada fila tiene cero o mas celdas, y cada celda puede contener un objeto ""View"". Una tabla puede tener tantas columnas como lo tenga la fila con más celdas. Una tabla puede tener celdas vacías. Las celdas no pueden extenderse a otras columnas, como lo hace HTML. La siguiente imagen muestra un esquema de tabla en la cual los border invisibles son mostrados con líneas punteadas.

Figura:http://code.google.com/android/images/table_layout.png

Las columnas pueden estar ocultas, ser marcadas para estirarse y ocupar todo el espacio disponible, o marcadas para comprimirse hasta que la tabla se ajuste al tamaño de la pantalla. Encontrarás más información en el siguiente link: TableLayout

AbsoluteLayout

[Título original: AbsoluteLayout]

El "AbsoluteLayout" permite que los elementos hijos especifiquen con precisión las coordenadas "x" e "y" en la cual deben ser desplegados. La posición (0,0) corresponde a la esquina superior izquierda, y sus valores se incrementan en la medida que tu avanzan hacia abajo y a la derecha. Márgenes no son soportados y el solapamiento de elementos está permitido (pero no es recomendado). La recomendación general es no usar "AbsoluteLayout" a menos que tengas una muy buena razón para usarlo, porque este esquema es muy rígido y no funciona bien en todos los dispositivos.

RelativeLayout

[Título original: ]

El esquema "RelativeLayout" permite que sus elementos hijos espeficiquen su posición relativa entre ellos(indicando un ID) o con su padre. De esta forma, puedes alinear dos elementos por su contorno derecho, o poner uno debajo de otros, o centrarlo en la pantalla. Los elementos son dibujados en un order dado, de tal forma que si el primer elemento está centrado en la pantalla los otros elementos se alinearán considerando su posición relativa al centro de la pantalla. Si estás usando XML para describir el esquema de pantalla (como se describirá más adelante), un elemento referenciado debe ser declarado antes de hacer referencia a él.

Aquí hay un ejemplo de un esquema relativo destacando los elementos invisibles y visibles. El objeto raíz del esquema de la pantalla es un "RelativeLayout".

Figura:http://code.google.com/android/images/designing_ui_relative_layout.png

Este diagrama muestra los nombres de las clases de los elementos en la pantalla, seguido por una lista de las propiedades de cada uno de ellos. Algunas de estas propiedades son soportadas directamente por los elementos y otras son soportadas por su miembro "LayoutParams" (una subclase de "RelativeLayout" en todos los elementos de esta pantalla, debido a que todos los elementos son hijos del objeto padre "RelativeLayout"). Los parámetros de "RelativeLayout" son: "width", "height", "below", "alignTop", "toLeft", "padding" y "marginLeft". Se debe observar que algunos de estos parámetros soportan valores relativos a otros hijos, de ahí viene el nombre "RelativeLayout". Esto incluye las propiedades "toLeft", "alignTop" y "below", las cuales referencian al objeto de la izquierda, de arriva y de abajo; respectivamente.

Resumen de los grupos de vistas más importantes

[Título original: Summary of Important View Groups]

Todos estos objetos contienen elementos UI. Algunos proveen elementos UI visibles y otros sólo controlan el esquema de sus elementos hijos.

AbsoluteLayout : Permite que espeficiques la ubicación de los objetos hijos relativa al padre usando medidas exactas (por ejemplo, pixeles).

FrameLayout : Este esquema actúa como un marco que despliega sólo un objeto.

Gallery : Es un esquema para desplegar imágenes (tomadas de una lista) y tiene la capacidad para desplazar su contenido de manera horizontal.

GridView : Es un esquema cuadriculado de "n" filas por "m" columnas. Además, tiene capacidades para desplazar el contenido.

LinearLayout : Es un esquema que organiza sus elementos hijos dentro de una sólo fila, la cual puede ser horizontal o vertical.Crea una barra de desplazamiento si el tamaño de la cuadrícula excede el tamaño de la pantalla.

ListView : Es un esquema que despliega una lista dentro de una sola columna y tiene capacidad de desplazamiento del contenido.

PopupList : Es un esquema que despliega el contenido de una lista con bordes, de manera independiente y emergente

RelativeLayout : Este esquema permite que espeficiquemos la ubicación de sus elementos hijos relativa entre ellos (ejemplo: un elemento "A" al lado del elemento "B") o con el padre (por ejemplo: alineación con el borde superior del padre).

ScrollView : Es un esquema que despliega elementos en un columna vertical con capacidad de desplazamiento de contenido.

Spinner : Este esquema despliega un sólo elemento a la vez (tomado de una lista asociada) dentro de una casilla de texto de una fila. Este esquema es diferente de un esquema con una fila con capacidad para desplegar el contenido horizontalmente o verticalmente.

SurfaceView : Este esquema provee acceso directo a una superficie dedicada al dibujado. Puede contener elementos de vistas superpuestos sobre la superficie, pero está diseñado para aplicaciones que necesitan dibujar pixeles en vez de usar "widgets".

TabHost : Este esquema provee una lengüeta de selección que monitorea clics y permite que la aplicación cambie de pantalla en el momento en que la lengüeta es cliqueada.

TableLayout : Es un esquema tabular con un número arbitario de filas y columnas, cada una de las celdas contiene un "widget" de tu elección. Las filas ajustan su tamaño para ajustar la columna más grande. El contorno de las celdas no son visibles.

ViewFlipper : Es un esquema de despliega un elemento a la vez dentro de una casilla de texto de una fila. Puede ser configurado para intercambiar elementos a cierto intervalo de tiempo, como si fuera una presentación de diapositivas.

ViewSwitcher : Similar a ViewFlipper