As classes de tamanho de janela são um conjunto de pontos de interrupção específicos que ajudam a 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. Portanto, a qualquer momento, o app tem duas classes de tamanho de janela: uma para largura e outra para altura. A largura disponível geralmente é mais importante do que a altura disponível devido à onipresença da rolagem vertical. Portanto, a classe de tamanho da janela de largura provavelmente é mais relevante para a interface do app.
Conforme ilustrado nas figuras, os pontos de interrupção permitem que você continue pensando nos 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 grandes 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, as classes de tamanho da janela não são explicitamente determinadas pelo tamanho da tela do dispositivo. As classes de tamanho de janela não se destinam à lógica do tipo isTablet. Em vez disso, as classes de tamanho de janela são determinadas pelo tamanho da janela disponível para o aplicativo, independente do tipo de dispositivo em que o app está sendo executado, o que tem duas implicações importantes:
Os dispositivos físicos não garantem uma classe de tamanho de janela específica. O espaço na tela disponível para o app pode ser diferente do tamanho da tela do dispositivo por vários 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 tamanho diferente, acessadas individualmente ao dobrar ou desdobrar o dispositivo.
A classe de tamanho de janela pode mudar durante todo o ciclo de vida do app.Enquanto ele estiver em execução, a orientação do dispositivo, a multitarefa e o dobramento/desdobramento podem mudar a quantidade de espaço disponível na tela. Como resultado, a classe de tamanho da janela é dinâmica, e a interface do app precisa se adaptar adequadamente.
As classes de tamanho de janela são mapeadas para os pontos de interrupção compactos, médios e expandidos nas orientações de layout do Material Design (link em inglês). Use classes de tamanho de janela para tomar decisões de alto nível sobre o layout do aplicativo, por exemplo, decidir se é necessário usar um layout canônico específico para aproveitar o espaço extra na tela.
You can compute the current
WindowSizeClass
using the
currentWindowAdaptiveInfo
top‑level function of the
androidx.compose.material3.adaptive
library. The following example shows how to calculate the window size class and
receive updates whenever the window size class changes:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Gerenciar layouts com classes de tamanho de janela
As classes de tamanho de janela permitem mudar o layout do app conforme o espaço de exibição disponível para ele muda. Por exemplo, quando um dispositivo é dobrado ou desdobrado, a orientação do dispositivo muda ou a janela do app é redimensionada no modo de várias janelas.
Localize a lógica para processar as mudanças de tamanho de exibição transmitindo as classes de tamanho de janela 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,
/* ... */
)
}
Classes de tamanho de janela de teste
Ao fazer mudanças no layout, teste o comportamento dele em todos os tamanhos de janela, especialmente nas larguras de ponto de interrupção compactas, médias e expandidas.
Se você já tem um layout para telas compactas, primeiro otimize o layout para a classe de tamanho de largura expandida, já que essa classe oferece mais espaço para mais conteúdo e mudanças na interface. Em seguida, decida qual layout faz sentido para a classe de tamanho de largura média. Considere adicionar um layout especializado.
Próximas etapas
Para saber mais sobre como usar classes de tamanho de janela para criar layouts responsivos/adaptáveis, consulte estes recursos:
Para layouts baseados no Compose: Suporte a 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: