La interfaz de usuario se define en los archivos XML del directorio
res/layout. Cada pantalla tendrá un código XML diferente.
Diseñar una pantalla usando Java puede resultar complejo y poco eficiente, sin
embargo, Android soporta XML para diseñar pantallas y define elementos
personalizados, cada uno representando a un "subclase" especifica de
view. Se pueden crear pantallas de la misma manera que se diseñan ficheros
HTML.
Cada
fichero describe un layout(una pantalla) y cada layout a su vez puede contener
otros elementos. Para gestionar la interfaz de usuario, Android introduce las
siguientes terminologías:
- View: Una
view es un objeto cuya clase es android.view.View. Es una estructura de
datos cuyas propiedades contienen los datos de la capa, la información
específica del área rectangular de la pantalla y permite establecer el
layout. Una view tiene: layout, drawing, focus change, scrolling, etc..
La clase view
es útil como clase base para los widgets, que son unas subclases ya
implementadas que dibujan los elementos en la pantalla. Los widgets contienen
sus propias medidas, pero puedes usarlas para construir tu interfaz más
rápidamente. La lista de widgets que puedes utilizar incluyen Text, EditText, InputMethod, MovementMethod, Button,
RadioButton, CheckBox, y ScrollView.
* Viewgroups: 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 function 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.
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.
* Árbol
estructurado de la interfaz UI: En la plataforma Android tú defines una Activity
del UI usando un árbol de nodos view y viewgroups, como vemos en la imagen 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:
FrameLayout
Éste es el más simple de todos los
layouts de Android. Un FrameLayout coloca todos sus controles hijos
alineados con su esquina superior izquierda, de forma que cada control quedará
oculto por el control siguiente (a menos que éste último tenga transparencia).
Por ello, suele utilizarse para mostrar un único control en su interior, a modo
de contenedor (placeholder) sencillo para un sólo elemento sustituible,
por ejemplo una imagen.
Los
componentes incluidos en un FrameLayout podrán establecer sus
propiedades android:layout_width y android:layout_height, que
podrán tomar los valores “match_parent” (para que el control hijo tome la
dimensión de su layout contenedor) o “wrap_content” (para que el control hijo
tome la dimensión de su contenido).
Ejemplo:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText android:id="@+id/TxtNombre"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="text" />
</FrameLayout>
|
Con
el código anterior conseguimos un layout tan sencillo como el siguiente:
LinearLayout
El siguiente tipo de layout en cuanto a
nivel de complejidad es el LinearLayout. Este layout apila uno tras otro
todos sus elementos hijos en sentido horizontal o vertical según se
establezca su propiedad android:orientation.
Al igual que un FrameLayout,los
elementos contenidos en un LinearLayout pueden establecer sus propiedades
android:layout_width y android:layout_height para determinar sus dimensiones
dentro del layout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText android:id="@+id/TxtNombre"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button android:id="@+id/BtnAceptar"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</LinearLayout>
Con el código anterior conseguiríamos
un layout como el siguiente:
TableLayout
Un TableLayout permite
distribuir sus elementos hijos de forma tabular, definiendo las filas y
columnas necesarias, y la posición de cada componente dentro de la tabla.
La estructura de la tabla se define de
forma similar a como se hace en HTML, es decir, indicando las filas que
compondrán la tabla (objetos TableRow), y dentro de cada fila las
columnas necesarias, con la salvedad de que no existe ningún objeto especial
para definir una columna (algo así como un TableColumn) sino que
directamente insertaremos los controles necesarios dentro
del TableRow y cada componente insertado (que puede ser un control
sencillo o incluso otro ViewGroup) corresponderá a una columna de la
tabla. De esta forma, el número final de filas de la tabla se corresponderá
con el número de elementos TableRow insertados, y el número total
de columnas quedará determinado por el número de componentes de la fila que
más componentes contenga.
Por norma general, el ancho de cada
columna se corresponderá con el ancho del mayor componente de dicha columna,
pero existen una serie de propiedades que nos ayudarán a modificar este
comportamiento:
Todas estas propiedades
del TableLayout pueden recibir una lista de índices de columnas
separados por comas (ejemplo: android:stretchColumns=”1,2,3″) o un
asterisco para indicar que debe aplicar a todas las columnas
(ejemplo: android:stretchColumns=”*”).
Otra característica importante es la
posibilidad de que una celda determinada pueda ocupar el espacio de varias
columnas de la tabla (análogo al atributo colspan de HTML). Esto se
indicará mediante la propiedad android:layout_span del componente concreto que deberá tomar dicho espacio.
GridLayout
Este tipo de layout fue incluido a
partir de la API 14 (Android 4.0) y sus características son similares al TableLayout,
ya que se utiliza igualmente para distribuir los diferentes elementos de la
interfaz de forma tabular, distribuidos en filas y columnas. La diferencia
entre ellos estriba en la forma que tiene el GridLayout de colocar
y distribuir sus elementos hijos en el espacio disponible. En este caso, a
diferencia del TableLayout indicaremos el número de filas y
columnas como propiedades del layout, mediante android:rowCount y android:columnCount.
Con estos datos ya no es necesario ningún tipo de elemento para indicar las
filas, como hacíamos con el elemento TableRow del TableLayout,
sino que los diferentes elementos hijos se irán colocando ordenadamente por
filas o columnas (dependiendo de la propiedad android:orientation) hasta
completar el número de filas o columnas indicadas en los atributos
anteriores. Adicionalmente, igual que en el caso anterior, también tendremos
disponibles las
propiedades android:layout_rowSpan y android:layout_columnSpan para
conseguir que una celda ocupe el lugar de varias filas o columnas.
Existe también una forma de indicar de
forma explícita la fila y columna que debe ocupar un determinado elemento
hijo contenido en el GridLayout, y se consigue utilizando los
atributos android:layout_row y android:layout_column. De
cualquier forma, salvo para configuraciones complejas del grid no suele ser
necesario utilizar estas propiedades.
RelativeLayout
El último tipo de layout que vamos a
ver es el RelativeLayout. Este layout permite especificar la posición de cada elemento de
forma relativa a su elemento padre o a cualquier otro elemento incluido en el
propio layout. De esta forma, al incluir un nuevo elemento X podremos indicar
por ejemplo que debe colocarse debajo del elemento Y y alineado a la derecha del layout padre.
En
un RelativeLayout tendremos un sinfín de propiedades para colocar
cada control justo donde queramos. Veamos las principales [creo que sus
propios nombres explican perfectamente la función de cada una]:
Posición relativa a otro control:
· android:layout_above
· android:layout_below
· android:layout_toLeftOf
· android:layout_toRightOf
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText android:id="@+id/TxtNombre"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button android:id="@+id/BtnAceptar"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</LinearLayout>
Con el código anterior conseguiríamos
un layout como el siguiente:
TableLayout
Un TableLayout permite distribuir sus elementos hijos de forma tabular, definiendo
las filas y columnas necesarias, y la posición de cada componente dentro de
la tabla.
La estructura de la tabla se define de
forma similar a como se hace en HTML, es decir, indicando las filas que
compondrán la tabla (objetos TableRow), y dentro de cada fila las columnas necesarias, con la salvedad de
que no existe ningún objeto especial para definir una columna (algo así como
un TableColumn) sino que directamente insertaremos los controles
necesarios dentro del TableRow y cada componente insertado (que puede ser un control sencillo o
incluso otro ViewGroup) corresponderá a una columna de la tabla. De esta forma, el número
final de filas de la tabla se corresponderá con el número de elementos TableRow insertados,
y el número total de columnas quedará determinado por el número de
componentes de la fila que más componentes contenga.
Por norma general, el ancho de cada
columna se corresponderá con el ancho del mayor componente de dicha columna,
pero existen una serie de propiedades que nos ayudarán a modificar este
comportamiento:
Todas estas propiedades del TableLayout pueden recibir una lista de índices de columnas separados por comas
(ejemplo: android:stretchColumns=”1,2,3″) o un asterisco para indicar que debe aplicar a todas las columnas
(ejemplo: android:stretchColumns=”*”).
Otra característica importante es la
posibilidad de que una celda determinada pueda ocupar el espacio de varias
columnas de la tabla (análogo al atributo colspan de HTML).
Esto se indicará mediante la propiedad android:layout_span del componente concreto que deberá tomar dicho espacio.
GridLayout
Este tipo de layout fue incluido a
partir de la API 14 (Android 4.0) y sus características son similares
al TableLayout, ya que se utiliza igualmente para distribuir los diferentes
elementos de la interfaz de forma tabular, distribuidos en filas y columnas.
La diferencia entre ellos estriba en la forma que tiene el GridLayout de
colocar y distribuir sus elementos hijos en el espacio disponible. En este
caso, a diferencia del TableLayout indicaremos el número de filas y columnas como propiedades del
layout, mediante android:rowCount y android:columnCount. Con estos datos ya no es necesario ningún tipo de elemento para
indicar las filas, como hacíamos con el elemento TableRow del TableLayout, sino que
los diferentes elementos hijos se irán colocando ordenadamente por filas o
columnas (dependiendo de la propiedad android:orientation) hasta completar el número de filas o columnas indicadas en los
atributos anteriores. Adicionalmente, igual que en el caso anterior, también
tendremos disponibles las propiedades android:layout_rowSpan y android:layout_columnSpan para conseguir que una celda ocupe el lugar de varias filas o
columnas.
Existe también una forma de indicar de
forma explícita la fila y columna que debe ocupar un determinado elemento
hijo contenido en el GridLayout, y se consigue utilizando los atributos android:layout_row y android:layout_column. De cualquier forma, salvo para configuraciones complejas del grid no
suele ser necesario utilizar estas propiedades.
RelativeLayout
El último tipo de layout que vamos a
ver es el RelativeLayout. Este layout permite especificar la posición de cada elemento de forma
relativa a su elemento padre o a cualquier otro elemento incluido en el
propio layout. De esta forma, al incluir un nuevo elemento X podremos indicar
por ejemplo que debe colocarse debajo del elemento Y y alineado a la derecha del layout padre.
En un RelativeLayout tendremos
un sinfín de propiedades para colocar cada control justo donde queramos.
Veamos las principales [creo que sus propios nombres explican perfectamente
la función de cada una]:
Posición relativa a otro control:
Posición relativa al layout padre:
Por último indicar que cualquiera de
los tipos de layout anteriores poseen otras propiedades comunes como por
ejemplo los márgenes exteriores (margin) e interiores (padding)
que pueden establecerse mediante los siguientes atributos:
Opciones de margen exterior:
Opciones de margen interior:
Existen otros layouts algo más
sofisticados a los que dedicaremos artículos específicos un poco más
adelante, como por ejemplo el DrawerLayout para añadir menús laterales deslizantes.
También en próximos artículos veremos
otros elementos comunes que extienden a ViewGroup, como por
ejemplo las vistas de tipo lista (ListView), de tipo grid (GridView), y las pestañas o tabs (TabHost/TabWidget).
Botones
Android nos proporciona tres tipos de
botones:
Button: Es el típico botón normal, contiene un texto y
puede contener imágenes de tipo icono que puedes alinear con el texto.
ToggleButton: es de tipo on/off, contiene una rayita que indica ese on/off. ImageButton: El botón contiene una imagen, es muy útil para cuando queremos hacer cosas vistosas y de diseño con formas raras, ya que el Button es rectangular, y aquí podemos usar cualquier forma poniendo el fondo transparente. 
Cuadros de textos.
Control TextView.
El control TextView es otro de los
clásicos en la programación de GUIs, las etiquetas de texto, y se utiliza
para mostrar un determinado texto al usuario. Al igual que en el caso de
los botones, el texto del control se establece mediante la propiedad
android:text. A parte de esta propiedad, la naturaleza del control hace
que las más interesantes sean las que
establecen el formato del texto
mostrado, que al igual que en el caso de los botones son las siguientes:
android:background (color de fondo), android:textColor (color del texto),
android:textSize (tamaño de la fuente) y android:typeface (estilo del texto:
negrita, cursiva, …). : las imágenes (ImageView), las etiquetas (TextView) y por último los cuadros de texto (EditText).
Control-ImageView
El control ImageView permite mostrar
imágenes en la aplicación. La propiedad más interesante es android:src, que
permite indicar la imagen a mostrar. Nuevamente, lo normal será indicar como
origen de la imagen el identificador de un recurso de nuestra carpeta /res/drawable,
por ejemplo android:src=”@drawable/unaimagen”.
<ImageView android:id=”@+id/ImgFoto”
android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:src=”@drawable/icon” />
En la lógica de la aplicación, podríamos
establecer la imagen mediante el método set ImageResorce(…), pasándole el ID
del recurso a utilizar como contenido de la imagen.
ImageView img =
(ImageView)findViewById(R.id.ImgFoto);
img.setImageResource(R.drawable.icon);
Control TextView.
El control TextView es otro de los
clásicos en la programación de GUIs, las etiquetas de texto, y se utiliza
para mostrar un determinado texto al usuario. Al igual que en el caso de
los botones, el texto del control se establece mediante la propiedad
android:text. A parte de esta propiedad, la naturaleza del control hace
que las más interesantes sean las que
establecen el formato del texto
mostrado, que al igual que en el caso de los botones son
las siguientes: android:background (color de fondo), android:textColor
(color del texto), android:textSize (tamaño de la fuente) y android:typeface
(estilo del texto: negrita, cursiva, …).
Control-EditText.
El control EditText es el componente de edición de texto que proporciona la plataforma Android. Permite la introducción y edición de texto por parte del usuario, por lo que en tiempo de diseño la propiedad más interesante a establecer, además de su posición/tamaño y formato, es el texto a mostrar, atributo android:text.
Listas
Control Spinner [API]
Las listas desplegables en Android se
llaman Spinner. Funcionan de forma similar a cualquier control de este tipo,
el usuario selecciona la lista, se muestra una especie de lista emergente al
usuario con todas las opciones disponibles y al seleccionarse una de ellas ésta
queda fijada en el control. Para añadir una lista de este tipo a nuestra
aplicación podemos utilizar el código siguiente:
<Spinner
android:id="@+id/CmbOpciones"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
 |
No hay comentarios:
Publicar un comentario