টিভি অ্যাপের ক্ষেত্রে, ব্রাউজিং অভিজ্ঞতা কার্যকর ফোকাস-ভিত্তিক নেভিগেশনের উপর নির্ভর করে। স্ট্যান্ডার্ড কম্পোজ ফাউন্ডেশন লেজি লেআউট ব্যবহার করে, আপনি পারফরম্যান্ট ভার্টিকাল এবং হরাইজন্টাল লিস্ট তৈরি করতে পারেন যা সক্রিয় আইটেমগুলোকে দৃষ্টির সামনে রাখার জন্য স্বয়ংক্রিয়ভাবে ফোকাস-চালিত স্ক্রলিং পরিচালনা করে।
টিভির জন্য অপ্টিমাইজ করা ডিফল্ট স্ক্রোল আচরণ
Compose Foundation 1.7.0 থেকে শুরু করে, স্ট্যান্ডার্ড লেজি লেআউটগুলিতে (যেমন LazyRow এবং LazyColumn ) ফোকাস-পজিশনিং ফিচারের জন্য বিল্ট-ইন সাপোর্ট অন্তর্ভুক্ত করা হয়েছে। টিভি অ্যাপের জন্য ক্যাটালগ তৈরি করার ক্ষেত্রে এটিই প্রস্তাবিত পদ্ধতি, কারণ এটি ফোকাস করা আইটেমগুলিকে ব্যবহারকারীর জন্য দৃশ্যমান এবং স্বজ্ঞাতভাবে বিন্যস্ত রাখতে সাহায্য করে।
একটি সাধারণ স্ক্রোলযোগ্য তালিকা তৈরি করতে, স্ট্যান্ডার্ড লেজি কম্পোনেন্টগুলো ব্যবহার করুন। এই কম্পোনেন্টগুলো স্বয়ংক্রিয়ভাবে ডি-প্যাড নেভিগেশন পরিচালনা করে এবং ফোকাস করা আইটেমটিকে দৃশ্যমান করে তোলে।
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
@Composable
fun MovieCatalog(movies: List<Movie>) {
LazyRow {
items(movies) { movie ->
MovieCard(
movie = movie,
onClick = { /* Handle click */ }
)
}
}
}
BringIntoViewSpec ব্যবহার করে স্ক্রোল আচরণ কাস্টমাইজ করুন
যদি আপনার ডিজাইনের জন্য একটি নির্দিষ্ট "পিভট" পয়েন্টের প্রয়োজন হয় (উদাহরণস্বরূপ, ফোকাস করা আইটেমটিকে বাম প্রান্ত থেকে ঠিক ৩০% দূরত্বে রাখা), তাহলে আপনি একটি BringIntoViewSpec ব্যবহার করে স্ক্রলিং আচরণটি কাস্টমাইজ করতে পারেন। এটি পুরোনো pivotOffsets কার্যকারিতাকে প্রতিস্থাপন করে এবং এর মাধ্যমে আপনি সুনির্দিষ্টভাবে নির্ধারণ করতে পারেন যে একটি ফোকাস করা আইটেমকে জায়গা দেওয়ার জন্য ভিউপোর্টটি কীভাবে স্ক্রল করবে।
১. একটি কাস্টম BringIntoViewSpec সংজ্ঞায়িত করুন
নিম্নলিখিত হেল্পার কম্পোজেবলটি আপনাকে প্যারেন্ট এবং চাইল্ড ফ্র্যাকশনের উপর ভিত্তি করে একটি "পিভট" সংজ্ঞায়িত করতে দেয়। parentFraction নির্ধারণ করে যে আইটেমটি কন্টেইনারের কোথায় অবস্থান করবে, এবং childFraction নির্ধারণ করে যে আইটেমটির কোন অংশ সেই বিন্দুর সাথে সারিবদ্ধ হবে।
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun PositionFocusedItemInLazyLayout(
parentFraction: Float = 0.3f,
childFraction: Float = 0f,
content: @Composable () -> Unit,
) {
val bringIntoViewSpec = remember(parentFraction, childFraction) {
object : BringIntoViewSpec {
override fun calculateScrollDistance(
offset: Float, // Item's initial position
size: Float, // Item's size
containerSize: Float // Container's size
): Float {
// Calculate the offset position of the item's leading edge.
val initialTargetForLeadingEdge =
parentFraction * containerSize - (childFraction * size)
// If the item fits in the container, and scrolling would cause
// its trailing edge to be clipped, adjust targetForLeadingEdge
// to prevent over-scrolling near the end of list.
val targetForLeadingEdge = if (size <= containerSize &&
(containerSize - initialTargetForLeadingEdge) < size) {
// If clipped, align the item's trailing edge with the
// container's trailing edge.
containerSize - size
} else {
initialTargetForLeadingEdge
}
// Return scroll distance relative to initial item position.
return offset - targetForLeadingEdge
}
}
}
// Apply the spec to all scrollables in the hierarchy
CompositionLocalProvider(
LocalBringIntoViewSpec provides bringIntoViewSpec,
content = content,
)
}
২. কাস্টম স্পেক প্রয়োগ করুন
পজিশনিং প্রয়োগ করতে আপনার লেআউটগুলোকে হেল্পার দিয়ে র্যাপ করুন। এটি আপনার ক্যাটালগের বিভিন্ন সারি জুড়ে একটি 'সামঞ্জস্যপূর্ণ ফোকাস লাইন' তৈরি করার জন্য উপযোগী।
PositionFocusedItemInLazyLayout(
parentFraction = 0.3f, // Pivot 30% from the edge
childFraction = 0.5f // Center of the item aligns with the pivot
) {
LazyColumn {
items(sectionList) { section ->
// This row and its items will respect the 30% pivot
LazyRow { ... }
}
}
}
৩. নির্দিষ্ট নেস্টেড লেআউটের জন্য অপ্ট-আউট করুন
আপনার যদি কোনো নির্দিষ্ট নেস্টেড লেআউট থাকে যা আপনার কাস্টম পিভটের পরিবর্তে স্ট্যান্ডার্ড স্ক্রলিং আচরণ ব্যবহার করবে, তাহলে DefaultBringIntoViewSpec প্রদান করুন:
private val DefaultBringIntoViewSpec = object : BringIntoViewSpec {}
PositionFocusedItemInLazyLayout {
LazyColumn {
item {
// This row will ignore the custom pivot and use default behavior
CompositionLocalProvider(LocalBringIntoViewSpec provides DefaultBringIntoViewSpec) {
LazyRow { ... }
}
}
}
}
প্রকৃতপক্ষে, একটি খালি BringIntoViewSpec পাস করার মাধ্যমে ফ্রেমওয়ার্কের ডিফল্ট আচরণ কার্যকর হয়।
টিভি ফাউন্ডেশন থেকে কম্পোজ ফাউন্ডেশনে স্থানান্তর
androidx.tv.foundation এ থাকা টিভি-নির্দিষ্ট লেজি লেআউটগুলো এখন অপ্রচলিত এবং এর পরিবর্তে স্ট্যান্ডার্ড কম্পোজ ফাউন্ডেশন লেআউটগুলো ব্যবহার করা হচ্ছে।
নির্ভরতা আপডেট
যাচাই করুন যে আপনার build.gradle নিম্নলিখিত বিষয়গুলির জন্য সংস্করণ 1.7.0 বা তার উচ্চতর সংস্করণ ব্যবহৃত হচ্ছে:
-
androidx.compose.foundation -
androidx.compose.runtime
উপাদান ম্যাপিং
মাইগ্রেট করতে, আপনার ইম্পোর্টগুলো আপডেট করুন এবং আপনার কম্পোনেন্টগুলো থেকে Tv প্রিফিক্সটি সরিয়ে ফেলুন:
| অপ্রচলিত টিভি উপাদান | কম্পোজ ফাউন্ডেশন প্রতিস্থাপন |
|---|---|
| টিভিলেজিরো | লেজি রো |
| টিভিলেজি কলাম | লেজি কলাম |
| টিভিলেজিহরাইজন্টালগ্রিড | লেজিহরাইজন্টালগ্রিড |
| TvLazyVerticalGrid | লেজিভার্টিকালগ্রিড |
| পিভট অফসেট | BringIntoViewSpec (LocalBringIntoViewSpec এর মাধ্যমে) |