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

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

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

ProtoLayout का इस्तेमाल करके रिस्पॉन्सिव लेआउट बनाएं

ProtoLayout Material लाइब्रेरी में, पहले से तय लेआउट की मदद से, आपकी मदद करने के लिए अपनी टाइल बनाएं. ये लेआउट पहले से ही स्क्रीन के हिसाब से डिज़ाइन किए गए हैं साइज़.

Figma डिज़ाइन लेआउट देखें. इसमें, कैननिकल यूआरएल का इस्तेमाल किया जाता है लेआउट उपलब्ध हैं और उनका इस्तेमाल करके डिज़ाइन कैसे बनाया जा सकता है:

• PrimaryLayout
• EdgeContentLayout
• MultiButtonLayout
• MultiSlotLayout

हमारा सुझाव है कि PrimaryLayout या EdgeContentLayout को टॉप-लेवल के तौर पर चुनें ज़्यादातर इस्तेमाल के लिए लेआउट. रिस्पॉन्सिव बिहेवियर सेट करने के लिए, इनका इस्तेमाल करें setResponsiveContentInsetEnabled, उदाहरण के लिए:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        // ...
    )
.build()

ब्रेकपॉइंट की मदद से, उपयोगकर्ताओं को अलग-अलग अनुभव दें

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

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

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()

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

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

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

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildLayout()
        ).build()
    }
)

इससे सीधे Android Studio में टाइल लेआउट की झलक देखी जा सकती है. कॉन्टेंट बनाने पिछले ब्रेकपॉइंट के उदाहरण से पता चलता है कि अतिरिक्त बटन कैसे स्क्रीन स्पेस की अनुमति होने पर, नीचे बताई गई इमेज दिखती हैं.

बेहतर उदाहरण के लिए, GitHub पर मीडिया टाइल का सैंपल देखें.