কম্পোজে দৃশ্যমানতা ট্র্যাকিং

স্ক্রিনে কোনো UI এলিমেন্ট কখন দৃশ্যমান থাকে তা ট্র্যাক করা বিভিন্ন ক্ষেত্রে সহায়ক, যেমন অ্যানালিটিক্স লগ করা, UI স্টেট পরিচালনা করা এবং স্বয়ংক্রিয়ভাবে ভিডিও কন্টেন্ট প্লে বা পজ করে রিসোর্স অপ্টিমাইজ করা। UI এলিমেন্টের দৃশ্যমানতা ট্র্যাক করার জন্য Compose বেশ কিছু মডিফায়ার অফার করে, যেমন:

• onVisibilityChanged - এই মডিফায়ারটি কোনো কম্পোজেবলের দৃশ্যমানতা পরিবর্তিত হলে আপনাকে অবহিত করে। প্রতিবার কম্পোজেবলটি দৃশ্যমান হওয়ার সাথে সাথে কোনো অ্যাকশন বা সাইড এফেক্ট ট্রিগার করার জন্য এটি আদর্শ।
• onLayoutRectChanged - এই মডিফায়ারটি রুট, উইন্ডো এবং স্ক্রিনের সাপেক্ষে একটি কম্পোজেবলের সীমানা সম্পর্কে তথ্য প্রদান করে। এটি নিম্ন-স্তরের নিয়ন্ত্রণ প্রদান করে এবং onVisibilityChanged এর ভিত্তিগত API। এই মডিফায়ারটি onGloballyPositioned এর অনুরূপ, কিন্তু এটি আরও ভালো পারফরম্যান্স এবং বর্ধিত নমনীয়তা প্রদান করে।

আপনি এই API-গুলো মডিফায়ার চেইনের অংশ হিসেবে যেকোনো কম্পোজেবলের সাথে ব্যবহার করতে পারেন।

onVisibilityChanged ব্যবহার করে দৃশ্যমানতার পরিবর্তনগুলি ট্র্যাক করুন।

ব্যবহারকারীর কাছে কখন কোনো আইটেম দৃশ্যমান বা আংশিকভাবে দৃশ্যমান, তা বুঝতে পারলে আপনি অ্যানালিটিক্স ট্র্যাক করতে (যেমন, দর্শক সংখ্যা), পারফরম্যান্স অপ্টিমাইজ করতে (শুধুমাত্র আইটেমটি দৃশ্যমান থাকলেই নেটওয়ার্ক থেকে ডেটা আনা বা প্রি-ফেচ করা), এমনকি বিভিন্ন ইভেন্ট ট্রিগার করতেও (যেমন, ভিডিও প্লে বা পজ করা) পারেন।

কোনো আইটেমের দৃশ্যমানতা পরিবর্তিত হলে বিজ্ঞপ্তি পেতে, onVisibilityChanged মডিফায়ারটি ব্যবহার করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

Text(
    text = "Some text",
    modifier = Modifier
        .onVisibilityChanged { visible ->
            if (visible) {
                // Do something if visible
            } else {
                // Do something if not visible
            }
        }
        .padding(vertical = 8.dp)
)
VisibilitySnippets.kt

onVisibilityChanged মডিফায়ারটি একটি বুলিয়ান ভ্যালু প্রদান করে যা কম্পোজেবলটির বর্তমান ভিজিবিলিটি অবস্থা প্রতিফলিত করে। এছাড়াও, এটি minFraction এবং minDurationMs এর মতো প্যারামিটার প্রদান করে, যা ভিজিবিলিটি কলব্যাকটি কখন ট্রিগার করতে হবে তার উপর আপনাকে আরও সূক্ষ্ম নিয়ন্ত্রণ দেয়।

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

ভিজিবিলিটি কলব্যাক ট্রিগার করার আগে একটি কম্পোজেবলের উপর সময়সীমা নির্ধারণ করুন।

কিছু পরিস্থিতিতে, আপনি হয়তো চাইতে পারেন যে কোনো আইটেম ব্যবহারকারীর কাছে একটি নির্দিষ্ট সময় ধরে দৃশ্যমান থাকার পরেই কেবল একটি অ্যাকশন চালু হবে। উদাহরণস্বরূপ, একটি ভিডিও ব্যবহারকারীর কাছে কিছু সময় ধরে দৃশ্যমান থাকলে আপনি সেটি স্বয়ংক্রিয়ভাবে চালু করতে পারেন।

