Desenvolver para diferentes tamanhos de tela

Seu app precisa funcionar bem em dispositivos Wear OS de todos os tamanhos, aproveitando o espaço extra quando disponível, e ainda ter uma ótima aparência em telas menores. Este guia oferece 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 as orientações de design.

Criar layouts responsivos usando o Material 3

Os layouts precisam ter margens baseadas em porcentagem. No Wear Compose Material 3, ScreenScaffold calcula o padding com base em porcentagem automaticamente e fornece contentPadding para o lambda de conteúdo. Transmita esse parâmetro contentPadding para TransformingLazyColumn.

O snippet de código abaixo usa um componente TransformingLazyColumn para criar conteúdo que fica ótimo em uma variedade de tamanhos de tela do Wear OS:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}

Este exemplo também demonstra ScreenScaffold e AppScaffold. Eles coordenam entre o app e as telas individuais (rotas de navegação) para garantir o comportamento de rolagem correto e o posicionamento de TimeText.

Para o padding superior e inferior, observe também o seguinte:

  • O uso de Modifier.minimumVerticalContentPadding (como ListHeaderDefaults.minimumTopListContentPadding e ButtonDefaults.minimumVerticalListContentPadding), para que TransformingLazyColumn use pelo menos o padding recomendado na parte de cima e de baixo quando esses itens aparecerem na borda da lista.
  • O uso de ListHeader para o primeiro item da lista, em vez de um elemento combinável Text simples.

As especificações completas estão disponíveis nos kits de design do Figma. Para mais detalhes e exemplos, consulte:

  • A biblioteca Horologist (link em inglês) fornece auxiliares para ajudar a criar apps otimizados e diferenciados para o Wear OS.
  • Exemplo do ComposeStarter: um exemplo que mostra os princípios descritos neste guia.
  • O exemplo do JetCaster (link em inglês): um exemplo mais complexo de criação de um app para funcionar com diferentes tamanhos de tela usando a biblioteca Horologist.

Usar layouts de rolagem no app

Use um layout de rolagem, como mostrado anteriormente nesta página, como a opção padrão ao implementar suas telas. Isso permite que os usuários acessem os componentes do app, independentemente 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 dimensionamento de fonte.

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 serem. O componente AlertDialog é responsivo e rolável por padrão se o conteúdo exceder a altura da janela de visualização.

Telas personalizadas podem exigir layouts sem rolagem

Algumas telas ainda podem ser adequadas para layouts sem rolagem. Alguns exemplos incluem a tela principal do player em um app de música e a tela de treino em um app de fitness.

Nesses casos, consulte as orientações canônicas fornecidas nos kits de design do Figma e implemente um design responsivo ao tamanho da tela, usando as margens corretas.

Oferecer experiências diferenciadas com pontos de interrupção

Com telas maiores, é possível introduzir mais conteúdo e recursos. Para implementar esse tipo de experiência diferenciada, use pontos de interrupção de tamanho de tela, mostrando 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 dessas oportunidades.

Testar combinações de tamanhos de tela e fonte usando prévias

As visualizações do Compose ajudam você a desenvolver para vários tamanhos de tela do Wear OS. Use as definições de pré-lançamento de dispositivos e de dimensionamento de fonte para ver o seguinte:

  • Como as telas ficam nos extremos de tamanho, por exemplo, a maior fonte com a menor tela.
  • Como sua experiência diferenciada se comporta em diferentes pontos de interrupção.

Implemente as prévias usando WearPreviewDevices e WearPreviewFontScales para todas as telas do app. Para ver todos os detalhes sobre como configurar prévias do Wear OS, especificações de hardware personalizadas e prévias de listas roladas, consulte Visualizar sua interface no Compose para Wear OS.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}

Teste de captura de tela

Além do teste de pré-lançamento, o teste de captura de tela permite testar em vários tamanhos de hardware. Isso é útil principalmente quando esses dispositivos não estão disponíveis imediatamente para você, e o problema pode não se apresentar em outros tamanhos de tela.

O teste de captura de tela também ajuda a identificar regressões em locais específicos na base de código.

Nossos exemplos usam o Roborazzi para testes de captura de tela:

  1. Configure os arquivos build.gradle do projeto e do app para usar o Roborazzi.
  2. Crie um teste de captura de tela para cada tela do app. Por exemplo, o código abaixo mostra um teste de captura de tela para uma tela que contém uma lista:
@RunWith(ParameterizedRobolectricTestRunner::class)
class ComposeListScreenTest(
    override val device: WearDevice
) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun myScreenTest() =
        runTest {
            AppScaffold {
                ComposeList()
            }
        }

    companion object {
        @JvmStatic
        @ParameterizedRobolectricTestRunner.Parameters
        fun devices() = WearDevice.entries
    }
}

Observações importantes:

  • WearDevice.entries contém definições para os dispositivos Wear OS mais conhecidos, para que os testes sejam executados em uma variedade representativa de tamanhos de tela.

Gerar imagens douradas

Para gerar imagens para as telas, execute o seguinte comando em um terminal:

./gradlew recordRoborazziDebug

Verificar imagens

Para verificar as mudanças em relação às imagens atuais, execute o seguinte comando em um terminal:

./gradlew verifyRoborazziDebug

Para um exemplo completo de teste de captura de tela, consulte o exemplo ComposeStarter.