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

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

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

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

लेआउट में प्रतिशत के हिसाब से मार्जिन होने चाहिए. क्योंकि Compose सुविधा काम करती है डिफ़ॉल्ट के बजाय निरपेक्ष मान डालें, तो हॉरोलॉजिस्ट लाइब्रेरी, जिसमें ये सुविधाएं मिलती हैं:

• हॉरिज़ॉन्टल मार्जिन, डिवाइस की स्क्रीन के प्रतिशत के हिसाब से सही तरीके से सेट हैं साइज़.
• ऊपर और नीचे के स्पेस को सही तरह से सेट किया गया है. इसमें कुछ समस्याएं तो शामिल हैं, ऊपर और सबसे नीचे की सुझाई गई दूरी, कॉम्पोनेंट के बीच की दूरी पर निर्भर करती है इस्तेमाल किया गया. उदाहरण के लिए, Chip की स्पेसिंग Text से अलग होनी चाहिए कॉम्पोनेंट का इस्तेमाल करें.
• TimeText मार्जिन सही तरीके से सेट हैं.

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

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

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

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

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

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

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

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

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

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

डायलॉग

डायलॉग भी स्क्रोल किए जा सकते हैं. हालांकि, ऐसा तब ही होना चाहिए, जब तक कि आपके पास ऐसा न करने की कोई खास वजह हो. हॉरोलॉजिस्ट जो ResponsiveDialog कॉम्पोनेंट उपलब्ध कराता है, वह फ़ॉलो किया जा रहा है:

• डिफ़ॉल्ट रूप से स्क्रोल किया जा रहा है.
• प्रतिशत के हिसाब से सही मार्जिन.
• ऐसे बटन जो जगह के हिसाब से अपनी चौड़ाई को घटा या बढ़ा सकते हैं. टैप-टारगेट.

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

कस्टम स्क्रीन के लिए, ऐसे लेआउट की ज़रूरत हो सकती है जिन्हें स्क्रोल न किया जा सके

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

ऐसे मामलों में, यहां दिए गए कैननिकल दिशा-निर्देशों को देखें 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.
}

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

झलक का इस्तेमाल करके स्क्रीन और फ़ॉन्ट साइज़ के कॉम्बिनेशन की जांच करें

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

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

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

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ListScreenPreview() {
    ListScreen()
}

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

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

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

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

1. अपनी प्रोजेक्ट और ऐप्लिकेशन 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(
            timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
        ) {
            GreetingScreen(greetingName = "screenshot", onShowList = {})
        }
    }

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

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

• FixedTimeSource आपको ऐसे स्क्रीनशॉट जनरेट करने की सुविधा देता है जहां TimeText ऐसा नहीं करता क्योंकि इससे अनजाने में टेस्ट फ़ेल हो जाते हैं.
• WearDevice.entries में सबसे लोकप्रिय Wear OS डिवाइसों की परिभाषाएं होती हैं, इसलिए कि टेस्ट एक तय सीमा के स्क्रीन साइज़ पर किए जाते हैं.

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

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

./gradlew recordRoborazziDebug

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

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

./gradlew verifyRoborazziDebug

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