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

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

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

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

onVisibilityChanged-এর মাধ্যমে দৃশ্যমানতার পরিবর্তন ট্র্যাক করা

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

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

নিচের স্নিপেটটি কম্পোজ করার মতো আইটেমটি ব্যবহারকারীকে ৩ সেকেন্ড ধরে দেখানোর পরে ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করে বেগুনি করে দেয়:

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 হল সেট করা এবং স্ক্রিনে সম্পূর্ণভাবে দৃশ্যমান হওয়ার আগেই তৃতীয় বট লোড হয়।