Como criar apps adaptáveis

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.

Figura 1. O app adaptável otimiza o layout para diferentes tamanhos de janela.

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.

Figura 2. Aviso de qualidade técnica na página de detalhes do app.

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.

Representação das classes de tamanho de janela com largura compacta, média e expandida.
Figura 3. Classes de tamanho de janela com base na largura da tela.

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
AdaptiveLayoutSnippets.kt

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.

Telas de dispositivos divididas em painéis: um painel em classes de tamanho de janela compacta e média e dois painéis na classe de tamanho de janela expandida.
Figura 4. Número de painéis de conteúdo por classe de tamanho de janela.

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

Figura 5. Layout de detalhes e listas com painel de lista como destino de navegação.
Figura 6. Layout de detalhes e listas com painel de detalhes como destino de navegação.

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.

Figura 7. Dispositivo dobrável na posição de mesa.

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 componente TextField 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