Jetpack Compose Glimmer-এ হরিজন্টাল পেজার

প্রযোজ্য XR ডিভাইস

এইসব XR ডিভাইসের জন্য অভিজ্ঞতা তৈরি করতে এই নির্দেশিকা আপনাকে সাহায্য করে।

XR ডিভাইসের ধরন সম্পর্কে জানুন →

XR ডিভাইসের ধরন সম্পর্কে জানুন →

Jetpack Compose Glimmer-এ, GlimmerHorizontalPager হল একটি লেজি কম্পোজ করা, অনুভূমিকভাবে স্ক্রল করা যায় এমন লেআউট যা তার পৃষ্ঠাগুলিকে ক্রমানুসারে সাজায়। এটি Compose Foundation-এ পাওয়া স্ট্যান্ডার্ড HorizontalPager-এর মতো, তবে Glimmer আচরণ ও ডিফল্ট ভ্যালু সহ ডিসপ্লে গ্লাসের জন্য কাস্টমাইজ করা হয়েছে।

সাধারণত, একটি সময়ে একটি পৃষ্ঠা বেশি করে দেখানো হয়। আরও উন্নত অভিজ্ঞতা প্রদান করতে, পেজার স্ন্যাপ অ্যানিমেশন ব্যবহার করে যাতে ব্যবহারকারীর স্ক্রল জেসচার শেষ হওয়ার পরে পৃষ্ঠাটি সবসময় ভিউপোর্ট সীমানার মধ্যে ঠিকমতো সেট হয়ে যায়।

প্রধান প্যারামিটার ও লেআউট বিকল্প

GlimmerHorizontalPager স্পেসিং, লেআউট অ্যালাইনমেন্ট ও লেজি লোডিং কন্ট্রোল করার জন্য কাস্টমাইজ করা যায় এমন প্যারামিটার প্রদান করে। এইসব প্যারামিটারের মধ্যে কয়েকটি হল:

সব উপলভ্য প্যারামিটার সম্পর্কে তথ্য পেতে, সম্পূর্ণ রেফারেন্স ডকুমেন্টেশন দেখুন।

অ্যানিমেটেড টেক্সট মোশন সংক্রান্ত সাজেশন

ডিসপ্লে গ্লাসে পেজার স্ন্যাপ অ্যানিমেশন ও ট্রানজিশনের সময়, ডিফল্ট টেক্সট রেন্ডারিং পিক্সেল-স্ন্যাপিং আর্টিফ্যাক্ট দেখাতে পারে। সেটিং TextMotion.Animated লেআউট অ্যানিমেশন জুড়ে মসৃণ রেন্ডারিং নিশ্চিত করে:

Text(
    text = "Page: $page",
    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
)
GlimmerHorizontalPagerSample.kt

যেমন: হরিজন্টাল পেজার

নিম্নলিখিত কোডটি দেখায় যে কীভাবে ১০টি পৃষ্ঠা সহ একটি প্রাথমিক হরাইজন্টাল পেজার তৈরি করতে হয় এবং প্রতিটি পৃষ্ঠার মধ্যে একটি করে কার্ড প্লেস করতে হয়:

// Hoist the pager state, specifying the total page count with a lambda.
val pagerState = rememberGlimmerPagerState(pageCount = { 10 })

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
) { page ->
    // Use Glimmer components like Card and Text for optimized glasses styling.
    Card(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "Page: $page",
            // Recommended: use TextMotion.Animated for smooth transitions in a pager.
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
}
GlimmerHorizontalPagerSample.kt

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

• স্টেট: পেজারের স্টেট ম্যানেজ করতে rememberGlimmerPagerState(pageCount = { 10 }) ব্যবহার করে GlimmerPagerState ইনিশিয়ালাইজ করে।
• পৃষ্ঠার স্লট কন্টেন্ট: প্রতিটি কার্ড রেন্ডার করার জন্য GlimmerPagerScope lambda-এর মধ্যে পৃষ্ঠা ইন্ডেক্স page পায়।
• স্মুথ অ্যানিমেশন টেক্সট স্টাইল: LocalTextStyle.current কপি করে এবং TextMotion.Animated স্পষ্টভাবে চালু করে।
• অটোমেটিক পৃষ্ঠা নির্দেশক: এক্সটার্নাল ইন্ডিকেটর কম্পোনেন্ট প্রয়োজন হয় এমন স্ট্যান্ডার্ড কম্পোজ পেজারের বিপরীতে, GlimmerHorizontalPager অটোমেটিক ডিফল্ট হিসেবে একটি ডট-স্টাইল পৃষ্ঠা নির্দেশক এম্বেড করে।

পৃষ্ঠা ইন্ডিকেটর

ডিফল্ট হিসেবে, GlimmerHorizontalPager GlimmerHorizontalPagerDefaults.PageIndicator ব্যবহার করে একটি ডট-ভিত্তিক পৃষ্ঠা নির্দেশক রেন্ডার করে। ইন্ডিকেটর অটোমেটিক তার কালার স্কিম অ্যাডজাস্ট করে নেয়:

• অ্যাক্টিভ ডটটি আশেপাশের সবচেয়ে কাছের এলিমেন্ট থেকে পাওয়া কন্টেন্ট কালার ব্যবহার করে surface।

নির্দিষ্ট রঙ উল্লেখ করতে আপনি কাস্টমাইজ করা PageIndicator পাস করতে পারেন অথবা ডটের জায়গায় আপনার নিজস্ব কাস্টম লেআউট ব্যবহার করতে পারেন:

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
    // Use a page numbers instead of the default dot-indicator
    pageIndicator = {
        Text(
            text = "${pagerState.currentPage + 1} / ${pagerState.pageCount}",
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
)
GlimmerHorizontalPagerSample.kt