En el patrón MVC definiremos, a groso modo, la vista como la visualización del modelo. Más específicamente, la vista es la porción de una aplicación responsable del renderizado de los elementos visuales y de enviar la interacción del usuario con dicho elementos a otro componente de la arquitectura. La vista es también llamada coloquialmente como interfaz de usuario. Y como Android sigue este patrón, en el que se pretende separar los datos de la lógica, lo correcto es utilizar el mecanismo que proporciona Android para definir la interfaz de usuario: ficheros de diseño basados en XML.
Cada uno de estos ficheros se crearán en el directorio res/layout/ de nuestro proyecto. Y cada uno de ellos se corresponderá con una 'pantalla' gráfica de la aplicación.
Todos los elementos gráficos que se renderizarán en una 'pantalla' son subclases de una clase llamada View, por lo tanto, a partir de ahora a dichos elementos gráficos (campos de texto, botones, imágenes) que formarán la interfaz de usuario les llamaremos vistas.
Ahora tenemos que plantearnos la forma de poder posicionar las vistas correctamente. Y es aquí donde aparece el concepto de Layout o contenedor. Que contendrá diversas vistas y gracias a él podremos posicionarlas de la forma que queramos. Finalmente hay que tener en cuenta que cada fichero XML contendrá únicamente un Layout padre de todos los demás elementos. Pero esto no quiere decir que solo pueda haber un Layout por fichero. Ya que un Layout puede contener a otro Layout descendiente.
Conceptos
1. El identificador
El atributo principal de todas las vistas y layouts es el id. Que sirve para identificar únicamente a un objeto View. Hay tres nomenclaturas para tratar con el id de una vista:
- android:id=”@+id/identificador”: Creamos un nuevo id llamado identificador. El símbolo “+” hace que el SDK genere un entero que junto al id es usado para crear un una entrada en el fichero R.java. También se puede utilizar esta nomenclatura para hacer referencia a un id ya creado. Sin embargo para dicho propósito es recomendable utilizar la siguiente nomenclatura.
- android:id=”@id/identificador”: Hacemos referencia a un objeto con id identificador. Si dicho identificador no ha sido creado obtendremos el siguiente error: “No resource found that matches the given name”.
- android:id=”@android:id/list”:Referencia a un recurso definido por Android. En este caso recurso con identificador “list”. Aquí nunca se debe de utilizar el símbolo “+”.
2. Unidades de medida
En el momento de desarrollar una aplicación para Android nos encontramos la gran cantidad de tamaños de pantalla diferentes en los dispositivos. Lo que dificulta que la interfaz se vea correctamente en todos ellos. Para ello Android nos ayuda proporcionando diferentes tipos de medidas:
- in (pulgadas): Distancia real medida en pulgadas sobre la pantalla.
- pt (puntos): Equivale a 1/72 pulgadas.
- px (píxeles): Estas dimensiones representan los píxeles en la pantalla.
- mm (milímetros): Distancia real medida en mm sobre la pantalla.
- dp o dip (píxeles independientes de la densidad): Es una unidad abstracta basada en la densidad física de la pantalla. En una pantalla con una densidad de 160 dpi podemos decir que 1dp es aproximadamente un px. Si luego el dispositivo tiene otra densidad, se realizará la correspondiente regla de tres. Por lo que si una pantalla tiene mayor densidad, el número de píxeles necesarios para dibujar 1dp es escalado superiormante mediante un factor apropiado. Usar esta medida en vez de usar los píxeles de la pantalla es una solución para hacer que las dimensiones de los elementos de la interfaz gráfica cambien de tamaño adecuadamente con las diferentes densidades de pantalla existentes.
- sp (píxeles escalados): Similar a dp pero también se escala en función del tamaño de fuente que el usuario ha escogido en las preferencias. Por lo tanto es una buena medida para las fuentes.
3. Dimensiones de layouts y vistas
Los atributos android:layout_width y android:layout_height, como su nombre indica, sirven para especificar el ancho y alto de cada elemento. Podrán tomar los siguientes valores:
- “fill_parent” - para que el elemento hijo tome la dimensión de su layout contenedor padre.
- “wrap_content” - para que el elemento hijo tome la dimensión de su contenido.
- Una de las medidas de unidades anteriormente explicadas.
4. Margenes de layouts y vistas:
Lista de atributos que podemos usar tanta en los 'layouts' como en las vista para especificar márgenes:
A) android:layout_margin: Con este atributo especificaremos un margen externo respecto a otros elementos. Utilizaremos una de las unidades anteriormente descritas y el valor especificado se aplicará a los cuatro margenes del elemento.
B) android:layout_marginTop: Con este atributo especificaremos únicamente el margen superior del elemento. Utilizaremos una de las unidades anteriormente descritas.
C) android:layout_marginBottom: Con este atributo especificaremos únicamente el margen inferior del elemento. Utilizaremos una de las unidades anteriormente descritas.
D) android:layout_marginLeft: Con este atributo especificaremos únicamente el margen izquierdo del elemento. Utilizaremos una de las unidades anteriormente descritas.
E) android:layout_marginRight: Con este atributo especificaremos únicamente el margen derecho del elemento. Utilizaremos una de las unidades anteriormente descritas.
F) android:padding: Con este atributo indicamos el espacio desde el contenido hasta el borde del elemento, en sus cuatro lados. Utilizaremos una de las unidades anteriormente descritas.
G) android:paddingTop: Con este atributo indicamos el espacio desde el contenido hasta el borde superior del elemento. Utilizaremos una de las unidades anteriormente descritas.
H) android:paddingBottom: Con este atributo indicamos el espacio desde el contenido hasta el borde inferior del elemento. Utilizaremos una de las unidades anteriormente descritas.
I) android:paddingLeft: Con este atributo indicamos el espacio desde el contenido hasta el borde izquierdo del elemento. Utilizaremos una de las unidades anteriormente descritas.
J) android:paddingRight: Con este atributo indicamos el espacio desde el contenido hasta el borde derecho del elemento. Utilizaremos una de las unidades anteriormente descritas.
android:paddingBottom="@dimen/activity_vertical_margin".
En este caso los recursos de tipo dimen (dimensión) se define en el fichero /res/values/dimens.xml.
5. Color fondo de layout y vistas
Podemos especificar un color de fondo para un elemento (por defecto será blanco) simplemente con el atributo android:background:
- Especificando un valor hexadecimal. Por ejemplo android:background="#f0f0f0".
- Indicando un identificador de un recurso, ya sea nuestro o de Android. Por ejemplo android:background="@color/back".
6. Vistas y cadenas
Una buena practica a la hora de definir los textos que van a mostrar las vistas es utilizar el recurso 'string'. Este tipo de recursos lo definiremos en el fichero /res/values/strings.xml. Y representarán las cadenas de texto a mostrar en las diferentes vistas.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Pruebas</string>
<string name="action_settings">Settings</string>
<string name="hello_world">Hello world!</string>
<string name="column_1">Columna 1</string>
<string name="column_2">Columna 2</string>
<string name="column_3">Columna 3</string>
<string name="Column_1_2">Columna 1 y 2</string>
<string name="layout2">Contenedor 2</string>
<string name="layout1">Contenedor 1</string>
<string name="edittext">EditText</string>
<string name="checkbox">Checkbox</string>
<string name="textview">TextView</string>
</resources>
Una vez tenemos definidas las cadenas, ya las podemos utilizar en las vistas mediante el atributo android:text de cada una de ellas. Dentro del atributo utilizaremos la referencia al nombre de la cadena que queremos mostrar:
<Button
android:id="@+id/button1"
style="@style/BotonNormal.Verde"
android:text="@string/hello_world" />
Podríamos optar por escribir el texto directamente en el atributo android:text, pero si tenemos que utilizar varias veces el mismo texto lo tendremos que escribir cada vez. Sin embargo si utilizamos el recurso strings.xml podremos utilizar la misma referencia a una cadena múltiples veces.
Entradas relacionadas
Estructura de un proyecto Android
No hay comentarios:
Publicar un comentario