Os pixels independentes de densidade (dp) e os pixels escalonáveis (sp) são essenciais para criar layouts e apresentar fontes que respondem de maneira uniforme à ampla variedade de densidades de tela, classes de tamanho, formatos e proporções que compõem os dispositivos Android.
Aprendizados
- Se você estiver usando uma grade de referência, siga as medidas de 4 e 8.
- Anote as especificações em dp e sp, em vez de pixels.
- Exporte gráficos bitmap (raster) para todos os buckets.
- Projete com uma mentalidade responsiva, considerando diferentes classes de tamanho, resoluções e proporções.
- Pixels independentes de densidade (dp): são unidades flexíveis que são dimensionadas para ter dimensões uniformes em qualquer tela. Eles são baseados na densidade física da tela. Essas unidades são relativas a uma tela de 160 pontos por polegada (DPI, na sigla em inglês), em que 1 dp é, aproximadamente, igual a 1 px.
- Pixels escalonáveis (sp): têm a mesma função que dp, mas para fontes. O valor padrão de um sp é o mesmo que o valor padrão de um dp. O sistema Android calcula o tamanho real da fonte a ser usada com base no dispositivo e na preferência do usuário definida nas configurações do dispositivo.
A principal diferença entre essas unidades de medida é que os pixels escalonáveis preservam as configurações de fonte de um usuário. Os usuários que têm configurações de texto maiores para acessibilidade veem tamanhos de fonte que correspondem às preferências de tamanho de texto. Saiba como mudar o tamanho da fonte no Compose.
O Android usa essas unidades para ajudar a dimensionar e traduzir em toda a variedade de dispositivos e resoluções.
Buckets de densidade
Telas de alta densidade têm mais pixels por polegada do que telas de baixa densidade. Como resultado, os elementos da interface com as mesmas dimensões de pixel aparecem maiores em telas de baixa densidade e menores em telas de alta densidade. É por isso que você não deve declarar medidas em pixels.
O Android agrupa intervalos de densidades de tela em "buckets" e os usa para oferecer o conjunto ideal de recursos ao dispositivo. Os buckets de densidade mais usados com frequência são mdpi, hdpi, xhdpi, xxhdpi e xxxhdpi (nodpi e anydpi se referem a um bucket que não é dimensionado por resolução do dispositivo, normalmente usado para drawables de vetor). Cada um corresponde a um arquivo de recursos do seu app.
Para calcular dp:
dp = (largura em pixels * 160) / densidade da tela
Grade de referência
A criação com uma grade subjacente ajuda a criar espaçamento e alinhamento consistentes na interface. A interface do Android usa uma grade de 8 dp para layout, componentes e espaçamento.
Elementos menores, como ícones, tipos e alguns elementos em componentes, são melhor alinhados a uma grade de 4 dp.
Grades de layout
As grades são a base de qualquer layout. Considere a hierarquia, a quantidade e até mesmo a mensagem do conteúdo.
Grade hierárquica
Uma grade hierárquica é criada com a hierarquia ou importância do conteúdo em mente. Pense em um layout de jornal: uma história principal consistente ocupa a maior parte do layout, enquanto uma coluna menor mostra artigos anteriores.
Ao se adaptar a tamanhos de tela, um layout hierárquico pode ser reajustado, redimensionado e revelar células de grade.
Grade modular
Uma grade modular é configurada em colunas e linhas consistentes, criando um sistema de grade retangular para alinhar o conteúdo. As grades modulares funcionam bem para conteúdo com importância e tamanho semelhantes, como uma galeria de cards.
Uma grade modular adaptável pode adicionar mais células de grade, e o conteúdo dentro dela pode ser ajustado ou envolvido em diferentes células de grade. As células de grade podem permanecer consistentes em todos os tamanhos ou ser redimensionadas dependendo das necessidades do conteúdo.
Grade de colunas
As colunas criam uma estrutura de grade para fornecer definição vertical a um layout, dividindo o conteúdo na área do corpo. O conteúdo é colocado nas áreas da tela que contêm colunas. Alinhe com uma grade subjacente para alinhar o conteúdo, mas mantenha o tamanho flexível.
Aprenda o básico sobre como configurar uma grade de colunas e aplicar conteúdo em Noções básicas de layout. A grade de colunas pode acomodar diferentes formatos, mudando os tamanhos e o número de colunas conforme necessário pelo tamanho da tela em determinados pontos, permitindo que o conteúdo também seja dimensionado.
Classes de tamanho
Classes de tamanho de janela são um conjunto de pontos de interrupção específicos de janela de visualização que ajudam você a projetar, desenvolver e testar layouts de aplicativos responsivos e adaptáveis. O Android divide as classes de tamanho de janela em três: compacta, média e expandida. Leia mais sobre classes de tamanho de janela.
Proporções
Uma proporção é a proporção da largura de um elemento para a altura dele. As proporções são escritas como largura:altura.
Para manter a consistência no layout, use uma proporção consistente em elementos como imagens, superfícies e tamanho da tela.
As proporções a seguir são recomendadas para uso na interface:
- 16:9
- 3:2
- 4:3
- 1:1
- 3:4
- 2:3