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

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

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

দৃশ্যমান ভগ্নাংশ minFractionVisible-এর থেকে বেশি হলে অথবা কম্পোজেবল সম্পূর্ণ দৃশ্যমান হলে বা ভিউপোর্ট পূরণ করলে, কলব্যাক true রিসিভ করে। অন্যথায়, এটি false পায়।

LazyColumn(
    modifier = modifier.fillMaxSize()
) {
    item {
        Box(
            modifier = Modifier
                // ...
                // Here `visible` is `true` when more than 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 সেট না করে।	ছবি ৩. minFractionVisible-এর সাথে 0.2f হিসেবে সেট করা হয়েছে।

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

মনে রাখবেন: স্বচ্ছতার উদ্দেশ্যে পূর্ববর্তী ভিডিওগুলি ইচ্ছাকৃতভাবে স্লো ডাউন করা হয়েছে।

একটি কম্পোজেবল লুকান এবং এর স্পেস রাখুন

কোনও কম্পোজেবলের আশেপাশের লেআউট পরিবর্তন না করে সেটি লুকাতে, visible মডিফায়ার ব্যবহার করুন। আপনি false পাস করলে, কম্পোজ করার উপযুক্ত আইটেমটি এখনও পরিমাপ করা হয় কিন্তু সেটি প্লেস বা ড্র করা হয় না। alpha-কে 0f-এ সেট করার মতো নয়, visible(false) অ্যাক্সেসিবিলিটি ট্রি থেকে এলিমেন্ট সরিয়ে দেয় এবং লেআউট স্পেস বজায় রেখে টাচ ইন্টার‍্যাকশন বন্ধ করে দেয়।

নিচের উদাহরণে একটি চেক আইকন দেখানো হয়েছে যেটি লুকানো থাকলেও নিজের জায়গা ধরে রাখে, তাই এর পাশে থাকা টেক্সট সরে যায় না:

Row(modifier, verticalAlignment = Alignment.CenterVertically) {
    Icon(
        painter = painterResource(R.drawable.check),
        contentDescription = "Saved",
        modifier = Modifier
            // The icon keeps its space while it's hidden, so the text doesn't move.
            .visible(isSaved)
    )
    Text("Draft", Modifier.padding(start = 8.dp))
}
VisibilitySnippets.kt

কম্পোজ করার উপযুক্ত আইটেম দেখা গেলে বা অদৃশ্য হয়ে গেলে, কম্পোজ করার উপযুক্ত আইটেমের চারপাশে লেআউট যাতে না সরে যায়, তার জন্য visible ব্যবহার করুন। কম্পোজেবল ও তার স্পেস সরাতে, এটি কল করবেন না অথবা এটি অ্যানিমেট করে ইন ও আউট করতে AnimatedVisibility ব্যবহার করুন।

মনে রাখবেন: শেয়ার করা এলিমেন্ট ট্রানজিশনে কম্পোজেবলে visible ব্যবহার করবেন না, কারণ এটি প্লেসমেন্টকে বাধা দেয়।