গ্রুপ ফোকাস টার্গেট

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

ফোকাস গ্রুপ কনসেপ্ট: প্রবেশ, প্রস্থান ও ডিফল্ট ট্রাভার্সাল

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

  • Enter: ফোকাস গ্রুপ এর বাইরের কোনও এলিমেন্ট থেকে গ্রুপের ভিতরের কোনও এলিমেন্টে ফোকাস ট্রানজিশন হলে এই ইভেন্টটি ঘটে।
  • বেরিয়ে আসা: ফোকাস যখন গ্রুপের শেষ ইন্টার্নাল এলিমেন্ট থেকে বেরিয়ে এসে এক্সটার্নাল ফোকাস টার্গেটে ট্রানজিট করে তখন এই ইভেন্টটি ঘটে।
ফোকাস গ্রুপের সীমানা জুড়ে এন্টার ও এক্সিট ট্রানজিশন দেখানো ডায়াগ্রাম।
ছবি ১. Enter ও Exit ইভেন্ট সহ ফোকাস গ্রুপ।

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

ডিফল্ট হিসেবে, কোনও ফোকাস গ্রুপ বাইরে থেকে ফোকাস পেলে:

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

ফোকাস এন্ট্রি রিডাইরেকশন কাস্টমাইজ করা

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

উদ্দেশ্য ও ব্যবহারিক ক্ষেত্র

একটি কনফার্মেশন ডায়ালগ বিবেচনা করুন যেখানে বাঁদিকে "বাতিল করুন" বোতাম এবং ডানদিকে প্রাথমিক "কনফার্ম করুন" বোতাম আছে। ব্যবহারকারী ফর্ম ফিল্ড থেকে নেভিগেট করে বোতাম বারে গেলে:

  • ডিফল্ট আচরণ: "বাতিল করুন" বোতামটি ভিজ্যুয়াল অ্যাপিয়ারেন্স অর্ডারে প্রথম হওয়ায় ফোকাস সেখানে যাবে।
  • আচরণ যা প্রত্যাশিত: যেহেতু "কনফার্ম করুন" হল প্রাথমিক সাজেস্ট করা অ্যাকশন, ফোকাস অর্ডারে আগে থেকে বোতাম গ্রুপে প্রবেশ করার সময় আপনি হয়ত সরাসরি "কনফার্ম করুন" বিকল্পে ফোকাস করতে চাইবেন, একই সাথে ব্যবহারকারীকে প্রয়োজন হলে "বাতিল করুন" বিকল্প বেছে নেওয়ার জন্য বাঁদিকে তীরচিহ্ন টিপতে দিতে হবে।
বোতাম গ্রুপে ডিফল্ট ফোকাস এন্ট্রি।
ছবি ২. বাতিল করুন ও কনফার্ম করুন বোতামে ডিফল্ট ফোকাস এন্ট্রি টার্গেট থাকে।

অন্যান্য সাধারণ ব্যবহারের মধ্যে এগুলি পড়ে:

  • 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()-কে কল করে সীমানা জুড়ে ফোকাস ট্রানজিশন সম্পূর্ণ ব্লক করতে পারেন অথবা requestedFocusDirection-কে কল করে ব্যবহারকারী Tab, Down বা Left ব্যবহার করে নেভিগেট করেছেন কিনা তার উপর ভিত্তি করে রাউটিং কাস্টমাইজ করতে পারেন।

ডিফল্ট হিসেবে স্ক্রল করা যায় এমন কন্টেনার হল ফোকাস গ্রুপ

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