Farklı ekran boyutları için karolar geliştirin

Uygulamanızın kutucukları, Wear OS cihazlarının tüm boyutlarında iyi çalışmalı, mümkün olduğunda ek alandan yararlanmalı ve daha küçük ekranlarda da harika görünmelidir. Bu kılavuzda, söz konusu kullanıcı deneyimini elde etmeye yönelik öneriler sunulmaktadır.

Uyarlanabilir düzenlerle ilgili tasarım ilkeleri hakkında daha fazla bilgi edinmek için tasarım kılavuzunu okuyun.

Kesme noktaları aracılığıyla farklılaştırılmış deneyimler sunma

ProtoLayout Material kitaplığındaki düzenler duyarlıdır ve öğelerin 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 öğe 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 isteyebilirsiniz.

Bu tür bir farklılaştırılmış deneyimi 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(this, requestParams.deviceConfiguration) {
    // ...
    val isLargeScreen = deviceConfiguration.screenWidthDp >= 225
    primaryLayout(
        mainSlot = {
            buttonGroup {
                buttonGroupItem { button1 }
                buttonGroupItem { button2 }
                buttonGroupItem { button3 }
                if (isLargeScreen) {
                    buttonGroupItem { button4 }
                    buttonGroupItem { button5 }
                }
            }
        }
    )
}
Tile.kt

Tasarım rehberi, ek fırsatları gösterir.

Önizlemeleri kullanarak farklı ekran boyutlarındaki test kutularını test etme

Düzenlerinizi farklı ekran boyutlarında test etmeniz önemlidir. TilePreviewHelper ve TilePreviewData sınıflarıyla birlikte Döşeme Önizleme ek açıklamalarını kullanın:

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData {
    TilePreviewHelper.singleTimelineEntryTileBuilder(
        materialScope(context, it.deviceConfiguration) {
            myAdaptiveLayout() // varies the layout depending on the size of the screen
        }
    )
        .build()
}
Tile.kt

Bu sayede, Android Studio'da doğrudan Döşeme düzenlerinizi önizleyebilirsiniz.

Tam bir örnek için GitHub'daki zamanlayıcı kutuları örneğine bakın.