Prog Android Adaptando o deseño

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

Introducción

  • Debemos ter en conta que os dispositivos que 'corren' o S.O. Android son moi variados, en tamaño de pantalla e en puntos por polgada, polo que as resolucións a empregar poden variar considerablemente.
  • Polo tanto, cando deseñamos unha aplicación, debemos poder adaptala aos diferentes tamaños, para que se visualice correctamente e se aproveite o espacio dispoñible.
  • Para facer isto, android implementa un mecanismos de 'sufixos' ás carpetas onde se gardan os layouts.
Cada un dos sufixos indica diferentes características físicas da pantalla (tamaño, orientación, dp,...)
Tódolos layouts definidos en ditos cartafoles serán cargados cando os sufixos coincidan coas características físicas do dispositivo.


  • Os sufixos 'non son excluintes' e se poden combinar, por exemplo, podemos ter un layout definido cando dispoñamos dunha tablet de 720dp e estea posicionada en apaisado.


  • Tamén podemos limitar no AndroidManifiest.xml os dispositivos que poidan instalar a nosa aplicación en función da pantalla do mesmo, coa etiqueta 'supports-screens'.
Máis información neste enlace.



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.
Máis información neste enlace.


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 para que la interface de un determinado layout pueda ser visualizada correctamente.


PDM Design Screen size 1.jpg



  • 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/
PDM Design Screen size 2.jpg



  • 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).