Uygulamanızın kartları her boyuttaki Wear OS cihazda iyi performans gösterecek, mümkün olduğunda ek alandan faydalanacaktır ve küçük ekranlarda da mükemmel görünmeye devam edecektir. Bu kılavuzda, bu kullanıcı deneyimini elde etmeye yönelik öneriler sunulmaktadır.
Uyarlanabilir düzenlerin tasarım ilkeleri hakkında daha fazla bilgi için tasarım kılavuzunu okuyun.
ProtoLayout kullanarak duyarlı düzenler oluşturma
ProtoLayout Material kitaplığı, karolarınızı oluşturmanıza yardımcı olmak için önceden tanımlanmış düzenler sağlar. Bu düzenler zaten ekran boyutuna uyum sağlayacak şekilde tasarlanmıştır.
Kullanılabilir standart düzenleri ve bunları kullanarak tasarımınızı nasıl oluşturacağınızı gösteren Figma tasarım düzenlerine bakın:
Çoğu kullanım alanı için üst düzey düzenler olarak PrimaryLayout veya EdgeContentLayout kullanmanızı öneririz. Duyarlı davranışı setResponsiveContentInsetEnabled kullanarak ayarlayın. Örneğin:
PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setContent(
// ...
)
.build()
Kesme noktalarıyla farklı deneyimler sunun
Daha büyük ekranlarla, ek içerik ve özellikler sunabilirsiniz. Bu tür farklılaştırılmış bir deneyim uygulamak için ekran boyutu ayrılma noktalarını kullanın ve ekran boyutu 225 dp'yi aştığında farklı bir düzen gösterin:
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()
Tasarım kılavuzunda ek fırsatlar gösterilmektedir.
Önizlemeleri kullanarak farklı ekran boyutlarında karoları test etme
Düzenlerinizi farklı ekran boyutlarında test etmeniz önemlidir. TilePreviewHelper ve TilePreviewData sınıflarıyla birlikte Kart Önizlemesi ek açıklamalarını kullanın:
@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
onTileRequest = { request ->
TilePreviewHelper.singleTimelineEntryTileBuilder(
buildLayout()
).build()
}
)
Böylece Kart düzenlerinizi doğrudan Android Studio'da önizleyebilirsiniz. Önceki ayrılma noktaları örneği, önizleme yapıldığında ekran alanı izin verdiğinde ek düğmelerin nasıl gösterildiğini belirtir:
Ayrılma noktasının etkisini gösteren küçük ve büyük ekranlar
Tam bir örnek için GitHub'da medya parçaları örneğine bakın.