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

প্রযোজ্য এক্সআর ডিভাইস

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

এক্সআর ডিভাইসের প্রকারভেদ সম্পর্কে জানুন →

এক্সআর ডিভাইসের প্রকারভেদ সম্পর্কে জানুন →

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 ল্যাম্বডার ভিতরে পেজ 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