अलग-अलग स्क्रीन साइज़ के लिए टाइल बनाएं

आपके ऐप्लिकेशन की टाइलें, सभी साइज़ के Wear OS डिवाइसों पर ठीक से काम करनी चाहिए. साथ ही, जहां ज़्यादा जगह उपलब्ध हो वहां उसका फ़ायदा लेना चाहिए. इसके अलावा, छोटी स्क्रीन पर भी अच्छी दिखनी चाहिए. इस गाइड में, उपयोगकर्ताओं को बेहतर अनुभव देने के लिए सुझाव दिए गए हैं.

अडैप्टिव लेआउट के डिज़ाइन के सिद्धांतों के बारे में ज़्यादा जानने के लिए, डिज़ाइन से जुड़े दिशा-निर्देश पढ़ें.

ब्रेकपॉइंट के ज़रिए अलग-अलग अनुभव उपलब्ध कराना

ProtoLayout Material लाइब्रेरी के लेआउट रिस्पॉन्सिव होते हैं. साथ ही, वे एलिमेंट को सही जगह पर रखने और उन्हें दिखाने का ध्यान रखते हैं. हालांकि, कुछ मामलों में बेहतर नतीजों के लिए, आपको दिखने वाले एलिमेंट की संख्या में बदलाव करना पड़ सकता है. उदाहरण के लिए, आपको छोटी स्क्रीन पर तीन बटन और बड़ी स्क्रीन पर पांच बटन दिखाने हों.

इस तरह का अलग-अलग अनुभव देने के लिए, स्क्रीन साइज़ के ब्रेकपॉइंट का इस्तेमाल करें. स्क्रीन का साइज़ 225 dp से ज़्यादा होने पर, अलग लेआउट दिखाने के लिए:

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

डिज़ाइन से जुड़े दिशा-निर्देशों में, अन्य अवसरों के बारे में बताया गया है.

'झलक' सुविधा का इस्तेमाल करके, अलग-अलग स्क्रीन साइज़ पर टाइल टेस्ट करना

अलग-अलग स्क्रीन साइज़ पर अपने लेआउट की जांच करना ज़रूरी है. TilePreviewHelper और TilePreviewData क्लास के साथ-साथ, टाइल की झलक दिखाने वाले एनोटेशन का इस्तेमाल करें:

@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

इससे आपको Android Studio में सीधे तौर पर, टाइल लेआउट की झलक देखने की सुविधा मिलती है.

पूरा उदाहरण देखने के लिए, GitHub पर टाइमर टाइल का सैंपल देखें.