As classes de tamanho de janela são um conjunto de pontos de interrupção específicos da janela de visualização que ajudam você projetar, desenvolver e testar layouts responsivos/adaptáveis. Os pontos de interrupção equilibram a simplicidade do layout com a flexibilidade de otimizar o app para casos únicos.
As classes de tamanho de janela categorizam a área de exibição disponível para o app como compacta, média ou expandida. A largura e a altura disponíveis são classificadas separadamente, para que, a qualquer momento, o app tenha dois tamanhos de janela classes, uma para largura e outra para altura. A largura disponível geralmente é maior importante que a altura disponível devido à onipresença da rolagem vertical, então a classe de tamanho de janela para a largura provavelmente é mais relevante para a interface do usuário do seu app.
Conforme visualizado nas figuras, os pontos de interrupção permitem que você continue pensando sobre layouts em termos de dispositivos e configurações. Cada ponto de interrupção de classe de tamanho representa um caso majoritário para cenários de dispositivos típicos, que podem ser uma referência útil enquanto você pensa sobre o design dos seus layouts baseados em pontos de interrupção.
| Classe de tamanho | Ponto de interrupção | Representação do dispositivo |
|---|---|---|
| Largura compacta | largura < 600 dp | 99,96% dos smartphones no modo retrato |
| Largura média | 600 dp ≤ largura < 840 dp | 93,73% dos tablets no modo retrato
a maioria das telas internas desdobradas no modo retrato |
| Largura expandida | largura ≥ 840 dp | 97,22% dos tablets no modo paisagem
a maioria das telas internas desdobradas no modo paisagem |
| Altura compacta | altura < 480 dp | 99,78% dos smartphones no modo paisagem |
| Altura média | 480 dp ≤ altura < 900 dp | 96,56% dos tablets no modo paisagem
97,59% de smartphones no modo retrato |
| Altura expandida | altura ≥ 900 dp | 94,25% de tablets no modo retrato |
Embora visualizar classes de tamanho como dispositivos físicos possa ser útil, o tamanho da janela não são determinadas explicitamente pelo tamanho da tela do dispositivo. Janela As classes de tamanho não se destinam à lógica do tipo isTablet. Em vez disso, a janela As classes de tamanho são determinadas pelo tamanho da janela disponível para o aplicativo independentemente do tipo de dispositivo em que o app está sendo executado, que tem duas funções implicações:
Os dispositivos físicos não garantem uma classe de tamanho de janela específica. O o espaço na tela disponível para o app pode ser diferente do tamanho da tela do dispositivo por diversos motivos. Em dispositivos móveis, o modo de tela dividida pode particionar a tela entre dois aplicativos. No ChromeOS, os apps Android podem: ser apresentados em janelas de formato livre e redimensionáveis arbitrariamente. Os dobráveis podem ter duas telas de tamanhos diferentes acessadas individualmente dobrando ou desdobrando o dispositivo.
A classe de tamanho de janela pode mudar durante o ciclo de vida do app. Enquanto o app está em execução, a orientação do dispositivo muda, é multitarefa e dobrar/desdobrar pode alterar a quantidade de espaço disponível na tela. Como a classe de tamanho de janela é dinâmica e a interface do app precisa se adaptar de acordo.
As classes de tamanho de janela mapeiam para os pontos de interrupção compactos, médios e expandidos na Layout do Material Design e orientações on-line. Use classes de tamanho de janela para tomar decisões de layout de aplicativo de alto nível, como decidir usar um layout canônico específico para aproveitar mais espaço na tela.
Calcule a classe WindowSizeClass atual usando a
currentWindowAdaptiveInfo() função de nível superior do
biblioteca androidx.compose.material3.adaptive. A função retorna um
instância de WindowAdaptiveInfo, que contém windowSizeClass. O
o exemplo a seguir mostra como calcular a classe de tamanho de janela e receber
é atualizado sempre que a classe de tamanho da janela muda:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Gerenciar layouts com classes de tamanho de janela
As classes de tamanho de janela permitem mudar o layout do app como o espaço de exibição disponível para o app muda, por exemplo, quando um dispositivo é dobrado ou aberto, a orientação do dispositivo mudar ou a janela do app for redimensionada em várias janelas. modo
Localize a lógica para lidar com mudanças de tamanho de exibição transmitindo o tamanho da janela classes como estado para elementos combináveis aninhados, assim como qualquer outro estado do app:
@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyApp(
windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
) {
// Perform logic on the size class to decide whether to show the top app bar.
val showTopAppBar = windowSizeClass.windowHeightSizeClass != WindowHeightSizeClass.COMPACT
// MyScreen knows nothing about window sizes, and performs logic based on a Boolean flag.
MyScreen(
showTopAppBar = showTopAppBar,
/* ... */
)
}
Testar classes de tamanho de janela
À medida que você faz mudanças no layout, teste o comportamento dele em todos os tamanhos de janela, especialmente nas larguras compactas, médias e expandidas dos pontos de interrupção.
Se você já tem um layout para telas compactas, primeiro otimize-o para a classe de tamanho de largura expandida, já que essa classe de tamanho fornece mais espaço para ver mais conteúdo e alterações na interface. Em seguida, decida qual layout faz sentido para a classe de tamanho com largura média, considere adicionar um layout especializado.
Próximas etapas
Para saber mais sobre como usar classes de tamanho de janela para criar modelos responsivos/adaptáveis. layouts, consulte o seguinte:
Para layouts baseados no Compose: Suporte para tamanhos de tela diferentes
Para layouts baseados em visualização: Design responsivo/adaptável com visualizações
Para saber mais sobre o que faz um app funcionar bem em todos os dispositivos e tamanhos de tela, consulte: