Desenvolver blocos para diferentes tamanhos de tela

Os blocos do app precisam 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.

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

Os layouts da biblioteca ProtoLayout Material são responsivos e cuidam do posicionamento e da visibilidade corretos dos elementos. No entanto, em alguns casos, talvez seja melhor variar o número de elementos visíveis para ter os melhores resultados. Por exemplo, você pode querer três botões em uma tela menor e cinco em uma maior.

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

materialScope(this, requestParams.deviceConfiguration) {
    // ...
    val isLargeScreen = deviceConfiguration.screenWidthDp >= 225
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (isLargeScreen) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}
Tile.kt

A orientação de design ilustra outras oportunidades.

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

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

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData {
    TilePreviewHelper.singleTimelineEntryTileBuilder(
        materialScope(context, it.deviceConfiguration) {
            myAdaptiveLayout() // varies the layout depending on the size of the screen
        }
    )
        .build()
}
Tile.kt

Assim, você pode conferir a visualização dos layouts de bloco diretamente no Android Studio.

Para um exemplo completo, consulte a amostra de blocos de timer no GitHub.