Diferencia entre revisiones de «PDM Activities, Layouts e Múltiples pantallas. Introdución»
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 | + | : 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 | + | 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 | + | Image:PDM_screens_ranges_6.jpg| Escribimos 400 na caixa de texto e prememos OK. |
− | Image:PDM_screens_ranges_7.jpg| No Layout de | + | 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 | + | 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 | + | 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
Sumario
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:
Nun punto posterior afondarase sobre as Activities.
- Referencias:
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:
- 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.
- 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
- Máis información neste enlace.
- 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:
- 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:
- 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:
- 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:
- 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):
- 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):
- 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.
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...
- 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:
- E a que usa dp e distintas versións dunha mesma imaxe:
- 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).
- Referencias:
-- Ángel D. Fernández González e Carlos Carrión Álvarez -- (2015).