Desenvolver para diferentes tamanhos de tela

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 uma Text. 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 = { }
            )
        }
    }
}
List.kt

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çalhos Text 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

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

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.
    }
    // ...
List.kt

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()
}
List.kt

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:

  1. Configure os arquivos do build.gradle do projeto e do app para usar Roborazzi.
  2. 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 em GreetingScreenTest:
@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 o TimeText 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.