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

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

চিত্র ২। minFractionVisible সেট না করেই।	চিত্র ৩। minFractionVisible কে 0.2f হিসেবে সেট করা হয়েছে।

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

দ্রষ্টব্য: স্পষ্টতার জন্য পূর্ববর্তী ভিডিওগুলি ইচ্ছাকৃতভাবে ধীর করা হয়েছে।