Diferencia entre revisiones de «PDM Activities, Layouts e Múltiples pantallas. Introdución»

De MediaWiki
Ir a la navegación Ir a la búsqueda
Línea 210: Línea 210:
  
  
: Imos ver un exemplo no suposto que teñamos un deseño feito para un tamaño de ancho de teléfono de 350dp´s e queremos ter un diferente para tamaños iguais ou superiores a 350dp´s.
+
: Imos ver un exemplo no suposto que teñamos un deseño feito para un tamaño de ancho de teléfono de 400dp´s e queremos ter un deseño diferente para tamaños iguais ou superiores a 400dp´s.
 
<gallery caption="Creando un layout diferente para un tamaño mínimo en dp´s" widths="350" heights="300px" perrow="2">
 
<gallery caption="Creando un layout diferente para un tamaño mínimo en dp´s" widths="350" heights="300px" perrow="2">
 
Image:PDM_screens_ranges_4.jpg| Prememos o botón dereito sobre o cartafol layout dentro de res e escollemos '''New''' => '''Layout Resource File'''.
 
Image:PDM_screens_ranges_4.jpg| Prememos o botón dereito sobre o cartafol layout dentro de res e escollemos '''New''' => '''Layout Resource File'''.
Image:PDM_screens_ranges_5.jpg| No nome do layout poñemos o mesmo nome que o layout que temos deseñado para tamaños inferiores a 350dp. Marcamos na lista de esquerda 'Smallest Screen Width'''. A diferenza de 'Screen Width', esta opción non ten en conta a orientación. Prememos o botón con dobre frecha cara a dereita.
+
Image:PDM_screens_ranges_5.jpg| No nome do layout poñemos o mesmo nome que o layout que temos deseñado para tamaños inferiores a 400dp. Marcamos na lista de esquerda 'Smallest Screen Width'''. A diferenza de 'Screen Width', esta opción non ten en conta a orientación. Prememos o botón con dobre frecha cara a dereita.
Image:PDM_screens_ranges_6.jpg| Escribimos 350 na caixa de texto e prememos OK (na imaxe aparece 300, pero poñede 350).
+
Image:PDM_screens_ranges_6.jpg| Escribimos 400 na caixa de texto e prememos OK.
Image:PDM_screens_ranges_7.jpg| No Layout de 350 temos posto un botón...
+
Image:PDM_screens_ranges_7.jpg| No Layout de 400 temos posto un botón...
 
Image:PDM_screens_ranges_8.jpg| No Layout 'por defecto' temos unha etiqueta...
 
Image:PDM_screens_ranges_8.jpg| No Layout 'por defecto' temos unha etiqueta...
Image:PDM_screens_ranges_9.jpg| '''Estando sobre o layout que aparece con un width inferior a 350''', se prememos na lista de emuladores aparecen marcados aqueles que teñen menos de 350dpi de ancho e o premer sobre un deles, aparece o label...
+
Image:PDM_screens_ranges_9.jpg| '''Estando sobre o layout que aparece con un width inferior a 350''', se prememos na lista de emuladores aparecen marcados aqueles que teñen menos de 400dpi de ancho con un check mentres que aqueles que teñen un ancho superior aparecen con un aspa e indica cunha frecha cal layout vai cargarse. O premer sobre un dos que teñen menos de 400dp´s de ancho, aparece o label...
Image:PDM_screens_ranges_10.jpg| E se escollemos un emulador con máis de 350 aparece o botón...
+
Image:PDM_screens_ranges_10.jpg| E se escollemos un emulador con máis de 400 aparece o botón...
 
</gallery>
 
</gallery>
  

Revisión del 09:45 12 oct 2020

Introdución

  • Neste apartado vanse describir:
  • Que son as Activities.
  • Como indicar o tipo de deseño (distribución) que van ter os elementos gráficos na Activity.

Nota: Para entender esta parte teremos que ter creado un proxecto Android como está indicado neste punto.



