Prog Android Adaptando el diseño

De MediaWiki
Ir a la navegación Ir a la búsqueda

Introducción

  • Debemos de tener en cuenta que los dispositivos que 'corren' el S.O. Android son muy variados, en tamaño de pantalla y en puntos por pulgada, por lo que las resoluciones a emplear pueden variar considerablemente.
  • Por lo tanto, cuando diseñamos una aplicación, debemos de poder adaptarla a los diferentes tamaños, para que se visualice correctamente y se aproveche el espacio disponible.
  • Para hacer esto, android implementa un mecanismos de 'sufijos' a las carpetas donde se guardan los layouts.
Cada uno de los sufijos indica diferentes características físicas de la pantalla (tamaño, orientación, dp,...)
Todos los layouts definidos en dichas carpetas serán cargados cuando los sufijos coincidan con las características físicas del dispositivo.


  • Los sufijos 'non se excluyentes' y se pueden combinar, por ejemplo, podemos tener un layout definido cuando dispongamos de una tablet de 720dp y esté posicionada en apaisado.



En función de la orientación


Introdución

  • Algúns dispositivos deixan rotar a pantalla, poñéndoa en posición horizontal-vertical (apaisado-retrato)
  • Se queremos ter un deseño diferente para cada orientación, debemos de crear un cartafol dentro de ‘res’ de nome /res/layout-land.
  • Aquí dentro poñemos os deseños que queiramos ter cunha orientación apaisada do dispositivo, mentres que deixaremos en /res/layout os deseños para unha orientación vertical.

Nota: no emulador, para cambiar a orientación debemos premer os botóns CTRL+F11 ou 7 no teclado numérico, sen estar activado o teclado numérico.

  • Antes de continuar abre a calculadora nun AVD ou no dispositivo real e cambia a orientación do dispositivo/AVD. Notas algunha diferencia cando o dispositivo está en Vertical a cando o está en Horizontal?.


Veremos máis adiante, na sección Internacionalización, como podemos xerar estes 'sufixos' de forma automática cando creamos o arquivo de recurso.

Caso práctico

  • Crear o proxecto: U2_40_Landscape
  • Crear en /res o cartafol layout-land.
  • Definir o XML vertical
  • Copiar o XML vertical á nova carpeta e modificalo segundo as necesidades.

XML layout vertical

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical"
 6     android:gravity="center" >
 7 
 8     <TextView
 9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content"
11         android:textColor="#00F"
12         android:textSize="18sp"
13         android:text="O dispositivo está en posición vertical" />
14     
15     <Button 
16         android:layout_width="wrap_content"
17         android:layout_height="wrap_content"
18         android:onClick="oMeuMetodo"
19         android:text="Botón 1" />
20     
21       <TextView
22         android:layout_width="wrap_content"
23         android:layout_height="wrap_content"
24         android:gravity="center_horizontal"
25         android:text="Esta etiqueta só se amosa cando o dipositivo está en vertical" />
26     
27 </LinearLayout>


XML layout horizontal

  • Observar que falta unha etiqueta, a disposición e distinta, etc.
  • Neste caso os botóns en Vertical e en Apaisado chaman ao mesmo método.
 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="horizontal" >
 6 
 7     <Button
 8         android:layout_width="wrap_content"
 9         android:layout_height="wrap_content"
10         android:onClick="oMeuMetodo"
11         android:text="Botón 1" />
12 
13     <TextView
14         android:layout_width="wrap_content"
15         android:layout_height="wrap_content"
16         android:text="O dispositivo está en posición horizontal"
17         android:textColor="#F0F"
18         android:textSize="18sp" />
19 
20 </LinearLayout>



En función del tamaño

  • A partir de la versión de Android 3.2 se cambia la forma de indicarle al S.O. que layout tiene que coger en función del tamaño de la pantalla.
Anteriormente, en el directorio 'res/' se ponía un sufijo (como res/layout-xlarge/) para indicar que se layout fuese cargado para un tamaño de pantalla grande (ver este enlace para consultar los diferentes tamaños de pantalla).
Ahora, el sufijo que se va a añadir va a indicar el espacio necesario en pp (puntos por pulgada) que se necesita para poder visualizar el layout.
Esto se implementó para dar una respuesta de diseño a las tablet's de 7' ya que dichas tablet's entraban dentro de la misma categoría que las de 5' pero el espacio es bastante mayor.
El nombre que debe de tener la carpeta para que cargue el layout que se encuentre definido dentro de ella, debe de ser: nombre_carpeta-sw<N>dp siendo <N> el número de dp's necesario para que se pueda visualizar. Por ejemplo, 'res/clientes-sw600dp/
Este formato es independiente de que la pantalla esté en horizontal o vertical.
Por lo tanto, refleja el tamaño mínimo posible en dp's para que la interface de un determinado layout pueda ser visualizada correctamente.


  • Existen otros sufijos referidos solamente al ancho-alto de la pantalla:
  • nombre_carpeta-w<N>dp: Ancho mínimo en dp. Por ejemplo: res/productos-w150dp/
  • nombre_carpeta-h<N>dp: Alto mínimo en dp. Por ejemplo: res/productos-h300dp/


  • Estos son algunos valores que puedes utilizar para tamaños de pantallas comunes:
  • 320, para dispositivos con configuraciones de pantalla como las siguientes:
  • 240 x 320 ldpi (teléfono celular QVGA)
  • 320 x 480 mdpi (teléfono celular)
  • 480 x 800 hdpi (teléfono celular de alta densidad)
  • 480, para pantallas de 480 x 800 mdpi (tablet/teléfono celular).
  • 600, para pantallas de 600 x 1024 mdpi (tablet de 7 pulgadas).
  • 720, para pantallas de 720 x 1280 mdpi (tablet de 10 pulgadas).






-- Ángel D. Fernández González e Carlos Carrión Álvarez -- (2018).