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 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, ekran boyutuna uyum sağlayacak şekilde tasarlanmıştır.
Mevcut standart düzenleri ve bunları kullanarak tasarımınızı nasıl oluşturacağınızı gösteren Figma tasarım düzenleri bölümüne 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ı aracılığıyla farklı deneyimler sunma
ProtoLayout Material kitaplığındaki düzenler zaten duyarlı olup doğru öğe yerleşimi ve görünürlüğü 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:
materialScope(context, deviceConfiguration) {
primaryLayout(
mainSlot = {
buttonGroup {
buttonGroupItem { button1 }
buttonGroupItem { button2 }
buttonGroupItem { button3 }
if (deviceConfiguration.screenHeightDp >= 225) {
buttonGroupItem { button4 }
buttonGroupItem { button5 }
}
}
}
)
}
Tasarım kılavuzu, ek fırsatları gösterir.
Önizlemeleri kullanarak farklı ekran boyutlarında karoları test etme
Düzenlerinizi farklı ekran boyutlarında test etmek önemlidir. TilePreviewHelper ve TilePreviewData sınıflarıyla birlikte karo önizleme ek açıklamalarını kullanın:
@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
onTileRequest = { request ->
TilePreviewHelper.singleTimelineEntryTileBuilder(
buildLayout()
).build()
}
)
Bu sayede 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:
Duraklatma 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.