Uygulamanızın kartları, ve küçük boyutlu ekranlarda güzel görünen elzemdir. Bu kılavuzda, bu kullanıcıya ulaşmak için öneriler sunulmaktadır sunmaktır.
Uyarlanabilir düzenlerin tasarım ilkeleri hakkında daha fazla bilgi için tasarım kılavuzundan yararlanabilirsiniz.
ProtoLayout kullanarak duyarlı düzenler oluşturma
ProtoLayout Material kitaplığı, size yardımcı olmak için önceden tanımlanmış düzenler sağlar size yardımcı olabilir. Bu düzenler zaten ekrana uyum sağlayacak şekilde tasarlanmıştır seçin.
Standart sayfa düzenini gösteren Figma tasarım düzenlerine mevcut düzenler ve bunları kullanarak tasarımınızı nasıl oluşturacağınız:
Üst düzey olarak PrimaryLayout veya EdgeContentLayout kullanmanızı öneririz
uygun hale getirebilirsiniz. Duyarlı davranışı
setResponsiveContentInsetEnabled, örneğin:
PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setContent(
// ...
)
.build()
Kesme noktalarıyla farklı deneyimler sunun
ProtoLayout Material kitaplığındaki düzenler halihazırda duyarlıdır ve ve görünürlüğün doğruluğuna dikkat edin. Ancak bazı durumlarda en iyi sonuçları elde etmek için görünür öğelerin sayısını değiştirebilirsiniz. Örneğin, Örneğin, küçük ekranda 3 düğme, daha büyük ekranda 5 düğme görüntüleyin.
Bu tür farklılaştırılmış bir deneyimi uygulamak için ekran boyutunu kullanın ayrılma noktaları gibi). 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. Şunu kullanın:
TilePreviewHelper ve
TilePreviewData sınıf:
@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. İlgili içeriği oluşturmak için kullanılan önceki ayrılma noktaları örneği, ek düğmelerin önizleme yapıldığında, ekran alanı izin verdiğinde gösterilir:
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.