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

आपका ऐप्लिकेशन, सभी साइज़ के 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

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

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

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

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

पक्का करें कि आपने अपने ऐप्लिकेशन की सभी स्क्रीन के लिए, WearPreviewDevices और WearPreviewFontScales का इस्तेमाल करके झलक दिखाने की सुविधा लागू की हो. Wear OS की झलक दिखाने की सुविधा, कस्टम हार्डवेयर स्पेसिफ़िकेशन, और स्क्रोल की गई सूचियों की झलक दिखाने की सुविधा को कॉन्फ़िगर करने के बारे में पूरी जानकारी के लिए, Compose for Wear OS में अपने यूज़र इंटरफ़ेस (यूआई) की झलक देखें लेख पढ़ें.

@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 सैंपल देखें.