Activities

  • Imos dar unha breve descrición do que é un Activity. Estas veranse máis adiante.
  • Unha Activity é unha pantalla única coa cal o usuario poderá interactuar a través dos elementos que nela se dispoñan.
  • Unha aplicación estará composta dunha ou varias Activities.
  • Incluso se pode saltar da Activity dunha aplicación á unha Activity calquera de outra aplicación. Por exemplo, cando se usa WhatsApp e se accede a consultar os datos dun contacto.
  • Unha Activity pode ser chamada cando se inicia unha aplicación, dende outra aplicación, ou cando se recupera a aplicación.
  • Unha Activity pode ser destruída pola propia aplicación, cando se preme o botón Back do dispositivo ou polo sistema porque está na pila de aplicacións (Stack) en segundo plano e se necesitan os recursos que está consumindo.
  • As Activities teñen un ciclo de vida como se expón dun xeito simple na seguinte imaxe:

00 basic-lifecycle.png

Nun punto posterior afondarase sobre as Activities.



Layout

  • Un layout é un panel onde se definen os elementos gráficos que compoñen unha Activity: botóns, listas depregables, etiquetas, etc.
  • Un Layout pode declararse en ficheiros XML ou en tempo de execución. Comezaremos polos ficheiros XML.
  • Un Layout poden ser de varios tipos: lineais, táboa, grid, etc. Como se verá no seguinte apartado.
  • Referencias:



Soporte múltiples pantallas

  • Como sabemos no mercado hai distintos dispositivos: teléfonos, tablets, etc. e agora ... coa nova versión Lollipop: reloxos, pulseiras, TVs, etc.
  • Cada un ten os seus tamaños e resolucións.
  • Android proporciona ferramentas para adaptarse a toda esa variedade. Por exemplo, poderíamos deseñar unha aplicación cuxa Interface Gráfica fose distinta dun teléfono a unha tablet, o se está en apaisado o teléfono ou en vertical.
  • O sistema tamén trata de escalar a aplicación para adaptala aos distintos tipos (Tamaños/resolucións) de pantalla, pero se usamos pixels para definición dos elementos que compoñen unha pantalla pode pasar o seguinte:

00 density-test-bad.png

  • Os dispositivos teñen o mesmo tamaño de pantalla,
  • A resolución dos dispositivos vai de menor a maior (de esquerda á dereita).
  • Observar como ao definir que un obxecto ocupa X*Y píxeles estes obxectos son máis pequenos a medida que a resolución da pantalla é maior.
  • Observar que se ven afectados os tipos de recursos gráficos:
    • Os creados polo usuario na aplicación: por exemplo o botón.
    • Os engadidos polo usuario á aplicación (debuxos/imaxes): por exemplo a imaxe de Android.


  • O obxectivo sería, que independentemente da resolución da pantalla se obtivera o seguinte resultado: os obxectos vense do mesmo tamaño aínda tendo resolucións distintas.

00 density-test-good.png

  • Imos ver antes de nada unha serie de conceptos:



Orientación e resolución

  • Orientación: dende o punto de vista do usuario indica se o dispositivo está en apaisado ou en vertical. Ao rotar a pantalla cambia a relación de altura e ancho.
  • Resolución: indica o número total de píxeles que ten a pantalla. Cando se desenvolven aplicacións para distintas pantallas débese traballar coa densidade e co tamaño da pantalla e non coa resolución total.



Tamaños de pantalla e densidade (puntos por pulgada: dpi)

  • Conceptos previos:


Ata versión 3.2

  • Tamaño da pantalla: tamaño da diagonal da pantalla física do dispositivo.
    • Por simplicidade Android divide as pantallas, até a versión Android 3.2 en : pequenas (small), normales, grandes (large) e extra largas (extra large).



Dende a versión 3.2

  • A partir desta versión a opción recomendada é a de definir os layouts en función do dp.
Así, por exemplo, podo ter un deseño no que necesito 600dp para que se vexa ben. Calquera dispositivo con dita resolución collerá este deseño.



Píxeles independentes da densidade(dp ou dip) e Escala independente(sp)

  • Antes de ler esta sección debemos de ter claro varios conceptos.
Imos coller como referencia un teléfono calquera, por exemplo un NEXUS 6P:
  • Píxeles: Son o número de 'puntos' que caben nunha pantalla. Ven ser a resolución. No exemplo 2560 x 1440 píxeles.
  • Tamaño en polgadas da pantalla: É o tamaño da diagonal da pantalla en polgadas. Cada polgada equivale a 2,54cm. No exemplo, 5.7'
A primeira idea que temos que ter claro é que maior tamaño non implica maior resolución. Poderíamos ter unha pantalla de 10' cunha resolución de 1024x768
Podemos relacionar os dous parámetros (tamaño e píxeles) para obter cantos píxeles por polgada temos (ppp o ppi o dpi).
No exemplo:
  • Calculamos os píxeles da diagonal: 2937,21
  • Dividimos polo número de polgadas: 2937,21 / 5.7 = 515ppp
Podedes consultar como calcular los ppp neste enlace.
A primeira reflexión que debemos preguntarnos é:
En caso de dous teléfonos de igual tamaño de pantalla deberemos escoller o que ten maior ppi ?
A primeira vista é si, pero temos que ter en conta que o ollo humano a partir dun tamaño determinado xa non é quen de distinguir os píxeles, polo que ter máis densidade non vai traducirse en unha mellor imaxe tendo como contrapartidas que o consumo da batería será moito maior.


  • O que temos que ter claro é que o parámetro dpi ou ppi (Pixel Per Inch) non ten nada que ver có tamaño do dispositivo físico.



  • Densidade de pantalla (Screen density): puntos por pulgada (dot per inch (dpi)). Unha pantalla de baixa resolución terá poucos dpi´s comparada cunha pantalla normal ou de alta resolución.
Por simplicidade Android agrupaba as densidades :
  • ldpi: baixa (low, 120 dpi)
  • mdpi: media (medium, 160 dpi)
  • hdpi: alta (high, 240 dpi)
  • xhdpi: extra alta (extra high, 320 dpi)
  • xxhdpi: extra extra alta (extra-extra high, 480 dpi)
  • xxxhdpi: extra extra extra alta (extra-extra-extra high, 640 dpi)
  • nodpi: Recursos para calquera densidade.


  • Podemos observar a seguinte imaxe con varios emuladores creados e como asocia cada un deles a unha densidade diferente:
PDM screens ranges 1.jpg
Podemos observar como se facemos os cálculos para ver cal é o dpi, por exemplo, no caso do 5.4 polgadas e resolución 480x854 sae:
  • Número de dpi (puntos por polgada) = raíz cadrada de (480^2 + 854^2)/5.4 = 233dpi e o asocia á densidade hdpi.




  • Píxel independente da densidade (Density-independent pixel (dp/dip)): é un píxel virtual que debe ser usado cando se definen elementos gráficos nun layout, tanto para expresar tamaño dun obxecto, como a súa posición.
  • Unha pantalla media(medium) ten 160 dpi. Quero isto dicir que 1px = 1dp nunha pantalla con densidade 160dpi.
  • Nunha pantalla media 1dp=1dpi. Isto é nunha pantalla media o píxel virtual coincide co píxel real.
  • En tempo de execución é cando se fai a conversión de unidades dp a píxeles físicos (px).
  • O factor de conversión é: px= dp * (dpi / 160).
  • Por exemplo 1 dp nunha pantalla de densidade:
  • 120dpi: 1dp sería igual a 0,75 px (píxeles físicos) => px = 1 * (120/160) => 1px = 0,75
  • 160dpi: 1dp sería igual a 1 px (píxeles físicos).
  • 240dpi: 1dp sería igual a 1,5 px (píxeles físicos) => px = 1 * (240/160) => 1px = 1,5
  • 320dpi: 1dp sería igual a 2 px (píxeles físicos).
  • 480dpi: 1dp sería igual a 3 px (píxeles físicos).
  • 640dpi: 1dp sería igual a 4 px (píxeles físicos).
  • Deste xeito se defininos sempre as dimensións e posicións en dp sempre se vai realizar unha conversión en tempo de execución ao número de píxeles físicos equivalentes.
Con isto veremos que un elemento gráfico definido no seu ancho-alta en dp´s verase igual en pantallas con diferente densidade.


  • Scale-independent Pixels (sp): esta unidade é igual a dp, pero é usada para tamaños de texto. Estes tamaños poden se axustados pola densidade da pantalla e polas preferencias do usuario.


