Uygulamanızın kartları, mevcut olduğunda ek alandan yararlanarak tüm boyutlardaki Wear OS cihazlarda iyi çalışır ve küçük ekranlarda da harika görünür. Bu kılavuzda, bu kullanıcı deneyimine ulaşmak için öneriler sunulmaktadır.
Uyarlanabilir düzenler için tasarım ilkeleri hakkında daha fazla bilgi edinmek üzere tasarım yönergelerini 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üzen 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
ProtoLayout Material kitaplığındaki düzenler zaten duyarlıdır ve öğenin doğru yerleştirilmesini ve görünürlüğünü sağlar. Ancak bazı durumlarda en iyi sonuçları elde etmek için görünür öğelerin sayısını değiştirmek isteyebilirsiniz. Örneğin, daha küçük bir ekranda 3 düğme, daha büyük bir ekranda ise 5 düğme kullanmak isteyebilirsiniz.
Bu tür farklılaştırılmış deneyimleri uygulamak için ekran boyutu kesme noktalarını kullanın. Ekran boyutu 225 dp'yi aştığında farklı bir düzen göstermek için:
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 kesme noktaları örneğinde, ekran alanı izin verdiğinde önizleme sırasında ek düğmelerin nasıl gösterildiği gösterilmektedir:
Ayrılma noktasının etkisini gösteren küçük ve büyük ekranlar
Tam örnek için GitHub'daki medya karoları örneğine bakın.