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 o uso canônico layouts disponíveis e como criar seu design usando eles:
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. A o exemplo de breakpoints anterior ilustra como botões adicionais aparecem quando o espaço na 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.