Os Blocos do app precisam funcionar bem em dispositivos Wear OS de todos os tamanhos, aproveitando o espaço extra disponível e ainda tendo 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 ProtoLayout
A biblioteca ProtoLayout Material oferece layouts predefinidos para ajudar você a criar seus blocos. Esses layouts já foram projetados para se adaptar ao tamanho da tela.
Consulte os layouts de design do Figma, que demonstram os layouts canônicos disponíveis e como criar seu design usando-os:
Recomendamos PrimaryLayout ou EdgeContentLayout como layouts de nível superior
para a maioria dos casos de uso. Defina o comportamento responsivo usando
setResponsiveContentInsetEnabled, por exemplo:
PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setContent(
// ...
)
.build()
Proporcione experiências diferenciadas usando pontos de interrupção
Os layouts da biblioteca ProtoLayout Material já são responsivos e cuidam da colocação e visibilidade corretas dos elementos. No entanto, em alguns casos, variar o número de elementos visíveis pode gerar melhores resultados. Por exemplo, você pode querer três botões em uma tela menor e cinco em uma tela maior.
Para implementar esse tipo de experiência diferenciada, use pontos de interrupção do tamanho da tela. Para mostrar um layout diferente quando o tamanho da tela ultrapassa 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 as visualizações
É importante testar seus layouts em diferentes tamanhos de tela. Use as
anotações de visualização do bloco com as classes TilePreviewHelper e
TilePreviewData:
@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
onTileRequest = { request ->
TilePreviewHelper.singleTimelineEntryTileBuilder(
buildLayout()
).build()
}
)
Assim, você pode visualizar os layouts de blocos diretamente no Android Studio. O exemplo de pontos de interrupção anterior ilustra como outros botões são mostrados quando o espaço da tela permite, na visualização:
Telas pequenas e grandes mostrando o efeito do ponto de interrupção
Para conferir um exemplo completo, consulte o exemplo de blocos de mídia (link em inglês) no GitHub.