Diferencia entre revisiones de «Prog Android Adaptando o deseño»

De MediaWiki
Ir a la navegación Ir a la búsqueda
 
(No se muestran 5 ediciones intermedias de otro usuario)
Línea 120: Línea 120:
  
  
: 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 [http://wiki.cifprodolfoucha.es/index.php?title=Activities,_Layouts_e_M%C3%BAltiples_pantallas#Tama.C3.B1os_de_pantalla_e_densidade_.28puntos_por_pulgada:_dpi.29 este enlace] para consultar los diferentes tamaños de 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 [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Activities,_Layouts_e_M%C3%BAltiples_pantallas._Introduci%C3%B3n#Tama.C3.B1os_de_pantalla_e_densidade_.28puntos_por_pulgada:_dpi.29 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.
 
: 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.
Línea 128: Línea 128:
 
: Este formato es independiente de que la pantalla esté en horizontal o vertical.
 
: 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.
 
: Por lo tanto, refleja el tamaño mínimo posible en dp para que la interface de un determinado layout pueda ser visualizada correctamente.
 +
 +
: <u>'''Esta es la opción que recomienda Android para el diseño de las Activities'''</u>. 
 +
: Ya vimos lo que eran los dp´s [https://wiki.cifprodolfoucha.es/index.php?title=PDM_Activities,_Layouts_e_M%C3%BAltiples_pantallas._Introduci%C3%B3n#P.C3.ADxeles_independentes_da_densidade.28dp_ou_dip.29_e_Escala_independente.28sp.29 en esta sección de la Wiki]
  
  
Línea 147: Línea 150:
 
* Estos son algunos valores que puedes utilizar para tamaños de pantallas comunes:
 
* Estos son algunos valores que puedes utilizar para tamaños de pantallas comunes:
  
:* 320, para dispositivos con configuraciones de pantalla como las siguientes:
+
:* '''320dp''', para dispositivos con configuraciones de pantalla como las siguientes:
 
::* 240 x 320 ldpi (teléfono celular QVGA)
 
::* 240 x 320 ldpi (teléfono celular QVGA)
 
::* 320 x 480 mdpi (teléfono celular)
 
::* 320 x 480 mdpi (teléfono celular)
 
::* 480 x 800 hdpi (teléfono celular de alta densidad)
 
::* 480 x 800 hdpi (teléfono celular de alta densidad)
::* 480, para pantallas de 480 x 800 mdpi (tablet/teléfono celular).
+
:* '''480dp''', para pantallas de 480 x 800 mdpi (tablet/teléfono celular).
::* 600, para pantallas de 600 x 1024 mdpi (tablet de 7 pulgadas).
+
:* '''600dp''', para pantallas de 600 x 1024 mdpi (tablet de 7 pulgadas).
::* 720, para pantallas de 720 x 1280 mdpi (tablet de 10 pulgadas).
+
:* '''720dp''', para pantallas de 720 x 1280 mdpi (tablet de 10 pulgadas).
  
  
Línea 161: Línea 164:
  
  
 +
 +
 +
 +
<br />
 +
'''[https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3biles#UNIDADE_2:_A_interface_de_usuario. Enlace a la página principal de la UD2]'''
 +
<br />
 +
<br />
 +
'''[https://wiki.cifprodolfoucha.es/index.php?title=Programación_de_dispositivos_móbiles Enlace a la página principal del curso]'''
 +
<br />
  
  
 
<br> -- [[Usuario:angelfg|Ángel D. Fernández González]] e [[Usuario:Carrion|Carlos Carrión Álvarez]] -- (2018).
 
<br> -- [[Usuario:angelfg|Ángel D. Fernández González]] e [[Usuario:Carrion|Carlos Carrión Álvarez]] -- (2018).

Revisión actual del 12:59 21 nov 2020

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.
Esta es la opción que recomienda Android para el diseño de las Activities.
Ya vimos lo que eran los dp´s en esta sección de la Wiki


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:
  • 320dp, 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)
  • 480dp, para pantallas de 480 x 800 mdpi (tablet/teléfono celular).
  • 600dp, para pantallas de 600 x 1024 mdpi (tablet de 7 pulgadas).
  • 720dp, para pantallas de 720 x 1280 mdpi (tablet de 10 pulgadas).






Enlace a la página principal de la UD2

Enlace a la página principal del curso



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