Wear OS ডিভাইসে তালিকা ব্যবহারকারীদের বিভিন্ন বিকল্পের মধ্য থেকে কোনো একটি আইটেম বেছে নিতে সাহায্য করে।
অনেক Wear OS ডিভাইসে গোলাকার স্ক্রিন ব্যবহার করা হয়, যার ফলে স্ক্রিনের ওপর ও নিচের দিকের লিস্ট আইটেমগুলো দেখতে অসুবিধা হয়। এই কারণে, Wear OS-এর জন্য Compose-এ LazyColumn ক্লাসের TransformingLazyColumn নামক একটি সংস্করণ অন্তর্ভুক্ত করা হয়েছে, যা স্কেলিং এবং মর্ফিং অ্যানিমেশন সমর্থন করে। আইটেমগুলো যখন প্রান্তের দিকে চলে যায়, তখন সেগুলো ছোট হয়ে যায় এবং ধীরে ধীরে মিলিয়ে যায়।
প্রস্তাবিত স্কেলিং এবং স্ক্রোলিং ইফেক্টগুলো প্রয়োগ করতে:
- স্ক্রিনে আইটেমটি স্ক্রল করার সময় Compose-কে উচ্চতার পরিবর্তন গণনা করার সুযোগ দিতে
Modifier.transformedHeightব্যবহার করুন। - আইটেমের বিষয়বস্তু ছোট করা সহ ভিজ্যুয়াল ইফেক্টগুলো প্রয়োগ করতে
transformation = SurfaceTransformation(transformationSpec)ব্যবহার করুন। - যেসব কম্পোনেন্ট প্যারামিটার হিসেবে
transformationগ্রহণ করে না, যেমনTextসেগুলোর জন্য একটি কাস্টমTransformationSpecব্যবহার করুন।
নিম্নলিখিত অ্যানিমেশনটি দেখায় কিভাবে একটি তালিকার উপাদান স্ক্রিনের উপরে এবং নীচে যাওয়ার সময় তার আকার ও আকৃতি পরিবর্তন করে:
নিম্নলিখিত কোড স্নিপেটটি দেখায় কিভাবেTransformingLazyColumn লেআউট ব্যবহার করে একটি তালিকা তৈরি করা যায়, যার কন্টেন্ট বিভিন্ন Wear OS স্ক্রিনের আকারে চমৎকার দেখায় । এই কোড স্নিপেটটিতে minimumVerticalContentPadding মডিফায়ারটির ব্যবহারও দেখানো হয়েছে, যা লিস্টের উপরে ও নীচে সঠিক প্যাডিং প্রয়োগ করার জন্য লিস্ট আইটেমগুলোতে সেট করতে হয়।
স্ক্রোল ইন্ডিকেটর দেখানোর জন্য, ScreenScaffold এবং TransformingLazyColumn এর মধ্যে columnState শেয়ার করুন:
val columnState = rememberTransformingLazyColumnState() val transformationSpec = rememberTransformationSpec() ScreenScaffold( scrollState = columnState ) { contentPadding -> TransformingLazyColumn( state = columnState, contentPadding = contentPadding ) { item { ListHeader( modifier = Modifier .fillMaxWidth() .transformedHeight(this, transformationSpec) .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding), transformation = SurfaceTransformation(transformationSpec) ) { Text(text = "Header") } } // ... other items item { Button( modifier = Modifier .fillMaxWidth() .transformedHeight(this, transformationSpec) .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding), transformation = SurfaceTransformation(transformationSpec), onClick = { /* ... */ }, icon = { Icon( imageVector = Icons.Default.Build, contentDescription = "build", ) }, ) { Text( text = "Build", maxLines = 1, overflow = TextOverflow.Ellipsis, ) } } } }
একটি স্ন্যাপ-অ্যান্ড-ফ্লিং এফেক্ট যোগ করুন
যদি আপনার একটি স্ন্যাপ-অ্যান্ড-ফ্লিং বিহেভিয়ার যোগ করার প্রয়োজন হয়, তাহলেflingBehavior প্যারামিটারটিকে TransformingLazyColumnDefaults.snapFlingBehavior(columnState) -এ সেট করুন, যেমনটি নিম্নলিখিত কোড স্নিপেটে দেখানো হয়েছে: val columnState = rememberTransformingLazyColumnState() ScreenScaffold(scrollState = columnState) { TransformingLazyColumn( state = columnState, flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState) ) { // ... // ... } }
আপনার জন্য প্রস্তাবিত
- দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলেও লিঙ্কের লেখা প্রদর্শিত হয়।
- Wear OS কোডল্যাবের জন্য কম্পোজ করুন
- তালিকা এবং গ্রিড
- কম্পোজে ভিউ ব্যবহার করা