Esqueleto do aplicativo para suportar várias telas


92

Como sabemos, o Android vem com vários dispositivos que possuem diferentes recursos, resolução e tamanho de tela, então, ao desenvolver um aplicativo que suporta várias telas (pequenas e grandes), há um obstáculo de tamanho e layout.

Isso leva a diferentes combinações de tamanhos de tela, resoluções e DPIs e cria um grande desafio ao projetar e desenvolver para dispositivos Android. Embora alguns outros fabricantes (não Android) tenham resoluções e DPI diferentes, eles compartilham o mesmo tamanho de tela e as resoluções seguem a mesma proporção. Portanto, uma imagem pode ser criada para caber em dispositivos não Android.

Minha pergunta é se existe um fluxo ou arquitetura adequada que se deve seguir para atender aos requisitos?

insira a descrição da imagem aqui

Lembre-se de que temos tablets de tamanhos e resoluções diferentes.

Estou ciente de que o Android Developer contém essas informações, mas minha visão é da implementação.

Do meu conhecimento, o que entendi é que, para projetar gráficos Android, até o programador deve conhecer o conceito de design.


13
Vocês têm certeza de que esta pergunta não é construtiva?
Mohammed Azharuddin Shaikh

6
Eu acho muito construtivo. Gostaria de saber as razões dos votos negativos.
Lazy Ninja

11
@MKJParekh take MicroMax Funbook gsmarena.com/micromax_funbook_p300-4701.php 7", 480X800, Ldpi (133 dpi) você pode me dizer em qual categoria (drawble-large ou Ldpi ou se Android v3.0 sw-480) ele vai cair?
Mohammed Azharuddin Shaikh

1
@LazyNinja o motivo dos votos negativos são os lunáticos e malucos. Quem pensa que só pode fazer perguntas construtivas: p
AZ_

1
@AZ_ :) Usamos esta estrutura res na pasta res drawable-hdpi drawable-hdpi-v11 drawable-hdpi-v9 drawable-large drawable-large-hdpi drawable-ldpi drawable-mdpi drawable-mdpi-v11 drawable-small drawable- xhdpi drawable-xhdpi-v11 drawable-xxhdpi drawable-xxhdpi-v11 layout layout-small layout-sw530dp layout-sw720dp layout-xlarge values ​​values-sw530dp values-sw720dp values-v14 values-xlarge e dimensões bem definidas usadas em xml da pasta de valores . FYKI nosso aplicativo suporta mais de 5k tipos de dispositivos.
MKJParekh de

Respostas:


147

Finalmente criei uma estrutura que manipula layouts e ícones para telas múltiplas.

