টিভির জন্য স্ক্রোলযোগ্য লেআউট তৈরি করুন

টিভি অ্যাপের ক্ষেত্রে, ব্রাউজিং অভিজ্ঞতা দক্ষ ফোকাস-ভিত্তিক নেভিগেশনের উপর নির্ভর করে। স্ট্যান্ডার্ড কম্পোজ ফাউন্ডেশন লেজি লেআউট ব্যবহার করে, আপনি পারফর্ম্যান্ট উল্লম্ব এবং অনুভূমিক তালিকা তৈরি করতে পারেন যা সক্রিয় আইটেমগুলিকে দৃশ্যমান রাখার জন্য স্বয়ংক্রিয়ভাবে ফোকাস-চালিত স্ক্রোলিং পরিচালনা করে।

টিভির জন্য অপ্টিমাইজ করা ডিফল্ট স্ক্রোল আচরণ

কম্পোজ ফাউন্ডেশন ১.৭.০ থেকে শুরু করে, স্ট্যান্ডার্ড লেজি লেআউটগুলিতে (যেমন 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 ব্যবহার করে স্ক্রোল আচরণ কাস্টমাইজ করুন

যদি আপনার ডিজাইনের জন্য একটি নির্দিষ্ট "পিভট" পয়েন্টের প্রয়োজন হয় (উদাহরণস্বরূপ, ফোকাস করা আইটেমটি বাম প্রান্ত থেকে ঠিক 30% দূরে রাখা), আপনি 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,
    )
}

2. কাস্টম স্পেক প্রয়োগ করুন

পজিশনিং প্রয়োগ করার জন্য আপনার লেআউটগুলিকে সাহায্যকারী দিয়ে মুড়িয়ে দিন। এটি আপনার ক্যাটালগের বিভিন্ন সারি জুড়ে একটি "সামঞ্জস্যপূর্ণ ফোকাস লাইন" তৈরি করার জন্য কার্যকর।

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 প্রিফিক্সটি সরিয়ে ফেলুন:

বন্ধ করা টিভি কম্পোনেন্ট কম্পোজ ফাউন্ডেশন প্রতিস্থাপন
টিভিলেজিরো LazyRow সম্পর্কে
টিভিলেজিকলাম অলস কলাম
টিভিলেজিহরিজন্টালগ্রিড অলস অনুভূমিক গ্রিড
টিভিলেজিভার্টিক্যালগ্রিড অলস ভার্টিক্যাল গ্রিড
পিভট অফসেট BringIntoViewSpec (LocalBringIntoViewSpec এর মাধ্যমে)