Compose-এ দৃশ্যমানতা ট্র্যাক করা

স্ক্রিনে কোনও 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 মডিফায়ারের ক্ষেত্রেও সিকোয়েন্সিং গুরুত্বপূর্ণ। আগের উদাহরণে এমন একটি কম্পোজেবল ফাংশন দেখানো হয়েছে যা প্যাডিং সহ টেক্সট রেন্ডার করে। প্যাডিংয়ের সাথে মডিফায়ার যাতে সম্পূর্ণ কম্পোজেবলকে প্রভাবিত করে তা নিশ্চিত করতে, padding মডিফায়ারের আগে onVisibilityChanged মডিফায়ার যোগ করুন।

দৃশ্যমানতা কলব্যাক ট্রিগার করার আগে কম্পোজেবলে সময়সীমা সেট করুন

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

কোনও আইটেম নির্দিষ্ট সময় ধরে দেখার পরে কোনও অ্যাকশন ট্রিগার করতে, 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

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