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

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

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

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

लेआउट में प्रतिशत के हिसाब से मार्जिन होने चाहिए. Compose फ़ंक्शन डिफ़ॉल्ट रूप से, वैल्यू के पूर्ण मान के साथ काम करता है. इसलिए, पैडिंग का हिसाब लगाने के लिए, Horologist लाइब्रेरी से rememberResponsiveColumnPadding का इस्तेमाल करें और इसे ScreenScaffold के contentPadding पैरामीटर और TransformingLazyColumn के contentPadding पैरामीटर में पास करें.

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

val columnState = rememberTransformingLazyColumnState()
val contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                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. अपने ऐप्लिकेशन में मौजूद हर स्क्रीन के लिए स्क्रीनशॉट टेस्ट बनाएं. उदाहरण के लिए, ComposeStarter सैंपल में, GreetingScreen के लिए एक टेस्ट लागू किया गया है, जैसा कि GreetingScreenTest में देखा गया है:
@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun greetingScreenTest() = runTest {
        AppScaffold {
            GreetingScreen(greetingName = "screenshot", onShowList = {})
        }
    }

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

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

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

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

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

./gradlew recordRoborazziDebug

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

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

./gradlew verifyRoborazziDebug

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