Wear OS के लिए, Compose में मौजूद सूचियां


Wear OS डिवाइसों पर, सूचियों की मदद से उपयोगकर्ता विकल्पों के सेट में से कोई आइटम चुन सकते हैं.

Wear OS वाले कई डिवाइसों में गोल स्क्रीन होती हैं. इस वजह से, स्क्रीन के सबसे ऊपर और सबसे नीचे दिखने वाले आइटम को देखना मुश्किल हो जाता है. इस वजह से, Compose for Wear OS में LazyColumn क्लास का एक वर्शन शामिल है. इसे TransformingLazyColumn कहा जाता है. यह स्केलिंग और मॉर्फ़िंग ऐनिमेशन के साथ काम करता है. जब आइटम किनारों की ओर जाते हैं, तो वे छोटे हो जाते हैं और धुंधले हो जाते हैं.

स्केलिंग और स्क्रोलिंग इफ़ेक्ट जोड़ने के लिए, Modifier.transformedHeight का इस्तेमाल करें. इससे Compose को स्क्रीन पर आइटम स्क्रोल करते समय, ऊंचाई में होने वाले बदलाव का हिसाब लगाने में मदद मिलेगी. साथ ही, transformation = SurfaceTransformation(transformationSpec) का इस्तेमाल करके, विज़ुअल इफ़ेक्ट लागू करें. इनमें आइटम को विज़ुअली छोटा करके, पिछले आइटम से मैच करना भी शामिल है. उन कॉम्पोनेंट के लिए कस्टम TransformationSpec का इस्तेमाल करें जो transformation को पैरामीटर के तौर पर नहीं लेते हैं. उदाहरण के लिए, Text.

इस ऐनिमेशन में दिखाया गया है कि स्क्रीन पर किसी एलिमेंट के हिलने पर, उसके साइज़ और पारदर्शिता में कैसे बदलाव होता है:

इस कोड स्निपेट में, TransformingLazyColumn लेआउट का इस्तेमाल करके सूची बनाने का तरीका बताया गया है. इससे ऐसा कॉन्टेंट बनाया जा सकता है जो Wear OS की अलग-अलग स्क्रीन साइज़ पर शानदार दिखता है. उदाहरण के लिए, इस सैंपल कोड में, सूची के पहले और आखिरी एलिमेंट में ज़रूरी पैडिंग जोड़ी जाएगी. ये एलिमेंट, TransformingLazyColumn के contentPadding में सेट किए गए हैं. स्क्रोल इंडिकेटर दिखाने के लिए, ScreenScaffold और TransformingLazyColumn के बीच columnState शेयर करें:

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,
                )
            }
        }
    }
}

स्नैप-एंड-फ़्लिंग इफ़ेक्ट जोड़ना

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

ScalingLazyColumn के Horologist वर्शन में यह इफ़ेक्ट जोड़ने के लिए, columnState के rotaryMode पैरामीटर को RotaryWithSnap पर सेट करें. ऐसा करने का तरीका, यहां दिए गए कोड स्निपेट में दिखाया गया है:

val columnState = rememberResponsiveColumnState(
    // ...
    // ...
    rotaryMode = ScalingLazyColumnState.RotaryMode.Snap
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        // ...
        // ...
    }
}