Aplicaciones moviles clase10 layout

IESTP “MARÍA ROSARIO ARAOZ PINTO” COMPUTACIÓN E INFORMÁTICA

APLICACIONES MÓVILES 1

1. - Icono de la aplicación

Cuando creamos un proyecto para implementar una aplicación con el plugin de Android nos crea un ícono por defecto:

Los íconos e imágenes se almacenan en la carpeta res (resources) y en esta hay cuatro carpetas llamadas: drawable-ldpi

drawable-mdpi

drawable-hdpi

drawable-xhdpi

Y en cada una de estas hay un archivo llamado ic_launcher.png:

Como las resoluciones de los dispositivos Android pueden ser muy distintos (un celular, una tablet, un televisor etc.) se recomienda proporcionar múltiples copias de cada imagen de recursos a diferentes resoluciones y almacenarlos en las carpetas nombradas respetando las siguientes reglas: res/drawable-ldpi/

75% del tamaño de las imágenes almacenadas en la carpeta drawable-mdpi

El ícono debe ser de 36*36 píxeles.

res/drawable-mdpi/


res/drawable-hdpi/



res/drawable-xhdpi/



2. Layout (LinearLayout)

Android organiza las componentes visuales (Button, EditText, TextView etc.) en pantalla mediante contenedores llamados Layout. Hasta ahora no nos a preocupada como organizar una pantalla, sino nos hemos centrado en la funcionalidad de cada programa que implementamos. Ahora comenzaremos a preocuparnos como organizar y disponer las componentes dentro de la pantalla. - LinearLayout. LinearLayout es uno de los diseños más simples y más empleado. Simplemente establece los componentes visuales uno junto al otro, ya sea horizontal o verticalmente.



