Seu app deve funcionar bem em dispositivos Wear OS de todos os tamanhos, aproveitando espaço adicional, quando disponível, e ainda têm uma ótima aparência em telas menores. Este guia fornece recomendações para alcançar essa experiência do usuário.
Para saber mais sobre os princípios de design para layouts adaptáveis, leia a orientações de design.
Criar layouts responsivos usando o Horologist
Os layouts precisam ter margens baseadas em porcentagem. Como o Compose funciona padrão em valores absolutos, use componentes do Biblioteca Horologist, que tem as seguintes funcionalidades:
- As margens horizontais são definidas corretamente com base em uma porcentagem da tela do dispositivo. tamanho.
- O espaçamento superior e inferior foi definido corretamente. Isso apresenta desafios específicos
pois o espaçamento recomendado entre as partes superior e inferior
depende dos componentes sendo
usados. Por exemplo, uma
Chip
precisa ter um espaçamento diferente para umaText
. quando usado em uma lista. - As margens do
TimeText
foram definidas corretamente.
O snippet de código a seguir usa a versão do Horologist da
Layout ScalingLazyColumn
para criar conteúdo com ótima aparência em vários tipos
dos tamanhos de tela do Wear OS:
val columnState = rememberResponsiveColumnState( contentPadding = ScalingLazyColumnDefaults.padding( first = ScalingLazyColumnDefaults.ItemType.Text, last = ScalingLazyColumnDefaults.ItemType.SingleButton ) ) ScreenScaffold(scrollState = columnState) { ScalingLazyColumn( columnState = columnState ) { item { ResponsiveListHeader(contentPadding = firstItemPadding()) { Text(text = "Header") } } // ... other items item { Button( imageVector = Icons.Default.Build, contentDescription = "Example Button", onClick = { } ) } } }
Este exemplo também demonstra ScreenScaffold
e AppScaffold
.
Elas coordenam entre o app e as telas individuais
(rotas de navegação) para garantir o comportamento de rolagem correto e
Posicionamento de TimeText
.
Para o padding superior e inferior, observe também o seguinte:
- A especificação do primeiro e do último
ItemType
para determinar padding. - O uso de
ResponsiveListHeader
para o primeiro item na lista, porque Os cabeçalhosText
não podem ter padding.
As especificações completas podem ser encontradas nos kits de design do Figma. Para mais detalhes e exemplos, consulte:
- A biblioteca Horologist (link em inglês) fornece componentes para ajudar a criar apps otimizados e diferenciados para o Wear OS.
- O exemplo do ComposeStarter (em inglês): um exemplo que mostra a descritos neste guia.
- O exemplo do JetCaster: um exemplo mais complexo da criação de um para funcionar com diferentes tamanhos de tela, usando a biblioteca Horologist.
Usar layouts de rolagem no app
Usar um layout de rolagem, conforme mostrado anteriormente nesta página, como a escolha padrão. ao implementar suas telas. Isso permite que os usuários alcancem os componentes do seu app independente das preferências de exibição ou do tamanho da tela do dispositivo Wear OS.
![O efeito de diferentes tamanhos de dispositivo e dimensionamento de fonte](https://developer.android.google.cn/static/images/wear/screenshot-test.png?authuser=19&hl=pt-br)
O efeito de diferentes tamanhos de dispositivo e o dimensionamento de fontes.
Caixas de diálogo
As caixas de diálogo também precisam ser roláveis, a menos que haja um bom motivo para não fazer isso.
O componente ResponsiveDialog
, fornecido pelo Horologist, adiciona o
seguinte:
- Rolagem por padrão.
- Corrigir margens baseadas em porcentagem.
- Botões que ajustam a largura onde houver espaço, para oferecer maior áreas de toque.
![Comportamento adaptável de diálogo no Horologist](https://developer.android.google.cn/static/images/wear/adaptive-dialogs.png?authuser=19&hl=pt-br)
Caixas de diálogo responsivas, oferecendo rolagem por padrão e botões que se adaptam para o espaço disponível.
As telas personalizadas podem exigir layouts sem rolagem
Algumas telas ainda podem ser adequadas para layouts sem rolagem. Vários exemplos incluem a tela do player principal em um app de música e a tela de treino em um de condicionamento físico.
Nesses casos, consulte as orientações canônicas fornecidas no Kits de design do Figma e implementar um design responsivo ao tamanho da tela, usando as margens corretas.
Ofereça experiências diferenciadas usando pontos de interrupção
Em telas maiores, você pode incluir mais conteúdos e recursos. Para implementar esse tipo de experiência diferenciada, use pontos de interrupção de tamanho da tela, exibição de um layout diferente quando o tamanho da tela exceder 225 dp:
const val LARGE_DISPLAY_BREAKPOINT = 225 @Composable fun isLargeDisplay() = LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT // ... // ... use in your Composables: if (isLargeDisplay()) { // Show additional content. } else { // Show content only for smaller displays. } // ...
As orientações de design ilustram mais essas oportunidades.
Testar combinações de tamanhos de tela e fonte usando visualizações
As visualizações do Compose ajudam você a desenvolver para vários tamanhos de tela do Wear OS. Use as definições de dispositivos e de visualização do dimensionamento de fonte para ver o seguinte:
- A aparência das telas nos limites de tamanho, por exemplo, fonte maior pareados com a menor tela.
- Como sua experiência diferenciada se comporta nos pontos de interrupção.
Implemente visualizações usando WearPreviewDevices
e
WearPreviewFontScales
para todas as telas do seu app.
@WearPreviewDevices @WearPreviewFontScales @Composable fun ComposeListPreview() { ComposeList() }
Teste de captura de tela
Além dos testes de visualização, os testes de captura de tela permitem testar em uma variedade de dos tamanhos de hardware existentes. Isso é particularmente útil quando esses dispositivos podem ficará disponível para você imediatamente, e o problema pode não se apresentar na outros tamanhos de tela.
O teste de captura de tela também ajuda a identificar regressões em locais específicos sua base de código.
Nossas amostras usam o Roborazzi para testes de captura de tela:
- Configure os arquivos do
build.gradle
do projeto e do app para usar Roborazzi. - Crie um teste de captura de tela para cada tela do app. Por exemplo:
no exemplo ComposeStarter, um teste para a
GreetingScreen
é implementados conforme mostrado emGreetingScreenTest
:
@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
override val tolerance = 0.02f
@Test
fun greetingScreenTest() = runTest {
AppScaffold(
timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
) {
GreetingScreen(greetingName = "screenshot", onShowList = {})
}
}
companion object {
@JvmStatic
@ParameterizedRobolectricTestRunner.Parameters
fun devices() = WearDevice.entries
}
}
Alguns pontos importantes a serem observados:
- O
FixedTimeSource
permite gerar capturas de tela em que oTimeText
não podem variar e causar a falha acidental dos testes. - O
WearDevice.entries
contém definições para os dispositivos Wear OS mais usados. Por isso, que os testes sejam executados em uma faixa representativa de tamanhos de tela.
Gerar imagens douradas
Para gerar imagens para suas telas, execute o seguinte comando em um terminal:
./gradlew recordRoborazziDebug
Verificar imagens
Para verificar as alterações em relação às imagens existentes, execute o seguinte comando em um terminal:
./gradlew verifyRoborazziDebug
Para ver um exemplo completo de testes de captura de tela, consulte o exemplo do ComposeStarter.