PDM Activities, Layouts e Múltiples pantallas. Introdución

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

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:



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


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).
  • Densidade de pantalla (Screen density): puntos por pulgada (ppp / (dot per inch (dpi))). Unha pantalla de baixa resolución terá poucos dpis 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.



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.




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.



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).
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 ppp ?
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.




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


Nota importante:

  • No caso das imaxes, debemos sempre empregar unidades en dp para o seu tamaño.
  • No caso dos texto, debemos sempre empregar unidades en sp para o seu tamaño.


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


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




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