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 Design 3

O snippet de código a seguir usa um componente TransformingLazyColumn para criar conteúdo com ótima aparência em vários 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,
                )
            }
        }
    }
}
List.kt

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

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

• A especificação do primeiro e do último ItemType, para determinar o preenchimento correto.
• O uso de ListHeader para o primeiro item da lista, porque os cabeçalhos Text não podem ter preenchimento.

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) – oferece ajudantes para ajudar a criar apps otimizados e diferenciados para o Wear OS.
• O exemplo ComposeStarter (link em inglês) – um exemplo que mostra os princípios descritos neste guia.
• O exemplo JetCaster (link em inglês) – um exemplo mais complexo de como criar um app para funcionar com diferentes tamanhos de tela, usando a biblioteca Horologist.

Usar layouts de rolagem no app

Use um layout de rolagem, conforme mostrado anteriormente nesta página, como a opção padrão ao implementar suas telas. Isso permite que os usuários alcancem 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 dispositivos e escalonamento de fontes.

Caixas de diálogo

As caixas de diálogo também precisam ser roláveis, a menos que haja um motivo muito bom 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. Vários exemplos incluem a tela principal do player em um app de mídia 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 por 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.
    }
    // ...
List.kt

As orientações de design ilustram mais dessas oportunidades.

Testar combinações de tamanhos de tela e fonte usando visualizações

As visualizações do Compose ajudam a desenvolver para vários tamanhos de tela do Wear OS. Use as definições de visualização de dispositivos e de escalonamento de fontes para conferir o seguinte:

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

Implemente visualizações usando WearPreviewDevices e WearPreviewFontScales para todas as telas do app.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}
List.kt

Teste de captura de tela

Além do teste de visualização, o teste de captura de tela permite testar uma variedade de tamanhos de hardware. Isso é particularmente útil quando esses dispositivos não estão disponíveis imediatamente e o problema pode não aparecer em outros tamanhos de tela.

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

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

1. Configure os arquivos do projeto e do app build.gradle para usar o Roborazzi.
2. Crie um teste de captura de tela para cada tela do app. Por exemplo, o código a seguir 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
    }
}
ListTest.kt

Alguns pontos importantes a serem observados:

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

Gerar imagens douradas

Para gerar imagens para suas telas, execute o comando a seguir em um terminal:

./gradlew recordRoborazziDebug

Verificar imagens

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

./gradlew verifyRoborazziDebug

Para um exemplo completo de teste de captura de tela, consulte o exemplo ComposeStarter (link em inglês).