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 ) { // ... // ... } }
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- Compose for Wear OS कोडलैब
- सूचियां और ग्रिड
- 'लिखें' पेज में व्यू इस्तेमाल करना