গ্রুপ ফোকাস লক্ষ্য

আপনি ` focusGroup মডিফায়ার ব্যবহার করে একাধিক ফোকাস টার্গেটকে একসাথে গ্রুপ করতে পারেন। গ্রুপিং আপনাকে ফোকাসের স্তরবিন্যাস পরিচালনা করতে, যৌক্তিক UI অঞ্চলগুলিকে (যেমন টুলবার, ডায়ালগ অ্যাকশন বা কার্ড তালিকা) আলাদা করতে এবং কোনো অঞ্চলে ফোকাস প্রবেশ বা প্রস্থান করার সময় তা আটকাতে সাহায্য করে।

ফোকাস গ্রুপের ধারণা: প্রবেশ, প্রস্থান এবং ডিফল্ট ট্র্যাভার্সাল

একটি ফোকাস গ্রুপ তার শিশু ফোকাস লক্ষ্যবস্তুগুলোকে ঘিরে একটি সুসংহত দিকনির্দেশনার সীমানা স্থাপন করে। কীভাবে ফোকাস এই সীমানা অতিক্রম করে তা বোঝার জন্য দুটি মূল ধারণা প্রয়োজন:

  • এন্টার : ফোকাস গ্রুপের বাইরের কোনো এলিমেন্ট থেকে গ্রুপের ভেতরের কোনো এলিমেন্টে ফোকাস স্থানান্তরিত হলে যে ইভেন্টটি ঘটে।
  • প্রস্থান : যে ঘটনায় মনোযোগ গোষ্ঠীর শেষ অভ্যন্তরীণ উপাদান থেকে সরে গিয়ে একটি বাহ্যিক লক্ষ্যের দিকে স্থানান্তরিত হয়।
একটি ফোকাস গ্রুপের সীমানা জুড়ে প্রবেশ এবং প্রস্থানের প্রক্রিয়া দেখানো চিত্র।
চিত্র ১. প্রবেশ ও প্রস্থান পর্বসহ ফোকাস গ্রুপ।

ডিফল্ট ফোকাস ট্র্যাভার্সাল আচরণ

ডিফল্টরূপে, যখন কোনো ফোকাস গ্রুপ বাইরে থেকে ফোকাস পায়:

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

ফোকাস এন্ট্রি পুনঃনির্দেশনা কাস্টমাইজ করুন

অনেক UI ডিজাইনে, ডিফল্ট এন্ট্রি টার্গেট (যেমন উপস্থিতির ক্রমানুসারে প্রথম চাইল্ড) ব্যবহারকারীর জন্য সবচেয়ে যৌক্তিক বা সুবিধাজনক পছন্দ হয় না।

উদ্দেশ্য এবং ব্যবহারের ক্ষেত্র

একটি কনফার্মেশন ডায়ালগ বক্সের কথা ভাবুন, যার বাম দিকে একটি 'Cancel' বাটন এবং ডান দিকে একটি মূল 'Confirm' বাটন রয়েছে। যখন ব্যবহারকারী একটি ফর্ম ফিল্ড থেকে বাটন বারের নিচের দিকে যান:

  • ডিফল্ট আচরণ : ফোকাস 'Cancel' বাটনের উপর পড়বে, কারণ এটি দৃশ্যমান ক্রমানুসারে প্রথম বাটন।
  • উদ্দিষ্ট আচরণ : যেহেতু 'Confirm' হলো প্রধান প্রস্তাবিত পদক্ষেপ, তাই আপনি চাইতে পারেন যে ফোকাস অর্ডারের আগের দিক থেকে বাটন গ্রুপে প্রবেশ করার সময় ফোকাস সরাসরি 'Confirm'-এর উপর পড়ুক, এবং একই সাথে প্রয়োজনে ব্যবহারকারী যেন বাম বাটন চেপে 'Cancel' নির্বাচন করতে পারেন।
একটি বাটন গ্রুপে ডিফল্ট ফোকাস প্রবেশ।
চিত্র ২. ডিফল্ট ফোকাস এন্ট্রি টার্গেটসহ বাতিল এবং নিশ্চিত বাটন।

অন্যান্য সাধারণ ব্যবহারের ক্ষেত্রগুলির মধ্যে রয়েছে:

  • একটি TabRow প্রবেশ করার সময় ফোকাস সরাসরি বর্তমানে নির্বাচিত ট্যাবে চলে যায়।
  • মিডিয়া প্লেব্যাক বারে প্রবেশ করার সময় ফোকাস সরাসরি 'প্লে / পজ' কন্ট্রোলে নিয়ে যাওয়া।

onEnter এবং FocusRequester দিয়ে বাস্তবায়ন

ফোকাস গ্রুপে প্রবেশ করার পর মনোযোগের কেন্দ্রবিন্দু পরিবর্তন করতে:

  1. সংশ্লিষ্ট ফোকাস টার্গেটগুলোকে পরিবেষ্টনকারী প্যারেন্ট কন্টেইনারে focusGroup মডিফায়ারটি প্রয়োগ করুন।
  2. কন্টেইনারে focusProperties মডিফায়ারটি প্রয়োগ করুন এবং onEnter কলব্যাকটি কনফিগার করুন।
  3. onEnter কলব্যাকে (যা FocusEnterExitScope এর আওতাভুক্ত), focusRequester ব্যবহার করে পছন্দের ডিফল্ট চাইল্ডের সাথে যুক্ত একটি FocusRequester উপর requestFocus() কল করুন।

val defaultChildRequester = remember { FocusRequester() }

Row(
    modifier = Modifier
        .focusGroup()
        .focusProperties {
            // Intercept entry into this group and redirect focus to the primary action
            onEnter = {
                defaultChildRequester.requestFocus()
            }
        }
) {
    Button(onClick = { /* Cancel action */ }) {
        Text("Cancel")
    }
    Button(
        onClick = { /* Confirm action */ },
        modifier = Modifier.focusRequester(defaultChildRequester)
    ) {
        Text("Confirm (Default)")
    }
}

onEnter এবং onExit ভিতরে, আপনি cancelFocusChange() কল করে সীমানা জুড়ে ফোকাস পরিবর্তন সম্পূর্ণরূপে ব্লক করতে পারেন, অথবা ব্যবহারকারী Tab , Down , বা Left ব্যবহার করে নেভিগেট করেছে কিনা তার উপর ভিত্তি করে রাউটিং কাস্টমাইজ করতে requestedFocusDirection পরীক্ষা করতে পারেন।

স্ক্রোলযোগ্য কন্টেইনারগুলো ডিফল্টরূপে ফোকাস গ্রুপ হিসেবে থাকে।

Jetpack Compose-এ, LazyRow , LazyColumn , এবং LazyVerticalGrid এর মতো স্ক্রোলযোগ্য কন্টেইনারগুলো স্বয়ংক্রিয়ভাবে ফোকাস গ্রুপ হিসেবে কাজ করে। onEnter বা onExit কলব্যাক সেট করার জন্য এগুলোতে আলাদাভাবে focusGroup মডিফায়ার প্রয়োগ করার প্রয়োজন নেই।

{% হুবহু %} {% endverbatim %} {% হুবহু %} {% endverbatim %}