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

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 sahip olacaksınız.

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:

Daha büyük ekranlarda ek düğmeler

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.