একটি আইটেম একটি নির্দিষ্ট সময় ধরে দৃশ্যমান থাকার পর কোনো অ্যাকশন ট্রিগার করতে, onVisibilityChanged মডিফায়ারে minDurationMs প্যারামিটারটি ব্যবহার করুন। এই প্যারামিটারটি নির্দিষ্ট করে যে কলব্যাকটি ট্রিগার হওয়ার জন্য একটি কম্পোজেবলকে ন্যূনতম কত সময় ধরে অবিচ্ছিন্নভাবে দৃশ্যমান থাকতে হবে। যদি নির্দিষ্ট সময়কাল শেষ হওয়ার আগেই কম্পোজেবলটি অদৃশ্য হয়ে যায়, তাহলে টাইমারটি রিসেট হয়ে যায়। এর ডিফল্ট মান হলো ০ মিলিসেকেন্ড ।

নিম্নলিখিত কোড স্নিপেটটি কম্পোজেবলটি ব্যবহারকারীর কাছে ৩ সেকেন্ড ধরে দৃশ্যমান থাকার পর ব্যাকগ্রাউন্ডকে বেগুনি রঙে পরিবর্তন করে দেয়:

var background by remember { mutableStateOf(PalePink) }
Card(
    modifier = modifier
        // ...
        .onVisibilityChanged(minDurationMs = 3000) {
            if (it) {
                background = MutedPlum
            }
        }
) {

    Box(
        modifier = Modifier
            // ...
            .background(background),
        contentAlignment = Alignment.Center,
    ) {
        // ...
    }
}
VisibilitySnippets.kt

সর্বনিম্ন দৃশ্যমান ভগ্নাংশ সেট করুন

স্ক্রোলযোগ্য কন্টেন্ট (যেমন, LazyColumn ) নিয়ে কাজ করার সময়, স্ক্রিনের আকার ছাড়িয়ে যাওয়া আইটেমগুলোর জন্য ডেটা ফেচিং অপ্টিমাইজ করতে কম্পোজেবলের ভিজিবিলিটি কলব্যাকে একটি ন্যূনতম দৃশ্যমান ভগ্নাংশ সেট করা উপযোগী।

এই ধরনের ক্ষেত্রে, কম্পোজেবলটিকে দৃশ্যমান হিসেবে চিহ্নিত করার জন্য স্ক্রিনে কতটুকু অংশ থাকা প্রয়োজন, তা নির্ধারণ করতে onVisibilityChanged মডিফায়ারে minFractionVisible প্যারামিটারটি ব্যবহার করুন। এটি 0.0f থেকে 1.0f পর্যন্ত ফ্লোট ভ্যালু সাপোর্ট করে এবং ডিফল্টরূপে 1.0f হিসেবে সেট করা থাকে। 1.0f অর্থ হলো, কলব্যাকটি ট্রিগার হওয়ার জন্য কম্পোজেবলটিকে স্ক্রিনে সম্পূর্ণরূপে দৃশ্যমান থাকতে হবে।

LazyColumn(
    modifier = modifier.fillMaxSize()
) {
    item {
        Box(
            modifier = Modifier
                // ...
                // Here the visible callback gets triggered when 20% of the composable is visible
                .onVisibilityChanged(
                    minFractionVisible = 0.2f,
                ) { visible ->
                    if (visible) {
                        // Call specific logic here
                        // viewModel.fetchDataFromNetwork()
                    }
                }
                .padding(vertical = 16.dp)
        ) {
            Text(
                text = "Sample Text",
                modifier = Modifier.padding(horizontal = 16.dp)
            )
        }
    }
}
VisibilitySnippets.kt

পূর্বে ব্যবহৃত উদাহরণটি কম্পোজেবলটি সম্পূর্ণরূপে দৃশ্যমান হওয়ার আগেই নেটওয়ার্ক থেকে অ্যান্ড্রয়েডিফাই বটগুলোকে প্রি-লোড করে। চিত্র ২-এ, তৃতীয় বটটি লোড হয় না, কারণ কম্পোজেবলটি সম্পূর্ণরূপে দৃশ্যমান নয়। চিত্র ৩-এ, minFractionVisible সেট করা হয়েছে, এবং তৃতীয় বটটি স্ক্রিনে সম্পূর্ণরূপে দৃশ্যমান হওয়ার আগেই লোড হয়ে যায়।