अलग-अलग स्क्रीन साइज़ के लिए डेवलप करें

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

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

Material 3 का इस्तेमाल करके रिस्पॉन्सिव लेआउट बनाना

इस कोड स्निपेट में, TransformingLazyColumn कॉम्पोनेंट का इस्तेमाल किया गया है. इससे ऐसा कॉन्टेंट बनाया जा सकता है जो Wear OS के अलग-अलग साइज़ की स्क्रीन पर शानदार दिखता है:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}
List.kt

इस उदाहरण में, ScreenScaffold और AppScaffold के बारे में भी बताया गया है. ये ऐप्लिकेशन और अलग-अलग स्क्रीन (नेविगेशन के रास्ते) के बीच तालमेल बिठाते हैं, ताकि स्क्रोल करने का सही तरीका और TimeText की पोज़िशन तय की जा सके.

ऊपर और नीचे की पैडिंग के लिए, इन बातों का भी ध्यान रखें:

• सही पैडिंग तय करने के लिए, पहले और आखिरी ItemType का स्पेसिफ़िकेशन.
• सूची में मौजूद पहले आइटम के लिए ListHeader का इस्तेमाल किया गया है, क्योंकि Text हेडर में पैडिंग नहीं होनी चाहिए.

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

• Horologist लाइब्रेरी - यह Wear OS के लिए, बेहतर और अलग-अलग ऐप्लिकेशन बनाने में मदद करती है.
• ComposeStarter सैंपल - यह इस गाइड में बताए गए सिद्धांतों को दिखाने वाला एक उदाहरण है.
• JetCaster का सैंपल - Horologist लाइब्रेरी का इस्तेमाल करके, अलग-अलग स्क्रीन साइज़ के साथ काम करने वाला ऐप्लिकेशन बनाने का ज़्यादा जटिल उदाहरण.

अपने ऐप्लिकेशन में स्क्रोल करने वाले लेआउट का इस्तेमाल करना

अपनी स्क्रीन लागू करते समय, स्क्रोल करने वाले लेआउट का इस्तेमाल करें. इस पेज पर पहले दिखाया गया है कि इसे डिफ़ॉल्ट विकल्प के तौर पर कैसे इस्तेमाल किया जाता है. इससे उपयोगकर्ता, डिसप्ले की सेटिंग या Wear OS डिवाइस की स्क्रीन के साइज़ के बावजूद, आपके ऐप्लिकेशन के कॉम्पोनेंट तक पहुंच पाते हैं.

अलग-अलग डिवाइस साइज़ और फ़ॉन्ट-स्केलिंग का असर.

डायलॉग

डायलॉग को स्क्रोल किया जा सकना चाहिए. हालांकि, अगर ऐसा न करने की कोई खास वजह हो, तो स्क्रोल करने की सुविधा नहीं दी जा सकती. AlertDialog कॉम्पोनेंट रिस्पॉन्सिव होता है. साथ ही, अगर कॉन्टेंट व्यूपोर्ट की ऊंचाई से ज़्यादा है, तो यह डिफ़ॉल्ट रूप से स्क्रोल किया जा सकता है.

कस्टम स्क्रीन के लिए, स्क्रोल न किए जा सकने वाले लेआउट की ज़रूरत पड़ सकती है

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

ऐसे मामलों में, Figma डिज़ाइन किट में दिए गए कैननिकल दिशा-निर्देशों को देखें. साथ ही, सही मार्जिन का इस्तेमाल करके, स्क्रीन के साइज़ के हिसाब से रिस्पॉन्सिव डिज़ाइन लागू करें.

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

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

const val LARGE_DISPLAY_BREAKPOINT = 225

@Composable
fun isLargeDisplay() =
    LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT

// ...
// ... use in your Composables:
    if (isLargeDisplay()) {
        // Show additional content.
    } else {
        // Show content only for smaller displays.
    }
    // ...
List.kt

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

झलक देखने की सुविधा का इस्तेमाल करके, स्क्रीन और फ़ॉन्ट के साइज़ के कॉम्बिनेशन आज़माएं

Compose की झलक की मदद से, Wear OS के अलग-अलग स्क्रीन साइज़ के लिए ऐप्लिकेशन डेवलप किए जा सकते हैं. इन चीज़ों को देखने के लिए, डिवाइसों और फ़ॉन्ट-स्केलिंग की झलक दिखाने वाली परिभाषाओं, दोनों का इस्तेमाल करें:

• स्क्रीन के साइज़ के हिसाब से, आपकी स्क्रीन कैसी दिखती हैं. उदाहरण के लिए, सबसे छोटे फ़ॉन्ट के साथ सबसे बड़ी स्क्रीन.
• अलग-अलग ब्रेकपॉइंट पर, आपके अलग-अलग अनुभव कैसे काम करते हैं.

पक्का करें कि आपने अपने ऐप्लिकेशन की सभी स्क्रीन के लिए, WearPreviewDevices और WearPreviewFontScales का इस्तेमाल करके झलकें लागू की हों.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}
List.kt

स्क्रीनशॉट की जांच करना

झलक देखने के लिए की जाने वाली टेस्टिंग के अलावा, स्क्रीनशॉट टेस्टिंग की मदद से, अलग-अलग साइज़ के मौजूदा हार्डवेयर पर टेस्ट किया जा सकता है. यह सुविधा उन मामलों में खास तौर पर काम आती है जहां आपको उन डिवाइसों का ऐक्सेस तुरंत नहीं मिल पाता. साथ ही, ऐसा हो सकता है कि समस्या अन्य स्क्रीन साइज़ पर न दिखे.

स्क्रीनशॉट टेस्टिंग से, आपको अपने कोडबेस में किसी खास जगह पर रिग्रेशन का पता लगाने में भी मदद मिलती है.

हमारे सैंपल, स्क्रीनशॉट की टेस्टिंग के लिए Roborazzi का इस्तेमाल करते हैं:

1. Roborazzi का इस्तेमाल करने के लिए, अपने प्रोजेक्ट और ऐप्लिकेशन की build.gradle फ़ाइलों को कॉन्फ़िगर करें.
2. अपने ऐप्लिकेशन की हर स्क्रीन के लिए, स्क्रीनशॉट टेस्ट बनाएं. उदाहरण के लिए, यहां दिए गए कोड में, सूची वाली स्क्रीन के लिए स्क्रीनशॉट टेस्ट दिखाया गया है:

@RunWith(ParameterizedRobolectricTestRunner::class)
class ComposeListScreenTest(
    override val device: WearDevice
) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun myScreenTest() =
        runTest {
            AppScaffold {
                ComposeList()
            }
        }

    companion object {
        @JvmStatic
        @ParameterizedRobolectricTestRunner.Parameters
        fun devices() = WearDevice.entries
    }
}
ListTest.kt

ध्यान देने वाली कुछ ज़रूरी बातें:

• WearDevice.entries में, Wear OS के सबसे लोकप्रिय डिवाइसों की परिभाषाएं शामिल होती हैं. इससे अलग-अलग स्क्रीन साइज़ पर टेस्ट किए जा सकते हैं.

गोल्डन इमेज जनरेट करना

अपनी स्क्रीन के लिए इमेज जनरेट करने के लिए, टर्मिनल में यह कमांड चलाएं:

./gradlew recordRoborazziDebug

इमेज की पुष्टि करना

मौजूदा इमेज के हिसाब से बदलावों की पुष्टि करने के लिए, टर्मिनल में यह कमांड चलाएं:

./gradlew verifyRoborazziDebug

स्क्रीनशॉट टेस्टिंग के पूरे उदाहरण के लिए, ComposeStarter सैंपल देखें.