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

Compose for Wear OS Material का वर्शन 2.5 3

---

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

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

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

लेआउट में प्रतिशत के हिसाब से मार्जिन होना चाहिए. Wear Compose Material 3 में, ScreenScaffold प्रतिशत के हिसाब से पैडिंग का हिसाब अपने-आप लगाता है और इसके कॉन्टेंट लैम्डा को contentPadding सप्लाई करता है. इस contentPadding पैरामीटर को TransformingLazyColumn में पास करें.

यहां दिए गए कोड स्निपेट में, 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 पोज़िशनिंग पक्का की जा सके.

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

• Modifier.minimumVerticalContentPadding (जैसे, ListHeaderDefaults.minimumTopListContentPadding और ButtonDefaults.minimumVerticalListContentPadding) का इस्तेमाल करें, ताकि सूची के किनारे पर दिखने वाले आइटम के लिए, TransformingLazyColumn कम से कम सुझाई गई टॉप और बॉटम पैडिंग का इस्तेमाल करे.
• सूची के पहले आइटम के लिए, सामान्य Text कंपोज़ेबल के बजाय ListHeader का इस्तेमाल करना.

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

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

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

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

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

डायलॉग

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

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

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

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

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

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

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 का इस्तेमाल करके झलक दिखाने की सुविधा लागू की हो. 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 सैंपल देखें.