O Android generaliza as telas do dispositivo em categorias com base em dois parâmetros:

  • Tamanho da tela, o tamanho físico da tela (medido na diagonal)
  • Densidade da tela, a densidade física de pixels da tela (em pixels por polegada ou ppi) `

Para determinar o tamanho e a densidade da tela rapidamente, instale o aplicativo " Qual é o meu tamanho " para Android.

Tamanho da tela

O Android define quatro tamanhos de tela generalizados:


 Qualifier           Size

 small               ~3 inches (approx) 
 normal              ~4 inches (approx) 
 large               Exceeds 4 inches    
 xlarge              Exceeds 7 inches  
  • A maioria dos telefones é classificada como pequena ou normal (cerca de 3 a 4 polegadas na diagonal). Mas agora, existem muitos telefones com tela grande, como Galaxy S4, HTC One, Xperia Z
  • Um pequeno tablet como o Samsung Galaxy Tab é classificado como grande (maior que 4 polegadas)
  • Extra-grande se aplica a dispositivos grandes, por exemplo, tablets grandes

O Android define quatro densidades de tela generalizadas:


 Qualifier         Description         Nominal value

 ldpi              low density          120 ppi
 mdpi              medium density       160 ppi
 hdpi              high density         240 ppi
 xhdpi             extra high density   320 ppi

Tipicamente:

  • o tamanho da tela tem maior impacto nos layouts do seu aplicativo
  • a densidade da tela tem maior impacto em sua imagem e recursos gráficos

Está listado aqui a diferença percentual da tela do dispositivo

  • Ldpi- 75%
  • Mdpi- 100% (base de acordo com o site do desenvolvedor Android)
  • Hdpi- 150%
  • XHdpi- 200%

insira a descrição da imagem aqui

Mas, como sabemos agora, a maioria dos dispositivos vem com 480X800, então considero isso como um dispositivo baseado, então nosso novo cálculo será assim

  • Ldpi- 50%
  • Mdpi- 66,67%
  • HDpi- 100%
  • XHdpi- 133,33%

o que significa que o primeiro ícone e design serão criados apenas para 480X800 e depois para os restantes (ou seja, Ldpi, Mdpi, Xhdpi).

Existem imagens que são comuns a todos os layouts e devem ser uniformes em cor e formato (sem forma complexa, sem curva), portanto, para este tipo de imagem estamos criando 9patchpara ser colocada na pasta “drawable (sem sufixo)”. Para criar a imagem 9Patch, você pode usar DrawNinePatch ou BetterNinePatch

Agora é só renomear suas imagens com base nos padrões do Android e completar seu aplicativo com hdpie depois pegar a drawable-hdpipasta e abrir o Adode Photoshop (recomendado) criar ação de vários tamanhos (basta alterar o tamanho de acordo com a proporção de porcentagem) uma vez que a ação foi criada para todos os tamanhos, então basta fazer Automatize em lote e forneça a origem (drawable-hdpi) e o destino (drawable-ldpi, drawable-mdpi, drawable-xdpi).

A razão pela qual insisto que você use o Photoshop porque ele irá redimensionar automaticamente sua imagem com Actions e mais um ponto positivo é que você não precisa renomear o arquivo (ele atribuirá o mesmo nome do original).

depois de concluir a criação de todas as imagens, atualize seu projeto e teste-o.

Às vezes, pode haver a possibilidade de que o layout que suporta a tela (xhdpi, hdpi, mdpi) seja cortado em uma tela pequena (ldpi), portanto, para lidar com isso, basta criar uma pasta Layout separada (layout-small) para ele e adicionar ScrollView(principalmente). É isso aí.

Comprimidos Os comprimidos são classificados em dois tamanhos.

  1. 7 "(1024X (600-48 (barra de navegação))) = 1024X552 (extraível grande)
  2. 10 "(1280X (800-48 (barra de navegação))) = 1280X752 (drawable-xlarge)

Para isso, precisamos criar imagens para a tela e colocá-las de acordo

Portanto, em suma, teremos essa pasta em nosso aplicativo para suportar várias telas.

drawable
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-large
drawable-xlarge

será mais combinação de qualificador com Screen size and Screen density

drawable-large-ldpi
drawable-large-mdpi
drawable-large-hdpi
drawable-large-xhdpi

mais qualificador com Screen density and Version

drawable-ldpi-v11
drawable-mdpi-v11
drawable-hdpi-v11
drawable-xhdpi-v11

e mais qualificador com Screen size and Version

drawable-large-v11
drawable-xlarge-v11

e mais qualificador com Smallest width concept(SW)

 drawable-sw???dp

Além disso, no Android V3.0 Honeycomb, eles introduziram um novo conceito SW(smallest width)em que os dispositivos são categorizados na largura da tela, então, se estivermos criando uma pasta chamada drawable-sw360dp, o dispositivo com 720dp (largura ou altura) usará os recursos desta pasta.

por exemplo, para encontrar o Samsung Galaxy S3 dp para sufixo para drawable-sw? dp
Com referência ao cálculo DP , se você deseja apoiar seu layout ou drawable para S3, então o cálculo diz

px = largura do dispositivo = 720
dpi = densidade do dispositivo = 320

fórmula dada

    px = dp * (dpi / 160)

trocando fórmula porque temos o valor de px

    dp = px / (dpi / 160)

agora colocando valor,

     dp= 720 / (320/160);
     dp=360. 

então drawable-sw360dpfará o trabalho

Obtenha a configuração do dispositivo do GsmArena Sameway. Você também pode criar uma pasta de acordo com a versão da API do Android do dispositivo, ou seja, drawable-hdpi-v11`, então o dispositivo que está tendo API11 e é Hdpi então usará esses recursos.