Fixarse que a fórmula anterior nos serve para saber cantos dp´s temos dispoñibles:
PDM screens ranges 11.jpg
Por exemplo, na imaxe anterior vemos que o Pixel 3a ten 1080px de ancho e ten 440dpi.
Se despexamos dp da fórmula temos que: dp = px / (dpi/160)
No noso exemplo: dp_ancho = 1080 / (440/160) = 392 dp´s de ancho.
Se arrastres un botón e dádeslle 392dp´s de ancho podedes observar como ocupa todo o ancho:
PDM screens ranges 12.jpg


  • Nota: Podedes consultar os dp´s dos modelos de móbiles así como a densidade e outros datos no seguinte enlace.


  • Nota importante:
  • No caso das imaxes, debemos sempre empregar unidades en dp para o seu tamaño ou ben xogar cos tamaños dos contedores para que se axuste ao seu tamaño ou en base a posicións doutros compoñentes.
  • No caso dos texto, debemos sempre empregar unidades en sp para o seu tamaño.
Nota: Veremos que tamén podemos darlles uns valores para que se adapten ao tamaño do seu contedor como se fai e CSS...


A seguinte imaxe amosa os rangos entre que se moven os distintos tamaños de pantalla e os distintos tipos de densidade: 00 screens-ranges.png


Comentar que cando non sae o número exacto de dpi o fabricante pode informar (no ROM do S.O.) cal é o seu dp e tamén se pode cambiar a través do S.O.(depende da versión de Android) os dp´s do ancho.
Por exemplo, na imaxe, o modelo 480x800 e 4 polgadas da 233dpi. Activamos as opcións de 'Desarrollador' e accedemos a opción 'Smallest width' aparece 320dp (cando en teoría podería dar 329 se empregamos a fórmula anterior):
PDM screens ranges 2.jpg
Mentres que o Nexus de 5,2 polgadas e resolución 1080x1920 da 423dpi e a nivel de S.O. ofrece 411dp´s (cando pola fórmula temos 408dp):
PDM screens ranges 3.jpg



  • Android recomenda que o deseño se faga atendendo aos DP´s mínimos que ten que ter o teléfono para que se vexa ben.
Esto está explicado no punto de internacionalización desta WIKI.


Imos ver un exemplo no suposto que teñamos un deseño feito para un tamaño de ancho de teléfono de 400dp´s e queremos ter un deseño diferente para tamaños iguais ou superiores a 400dp´s.



  • AS IMAXES
  • Pero aínda nos falta saber que facer coas imaxes que pode incorporar un usuario a unha aplicación.
    • Pódese prover para cada imaxe un ficheiro distinto adaptado ás distintas densidades.
    • Se non se provén ficheiros para as distintas densidades o sistema escalará o ficheiro proporcionado para a densidade media (mdpi) e adaptarao a densidade da pantalla. Pero sempre será mellor proporcionar distintas versións da imaxe.
    • Para proporcionar distintas versións de densidade dunha imaxe debemos seguir a regra: 3(ldpi):4(mdpi):6x(hdpi):8(xhdpi). Isto é, se collemos como referencia unha imaxe densidade media (mdpi) de tamaño X+Y píxeles, debemos crear novas imaxes que garden a seguinte relación en tamaño (número de píxeles): ldpi(x0.75), mdpi(x1), hdpi(x1,5) e xhdpi(x2).
    • Exemplo se temos unha imaxe de 48x48 píxeles (tamaño dunha icona de lanzamento dunha aplicación) e esta é para unha densidade mdpi, debemos crear versións cos seguintes tamaños en píxeles:
      • ldpi: 36x36
      • mdpi: 48x48
      • hdpi: 72x72
      • xhdpi: 96x96


  • Visto todo o anterior agora volvamos a ver de novo as imaxes onde se usan os píxeles para os tamaños e as posicións:

00 density-test-bad.png

  • E a que usa dp e distintas versións dunha mesma imaxe:

00 density-test-good.png

  • Observar como coinciden para os dous casos na densidade media.
Indicar que para o tamaño das imaxes imos poder facer uso de certos valores que poden axustar o tamaño ao tamaño do contenedor onde se atope a imaxe (como en CSS).




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