Mais de 300 milhões de dispositivos Android de tela grande, incluindo tablets, dobráveis, dispositivos ChromeOS, telas de carros e TVs, estão em uso hoje, além de muitos outros. vindo continuamente. Para oferecer uma experiência de usuário ideal no número crescente e a diversidade de dispositivos de tela grande, como assim como em smartphones padrão (build e apps adaptáveis.
O que são apps adaptáveis?
Os apps adaptáveis reformulam layouts com base em mudanças na tela, principalmente mudanças no tamanho da janela do app. No entanto, os apps adaptáveis também acomodam mudanças na posição de dispositivos dobráveis, como a posição de mesa ou livro, e mudanças na densidade da tela e no tamanho da fonte.
Em vez de apenas esticar ou encolher elementos da interface em resposta a diferentes tamanhos de janela, os apps adaptáveis substituem componentes de layout e mostram ou ocultam conteúdo. Por exemplo, em smartphones padrão, um app adaptável pode mostrar uma parte de baixo mas, em telas grandes, uma coluna de navegação. Em telas grandes, os apps adaptáveis mostram mais conteúdo, como um layout de detalhes e listas de dois painéis; ativado telas pequenas, menos conteúdo, a lista ou os detalhes.
No passado que se esmaece rapidamente e focado em smartphones, os apps eram executados em tela cheia. Hoje, os apps são executados Modo de várias janelas em janelas dimensionadas arbitrariamente, independentemente da tela do dispositivo tamanho. Os usuários podem mudar o tamanho da janela a qualquer momento. Assim, mesmo em um único dispositivo tipo, os apps precisam ser adaptáveis.
Os apps adaptáveis têm uma ótima aparência e funcionam bem em qualquer dispositivo e configuração.
Por que criar IUs adaptáveis?
Os usuários esperam que seu app funcione perfeitamente em todos os dispositivos e ofereçam recursos aprimorados em telas grandes. Os usuários realizam várias tarefas no modo de várias janelas por uma experiência de aplicativo aprimorada e maior produtividade.
Os apps limitados a uma única tarefa em smartphones padrão não atraem mais usuários. com diversas possibilidades.
Google Play
O Google Play oferece coleções de apps específicos para tablets e dobráveis e recomendações, que permitem aos usuários descobrir apps de alta qualidade.
O Google Play classifica apps e jogos otimizados para telas grandes mais acima do que os não otimizados apps. A classificação é baseada nas diretrizes de qualidade de apps para telas grandes. Alta a classificação aumenta a capacidade de descoberta ao permitir que usuários de vários dispositivos vejam com classificações e resenhas específicas para telas grandes nos smartphones.
Os apps que não atendem aos padrões de qualidade para telas grandes da Play Store mostram uma na página de detalhes do app. O aviso informa aos usuários que o app pode não funcionam bem em dispositivos de tela grande.
Crie apps adaptáveis para aumentar a descoberta no Google Play e maximizar o o número de dispositivos que podem fazer o download do seu app.
Como começar
Pense no design adaptável em todas as fases do desenvolvimento de apps, do planejamento ao implantação do Google Workspace. Informar os designers gráficos sobre o design adaptável. Projete seu app para ser adaptável, e você criará um aplicativo que é gerenciável, extensível e pronto para futuros formatos e modos de janelamento.
Para criar um app adaptável que ofereça suporte a todos os tamanhos e configurações de tela, faça o seguinte: o seguinte:
- Usar classes de tamanho de janela para tomar decisões de layout
- Criar com a biblioteca adaptativa do Compose Material 3
- Suporte à entrada além do toque
- Testar em todos os tipos de dispositivos
Classes de tamanho de janela
As dimensões da janela do app podem ser diferentes em dispositivos diferentes ou no mesmo no caso de dobráveis, mesmo quando o app está em tela cheia. Diferentes orientações do dispositivo produzem diferentes proporções. Em o modo de várias janelas, o tamanho da janela do app, a proporção e a orientação podem, diferente da tela do dispositivo.
Os apps adaptáveis simplificam e generalizam o problema de determinar e gerenciar tamanho da janela, proporção e orientação considerando apenas a janela do app. ao renderizar layouts, que também funciona quando a janela do app está em tela cheia.
As classes de tamanho de janela categorizam as janelas de apps como compactas, médias ou expandido com base na largura ou altura da janela.
Calcule os WindowSizeClass
do app usando o
Função de nível superior currentWindowAdaptiveInfo()
do Compose
Biblioteca adaptativa do Material 3. A função retorna uma instância de
WindowAdaptiveInfo
, que contém windowSizeClass
. Seu app
recebe atualizações sempre que a classe de tamanho de janela muda:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Painéis de conteúdo
O layout de uma atividade às vezes é chamado de tela. Por exemplo, seu pode ter uma tela inicial, uma tela de lista e uma tela de detalhes de item. O a terminologia implica que cada atividade preenche a tela do dispositivo.
No entanto, em telas de dispositivos grandes o suficiente para oferecer suporte à largura expandida classe de tamanho de janela, várias telas de atividade podem aparecer na tela ao mesmo tempo. Painel é um termo mais preciso para a exibição de conteúdo de atividades individuais.
As classes de tamanho de janela permitem determinar em quantos painéis de conteúdo mostrar layouts de vários painéis, conforme especificado no Material Design.
É possível navegar pelos painéis. Em classes de tamanho de janela compacta e média, os apps mostram uma painel único Assim, a navegação para qualquer destino mostra um painel.
Na classe de tamanho de janela expandida, os apps podem mostrar conteúdo relacionado em várias painéis, como um layout de detalhes e listas. A navegação para qualquer um dos painéis é exibida o layout de dois painéis. Se o tamanho da janela mudar para compacto ou médio, os apps adaptáveis mostram apenas um painel: o destino da navegação, a lista ou os detalhes.
Adaptável do Compose Material 3
O Jetpack Compose é uma abordagem moderna e declarativa para a criação de apps adaptáveis. sem a carga de duplicação e manutenção de vários arquivos de layout.
A biblioteca adaptativa do Compose Material 3 contém elementos combináveis que gerenciam classes de tamanho de janela, componentes de navegação, layouts de vários painéis e posições dobráveis e localização das articulações, por exemplo:
NavigationSuiteScaffold
: alterna automaticamente entre a barra de navegação e da coluna de navegação, dependendo da classe de tamanho da janela do app e da posição do dispositivo.ListDetailPaneScaffold
: implementa o canônico de detalhes e listas do Terraform.Adapta o layout ao tamanho da janela do app. Apresenta uma lista e os detalhes dos um item de lista em painéis lado a lado no tamanho da janela expandida mas somente a lista ou os detalhes no tamanho compacto e médio de janela classes.
SupportingPaneScaffold
: implementa o painel de suporte canônico do Terraform.Apresenta o painel de conteúdo principal e um painel de suporte na janela expandida classe de tamanho, mas apenas o painel de conteúdo principal em janelas de tamanho compacto e médio classes.
A biblioteca adaptativa do Compose Material 3 é uma dependência essencial para no desenvolvimento de apps adaptáveis.
Configuração e continuidade
Apps adaptáveis retêm continuidade durante mudanças de configuração.
Uma mudança de configuração ocorre quando a janela do app é redimensionada, a posição de uma mudanças dobráveis, densidade da tela ou mudanças de fonte.
Por padrão, as mudanças de configuração recriam a atividade no app e todas as atividades
quando o estado é perdido. Para manter a continuidade, os apps adaptáveis salvam o estado na
método onSaveInstanceState()
da atividade ou em um ViewModel
.
Postura
Apps adaptáveis respondem a mudanças na posição de dispositivos dobráveis. Posturas incluem as posturas de mesa e livro.
A interface WindowInfoTracker
na Jetpack WindowManager permite que você faça o seguinte:
acessar uma lista de objetos DisplayFeature
para o dispositivo. Entre os
recursos é FoldingFeature.State
, que indica se o dispositivo está
totalmente ou meio aberto.
A biblioteca adaptativa do Compose Material 3 oferece a
currentWindowAdaptiveInfo()
, que retorna uma função de nível superior.
instância de WindowAdaptiveInfo
contendo windowPosture
.
Entrada além do toque
Os usuários geralmente conectam teclados, trackpads, mouses e styluses externos a dispositivos e dispositivos de tela. Os periféricos melhoram a produtividade do usuário, a precisão das entradas expressão pessoal e acessibilidade. A maioria dos dispositivos ChromeOS vem com teclados e trackpads integrados.
Os apps adaptáveis têm suporte a dispositivos de entrada externa, mas a maior parte do trabalho é feita para pela estrutura do Android:
Jetpack Compose 1.7 e versões mais recentes: navegação com a guia do teclado e mouse ou Por padrão, há suporte para clicar, selecionar e rolar do trackpad.
Biblioteca
androidx.compose.material3
do Jetpack: permite que os usuários criem arquivos em qualquer componenteTextField
usando uma stylus.Auxiliar de atalhos de teclado: torna a plataforma Android e o teclado de apps Android mais úteis. atalhos descobertos pelos usuários. Publique os atalhos de teclado do seu app em Auxiliar de atalhos de teclado substituindo a Callback da janela
onProvideKeyboardShortcuts()
.
Para oferecer suporte total a formatos de todos os tamanhos, os apps adaptáveis aceitam entradas de todos tipos
Como testar apps adaptáveis
Teste diferentes tamanhos de tela e janela e configurações de dispositivos diferentes. Use capturas de tela do host e visualizações do Compose para verificar os layouts do app. Executar o app em emuladores do Android Studio e dispositivos Android remotos hospedados em data centers do Google.
Diretrizes de qualidade de apps para telas grandes
As diretrizes de qualidade de apps para telas grandes garantem que seu app adaptável funcione bem em tablets, dobráveis e dispositivos ChromeOS. As diretrizes incluem testes que permitem verificar a funcionalidade do app para jornadas ideais do usuário. Embora o diretrizes se concentram em telas grandes, elas são compatíveis com todos os tamanhos de tela.
Várias configurações
A interface DeviceConfigurationOverride
no Compose 1.7 e versões mais recentes.
permite substituir vários aspectos da configuração do dispositivo. A API
simula diferentes configurações de dispositivos de maneira localizada para qualquer
o conteúdo combinável que você quer testar. Por exemplo, é possível testar várias
tamanhos arbitrários de IU em uma única execução do seu pacote de testes em um único dispositivo ou
emulador.
Com a função de extensão DeviceConfigurationOverride.then()
, é possível:
testar vários parâmetros de configuração, como tamanho da fonte, localidade, tema e
e o tamanho do layout, todos ao mesmo tempo.
Capturas de tela do host
Os testes de captura de tela no lado do host são uma maneira rápida e escalonável de verificar a a aparência dos layouts do seu app. Use capturas de tela do host para testar se a interface vários tamanhos de tela.
Para mais informações, consulte Teste de captura de tela da visualização do Compose.
Visualizações do Compose
As visualizações do Compose permitem verificar a interface do app na visualização de design do Android.
Estúdio. As visualizações usam anotações, como @PreviewScreenSizes
,
@PreviewFontScale
e @PreviewLightDark
para permitir que você veja o elemento combinável
conteúdo em diversas configurações. Dá até para interagir com as prévias.
O Android Studio também destaca problemas comuns de usabilidade em visualizações, como botões ou campos de texto muito largos.
Para saber mais, consulte Visualizar a interface com visualizações combináveis.
Emuladores
O Android Studio oferece diversos emuladores para testar diferentes tamanhos de layout:
- Emulador redimensionável: emula um smartphone, tablet ou dispositivo dobrável e permite alterna entre elas rapidamente
- Emulador do Pixel Fold: emula o smartphone dobrável de tela grande do Pixel Fold
- Emulador do Pixel Tablet: emula o dispositivo de tela grande do Pixel Tablet
- Emulador de área de trabalho: permite testar janelas em formato livre, passar o mouse e atalhos do teclado
Streaming de dispositivo remoto
Conecte-se com segurança a dispositivos Android remotos hospedados nos data centers do Google e execute seu app nos dispositivos Pixel e Samsung mais recentes. Instale e depure apps, execute comandos adb, bem como girar e dobrar dispositivos para garantir que seu app funcione bem em um uma variedade de dispositivos reais.
O streaming de dispositivos remotos está integrado ao Android Studio. Para mais informações, consulte Streaming de dispositivos Android, com a tecnologia do Firebase.
Outros recursos
- Apresentação I/O: Como criar apps Android adaptáveis