Dicas adicionais:

  • Use layouts relativos, dp, sp e mm

    unidades dp - pixels independentes de dispositivo normalizados para 1 pixel físico em uma tela de 160 ppi, ou seja, densidade média. Escalonado em tempo de execução. Use para dimensões de elemento de tela

    unidades sp - pixels dimensionados, especificados como valores de ponto flutuante, com base em unidades dp, mas dimensionados adicionalmente para a configuração de preferência de tamanho de fonte do usuário. Escalonado em tempo de execução. Use para tamanhos de fonte

    você deve sempre usar RelativeLayout para layouts; AbsoluteLayout está obsoleto e não deve ser usado.

  • Use formatos de imagem apropriados - PNG versus JPEG

    Android "prefers" PNG for bitmap image files, "accepts" JPEG, and "discourages" GIF.

    No entanto, PNG e JPEG não são equivalentes. Eles têm diferentes compromissos de qualidade e PNG nem sempre é o melhor:

    JPEG pode oferecer até 50% de redução no tamanho do arquivo em relação ao PNG, o que é significativo se o seu aplicativo fizer uso intensivo de imagens

    Um JPEG com "perdas" de qualidade superior pode parecer melhor do que um PNG "sem perdas" altamente compactado, para o mesmo tamanho de arquivo

  • Adicione rótulos às suas imagens e gráficos para depuração

  • Use o elemento suportes-telas

  • Configure seus emuladores com valores reais de dispositivos

    Convencionalmente, os sistemas de desktop exibem 72ppi (Mac) ou 96ppi (Windows, Linux). Em comparação com o celular, as telas de desktop são sempre de baixa densidade.

    Sempre configure seus emuladores Android para imitar os valores reais do dispositivo e sempre os configure para dimensionar para emular a densidade do dispositivo.

    No Eclipse, é fácil criar vários emuladores (na barra de menus do Eclipse, selecione Window> AVD Manager> New ) configurados com valores para dispositivos reais:

    Nomeie o emulador para o dispositivo real que está emulando Especifique resolução, não use tamanhos genéricos integrados Defina a densidade do dispositivo para corresponder ao dispositivo real (no painel Hardware, defina a propriedade LCD abstraída para a densidade real, sempre um valor inteiro)

    Ao iniciar o dispositivo, sempre selecione Ajustar a exibição ao tamanho real e digite a dimensão real da tela em polegadas.

    Se você não definir a densidade do dispositivo, o emulador padroniza para densidade baixa e sempre carrega recursos específicos do ldpi. A resolução (dimensões em pixels) estará correta, mas seus recursos de imagem dependentes de densidade não serão exibidos como pretendido.

    Obviamente, nada que você fizer irá reproduzir a qualidade de imagem de alta densidade em uma tela de desktop de densidade mais baixa.

Aqui estão os dados coletados durante um período de 7 dias encerrado em 1º de outubro de 2012. Para ver as estatísticas mais recentes sobre a versão da plataforma Android, acesse aqui

Com base no tamanho da tela

insira a descrição da imagem aqui

Com base na densidade da tela

insira a descrição da imagem aqui


2
Para samsung galaxy tab 7 ", temos que manter as imagens em drawable-large-hdpi, caso contrário, a imagem será esticada ou
reduzida

@rajpara há muitas combinações e permutações, incluiremos todos esses casos mais tarde.
Mohammed Azharuddin Shaikh

1
veja @AlexBonel, sim. Concordo com você, mas meu lema principal é alertar sobre como as coisas podem ser feitas no que diz respeito ao suporte Multi-screen. Pode-se modificar / manipular este fluxo / conceito porque o acima é para esclarecer o problema inicial. Além disso, eu também faço modificações com base no design do aplicativo. Sua postagem me deu a sensação de que você entendeu o conceito. Espero que você tenha entendido meu ponto.
Mohammed Azharuddin Shaikh

1
Boa resposta. Depois de pesquisar muito e por tantos dias porque essas exceções acontecem, obtive este post como a melhor resposta com ótimo exemplo e explicação. por exemplo, considere o tablet Halo Value de 7 polegadas. PPI = 133. Resolução = 480 * 800. Tamanho = 7 'polegadas. Se considerarmos o mdpi como base, ele deve assumir a dimensão definida em values-sw480, mas está assumindo a dimensão de values-sw600. Não entendi por que isso está acontecendo. Muito obrigado por sua postagem. Economize tempo perdido e elimine a confusão. Eu acho que isso deveria estar no site oficial do Android. Agradeço o seu esforço.
Smeet de

1
Acho que essa é a melhor resposta que já vi. Estou procurando essa resposta há muito tempo. E finalmente entendi. Obrigado a todos por contribuírem para esta resposta para torná-la mais compreensível.
Hiren Dixit

1

Os designers devem criar designs básicos de

base size of mdpi devices * density conversion factor of highest supported density bucket
size.O tamanho da tela de base é 320 X 480 px e os intervalos de densidade são os seguintes:

  • ldpi: 0,75
  • mdpi: 1,0 (densidade de base)
  • hdpi: 1,5
  • xhdpi: 2.0
  • xxhdpi: 3.0
  • xxxhdpi: 4.0

E para lidar com o espaço extra disponível em dispositivos Android, deve-se usar componentes extensíveis em ambas as direções (horizontal e verticalmente). Informações detalhadas estão disponíveis aqui:

http://vinsol.com/blog/2014/11/20/tips-for-designers-from-a-developer/

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.