Desenvolver blocos para diferentes tamanhos de tela

Os blocos do seu app devem funcionar bem em dispositivos Wear OS de todos os tamanhos, aproveitar o espaço adicional disponível e ainda ter uma ótima aparência em das telas. Este guia fornece recomendações para alcançar esse objetivo 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 ProtoLayout

A biblioteca ProtoLayout Material fornece layouts predefinidos para ajudar você criar seus blocos. Esses layouts já foram projetados para se adaptar à tela. tamanho.

Consulte os layouts de design do Figma, que demonstram os padrões canônicos layouts disponíveis e como criar seu design usando eles:

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

Recomendamos PrimaryLayout ou EdgeContentLayout como nível superior layouts para a maioria dos casos de uso. Defina o comportamento responsivo usando setResponsiveContentInsetEnabled, por exemplo:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        // ...
    )
.build()

Ofereça experiências diferenciadas usando pontos de interrupção

Os layouts da biblioteca ProtoLayout Material já são responsivos e cuidar do posicionamento correto do elemento e da visibilidade dele. No entanto, em alguns casos convém variar o número de elementos visíveis para melhores resultados. Para Por exemplo, você pode querer três botões em uma tela menor e cinco em uma tela maior exibição.

Para implementar esse tipo de experiência diferenciada, use o tamanho da tela pontos de interrupção. Para mostrar um layout diferente quando o tamanho da tela exceder 225 dp:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        MultiButtonLayout.Builder()
            .addButtonContent(button1)
            .addButtonContent(button2)
            .addButtonContent(button3)
            .apply {
                if (deviceParameters.screenHeightDp >= 225) {
                    addButtonContent(button4)
                    addButtonContent(button5)
                }
            }
            .build()
    )
    .setPrimaryLabelTextContent(label)
    .setPrimaryChipContent(compactChip)
    .build()

As orientações de design ilustram outras oportunidades.

Testar blocos em diferentes tamanhos de tela usando visualizações

É importante testar seus layouts em diferentes tamanhos de tela. Use o anotações de visualização de blocos, junto com TilePreviewHelper e TilePreviewData classes:

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildLayout()
        ).build()
    }
)

Isso permite visualizar os layouts de blocos diretamente no Android Studio. O o exemplo de breakpoints anterior ilustra como botões adicionais aparecem quando o espaço na tela permite, na visualização:

Para conferir um exemplo completo, consulte o exemplo de blocos de mídia (link em inglês) no GitHub.