Los smartphones pueden girarse y con ellos la pantalla
(seguro que eso te ha desquiciado más de una vez, me juego lo que quieras), y
por ello es importante configurar nuestras aplicaciones para que actúen
respecto a ese giro que se produce.
Vamos a crear una actividad sencilla, un texView y cuatro
Buttons, como lo vemos en la imagen
Si ahora mismo ejecutaos la aplicación y la giramos (Ctrl +
F11 en el emulador) la veremos tal que así:
Ostia, pues no hay tanta diferencia acaba de decir un astuto
lector. Pero ahora piensa en lo siguiente. Tenemos una organización de los
elementos para ser visualizados en una pantalla vertical. ¿Qué pasaría si
hubiésemos añadido cuatro elementos más? Prueba y mira si como se ven al girar
la pantalla.
Es importante reorganizar los elementos para poder ser
visualizados a pantalla tumbada. Una forma de hacerlo es la siguiente.
En la parte de la izquierda de nuestra aplicación muestra el
desplegable (que seguramente en tu ejemplo ponga Android) y selecciona la vista Project.
Ve a la ruta Vistas1 à
app à
src à
main à
res. Dentro de esa carpeta encontrarás una llamada Layout con un archivo dentro. Ese archivo indica la configuración
de pantalla que tenemos para nuestro móvil en posición vertical. Hay que hacer
otra activity para visualizarlo en horizontal.
Sobre la carpeta res
creamos un nuevo directorio al que llamaremos layout-land
Y dentro de esa carpeta copiamos el archivo que teníamos en
la carpeta layout (sin cambiarle el nombre al fichero). Ese será el que modificaremos
para la vista horizontal.
Se nos abrirá automáticamente en visor XML. Lo cambiamos a
la vista gráfica para trabajar más cómodamente y ya aparecerá girado por
defecto.
Ahora consistirá en organizar los elementos como deseemos.
En mi caso, voy a añadir un LinearLayout
Vertical en el que meteré el campo de texto y dentro del layout un TableLayout en el que incluiré los
cuatro botones (dos por columna).
La estructura es la siguiente:
Centro el textView
horizontalmente
Y del TableLayout modifico la propiedad stretchColumn a “*”
para conseguir que se ajusten al ancho de la tabla. stretchColumns=”0” indica
que se asigne el ancho sobrante a la primera columna, y con el valor 1 el ancho
va a la segunda. * significa que se asigna el ancho sobrante entre todas las
columnas.
Si ahora volvemos a ejecutar la aplicación, podemos apreciar
la diferencia al posicionar los elementos.
Pantalla en vertical
Pantalla en horizontal
Y naturalmente, no solo podemos modificar el layout para
verse horizontal, si no controlando también para cada tamaño de pantalla.
- layout-small
- layout-normal (predefinida como layout)
- layout-large
- layout-xlarge
Y todas estas son combinables con los layout horizontal y
vertical. Así por ejemplo si queremos crear un layout horizontal para pantallas
grandes la carpeta a crear en res deberá ser layout-large-land. Hay varias combinaciones para programar como se
puede ver.
0 comentarios:
Publicar un comentario