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

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

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

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

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

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

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

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

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

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

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