Creemos un proyecto llamado ProyectoLayout1, borremos el TextView que agrega por defecto el ADT. Para cambiar nuestro layout por defecto que es el RelativeLayout que crea el ADT debemos presionar el botón derecho del mouse en la ventana Outline donde dice RelativeLayout y seleccionar Change Layout (Debemos seleccionar en el diálogo que lo queremos cambiar por un layout de tipo LinearLayout vertical): Una de las propiedades más importantes del contenedor LinearLayout es Orientation. Si fijamos la propiedad Orientation con el valor Vertical luego las componentes contenidas en el Layout se disponen una debajo de otra (Cuando disponemos un contenedor LinearLayout con orientación vertical y disponemos una serie de botones luego podemos ver algo similar a:

En cambio si fijamos la propiedad Orientation con el valor Horizontal el resultado es la disposición de las componentes en forma horizontal:



Podemos disponer más de una componente de tipo LinearLayout para implementar nuestra interfaz visual. Veamos los objetos y propiedades a configurar si queremos la siguiente interfaz:

Para implementar este interfaz hemos agregado de la pestaña "Layouts" dos controles de tipo "LinearLayout (Vertical)" en la parte superior y uno de tipo "LinearLayout (Horizontal)" en la parte inferior:



Disponemos un TextView y un EditText en el LinearLayout superior (Podemos arrastrarlos directamente a la ventana Outline dentro del LinearLayout respectivo):

Ahora en el otro LinearLayout agregamos un Button y un TextView:



Para que el segundo LinearLayout quede en la parte inferior de la pantalla inicializamos las propiedades "Layout_weight" con 1 para el superior y con 0 para el inferior:

Seleccionamos el EditText del primer LinearLayout y fijamos Layout Height con el valor Match Parent (para que ocupe todo el espacio del contenedor) y para la propiedad gravity asignamos el valor top



Finalmente actualizamos el segundo EditText con lo que tenemos como resultado la interfaz:

Propiedad Gravity. Otra propiedad muy utilizada es Gravity. Esta propiedad nos permite alinear a la izquierda, a la derecha, a la parte superior, a la parte superior derecha etc. Para implementar la siguiente interfaz:



Para el LinearLayout superior definimos la propiedad Layout_weight con valor 0 y el segundo LinearLayout la misma propiedad Layout_weight con valor 1. Los dos botones que ubicamos en el segundo LinearLayout aparecen en la parte inferior derecha ya que inicializamos la propiedad Gravity del segundo LinearLayout con los valores:

3. Layout (TableLayout)



El Layout de tipo TableLayout agrupa componentes en filas y columnas. Un TableLayout contiene un conjunto de componentes de tipo TableRow que es el que agrupa componentes visuales por cada fila (cada fila puede tener distinta cantidad de componentes visuales) Cuando disponemos un control de Layouts de tipo TableLayout automáticamente crea cuatro componentes de tipo TableRow que los podemos ver en la ventana "Outline". Podemos borrar o agregar componentes de tipo TableRow según las necesidades de nuestro TableLayout:

Luego de borrar un control de tipo TableRow y agregar componentes de tipo Button la interfaz visual queda como sigue (muchas veces es más fácil agregar los controles visuales en la ventana Outline para disponerlos dentro de cada tableRow):

Otra propiedad que nos puede ser útil inicializar en los controles que se disponen dentro de un TableLayout es layout_span. Esta propiedad permite que un control se expanda más de una celda.



En el siguiente ejemplo el objeto de la clase Button de la segunda fila hemos dispuesto la propiedad layout_span con el valor 2:

Si la propiedad no aparece en la ventana "Properties" cuando seleccionamos el objeto debemos entrar al archivo XML y agregar manualmente dicha propiedad:

4. - Layout (RelativeLayout)

El layout RelativeLayout es el que dispone el ADT por defecto cuando creamos un proyecto en Android. Hay varias posibilidades cuando empleamos el RelativeLayout. Primero podemos alinear un control con respecto al Layout que lo contiene. Para probarlo dispondremos un botón en cada vértice y veremos que propiedades son afectadas e inicializadas:



Como podemos ver cada control que agregamos se inicializan alguna de las propiedades: alignParentLeft

alignParentRight

alignParentTop

alignParentBottom

centerHorizontal

centerVertical

centerInParent

Con este tipo de layout podemos disponer un control en forma relativa a otro control que haya dentro del RelativeLayout. Veamos un ejemplo:

En este ejemplo hemos dispuesto el segundo botón debajo (below) del botón 1 y alineado a la izquierda (luego si desplazamos el botón 1 se desplazará el botón 2) La posición relativa con respecto a otro control puede ser: above (por encima)

below (debajo)

toLeftOf (a la izquierda de)

toRightOf (a la derecha)



5. - Layout (FrameLayout)

El control de tipo FrameLayout dispone dentro del contenedor todos los controles visuales alineados al vértice superior izquierdo. Es decir si disponemos dos o más controles los mismos se apilan. Por ejemplo si disponemos dentro de un FrameLayout un ImageView y un Button luego el botón se superpone a la imagen:

Otra aplicación del control FrameLayout es disponer una serie de controles visuales no visibles e ir alternando cual se hace visible.

6. - Layout (ScrollView y LinearLayout)

El ScrollView junto con un LinearLayout nos permite disponer una cantidad de componentes visuales que superan la cantidad de espacio del visor del celular o tablet. Luego el usuario puede desplazar con el dedo la interfaz creada.

Problema:

Disponer un control de tipo ScrollView (que se encuentra en la pestaña Composite). Como veremos automáticamente se crea una componente de tipo LinearLayout y fijemos la propiedad Orientation del LinearLayout con el valor vertical:



Luego dispongamos numerosos botones que superen la cantidad de espacio del dispositivo. Numerar los botones con los números del 1 en adelante (recordar que podemos ir arrastrando los botones a la ventana Outline):



Luego si ejecutamos el programa veremos que podemos desplazar (scroll) todo el contenido del visor con el dedo:

Otra posibilidad para la implementación de una interfaz en Android es disponer un LinearLayout en la parte superior y un ScrollView en la parte inferior:



Esto hace que en tiempo de ejecución quede fijo el LinearLayout y podamos desplazar con el dedo el ScrollView que aparece en la parte inferior:

Engineering

Aplicaciones moviles clase10 layout