ग्रुप फ़ोकस टारगेट

focusGroup मॉडिफ़ायर का इस्तेमाल करके, एक से ज़्यादा फ़ोकस टारगेट को एक साथ ग्रुप किया जा सकता है. ग्रुप बनाने की सुविधा की मदद से, फ़ोकस के क्रम को मैनेज किया जा सकता है. साथ ही, यूज़र इंटरफ़ेस (यूआई) के लॉजिकल हिस्सों (जैसे कि टूलबार, डायलॉग ऐक्शन या कार्ड की सूचियां) को अलग किया जा सकता है. इसके अलावा, यह भी पता लगाया जा सकता है कि फ़ोकस किसी हिस्से में कब जाता है या वहां से कब हटता है.

फ़ोकस ग्रुप के कॉन्सेप्ट: एंटर करना, बाहर निकलना, और डिफ़ॉल्ट ट्रैवर्सल

फ़ोकस ग्रुप, अपने चाइल्ड फ़ोकस टारगेट के आस-पास एक नेविगेशन बाउंड्री बनाता है. इस बाउंड्री के पार फ़ोकस कैसे मूव होता है, यह दो मुख्य सिद्धांतों पर निर्भर करता है:

• Enter: यह इवेंट तब होता है, जब फ़ोकस ग्रुप के बाहर मौजूद किसी एलिमेंट से फ़ोकस, ग्रुप के अंदर मौजूद किसी एलिमेंट पर जाता है.
• Exit: यह इवेंट तब होता है, जब फ़ोकस ग्रुप के आखिरी इंटरनल एलिमेंट से हटकर किसी बाहरी फ़ोकस टारगेट पर चला जाता है.

पहली इमेज. फ़ोकस ग्रुप में शामिल होने और उससे बाहर निकलने के इवेंट.

फ़ोकस ट्रैवर्सल का डिफ़ॉल्ट तरीका

डिफ़ॉल्ट रूप से, जब किसी फ़ोकस ग्रुप को बाहर से फ़ोकस मिलता है, तो:

1. ग्रुप में शामिल होना: कंपोज़ अपने-आप, इंटरनल चाइल्ड फ़ोकस टारगेट चुनता है. एक डाइमेंशन (टैब) वाले नेविगेशन के लिए, यह विज़ुअल अपीयरेंस के क्रम में पहले चाइल्ड को चुनता है. दो डाइमेंशन (ऐरो बटन या डी-पैड) वाले नेविगेशन के लिए, यह उस चाइल्ड को चुनता है जो आने वाली दिशा के हिसाब से सबसे नज़दीक होता है.
2. ग्रुप में नेविगेट करना: नेविगेशन बटन को बार-बार दबाने से, फ़ोकस ग्रुप में शामिल सिबलिंग फ़ोकस टारगेट के बीच में चला जाता है.
3. ग्रुप से बाहर निकलना: जब उपयोगकर्ता ग्रुप में मौजूद आखिरी फ़ोकस टारगेट से आगे बढ़ जाता है, तो अगली बार बटन दबाने पर वह ग्रुप से बाहर निकल जाता है. साथ ही, फ़ोकस ग्रुप के बाहर मौजूद आस-पास के फ़ोकस टारगेट पर चला जाता है.

फ़ोकस एंट्री के रीडायरेक्शन को पसंद के मुताबिक बनाना

कई यूज़र इंटरफ़ेस (यूआई) डिज़ाइन में, डिफ़ॉल्ट एंट्री टारगेट (जैसे कि दिखने के क्रम में पहला चाइल्ड) उपयोगकर्ता के लिए सबसे सही या सुविधाजनक विकल्प नहीं होता.

इस्तेमाल का मकसद और उदाहरण

पुष्टि करने वाले डायलॉग बॉक्स पर विचार करें. इसमें बाईं ओर "रद्द करें" बटन और दाईं ओर मुख्य "पुष्टि करें" बटन मौजूद है. जब उपयोगकर्ता, फ़ॉर्म फ़ील्ड से बटन बार में नीचे की ओर नेविगेट करता है, तो:

• डिफ़ॉल्ट व्यवहार: फ़ोकस "रद्द करें" बटन पर होगा, क्योंकि यह विज़ुअल अपीयरेंस ऑर्डर में पहला बटन है.
• इच्छित व्यवहार: "पुष्टि करें" को प्राइमरी ऐक्शन के तौर पर सुझाया गया है. इसलिए, फ़ोकस ऑर्डर में पहले से बटन ग्रुप में शामिल होने पर, फ़ोकस सीधे "पुष्टि करें" पर जाना चाहिए. साथ ही, अगर उपयोगकर्ता को "रद्द करें" चुनना है, तो उसे बाईं ओर दबाने की अनुमति मिलनी चाहिए.

दूसरी इमेज. रद्द करें और पुष्टि करें बटन, जिनमें डिफ़ॉल्ट फ़ोकस एंट्री टारगेट है.

इस्तेमाल के अन्य सामान्य उदाहरणों में ये शामिल हैं:

• 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)")
    }
}
FocusGroup.kt

onEnter और onExit के अंदर, cancelFocusChange() को कॉल करके, फ़ोकस ट्रांज़िशन को पूरी तरह से ब्लॉक किया जा सकता है. इसके अलावा, requestedFocusDirection की जांच करके, रूटिंग को पसंद के मुताबिक बनाया जा सकता है. ऐसा यह तय करने के लिए किया जाता है कि उपयोगकर्ता ने Tab, Down या Left का इस्तेमाल करके नेविगेट किया है या नहीं.

स्क्रोल किए जा सकने वाले कंटेनर, डिफ़ॉल्ट रूप से फ़ोकस ग्रुप होते हैं

Jetpack Compose में, स्क्रोल किए जा सकने वाले कंटेनर, जैसे कि LazyRow, LazyColumn, और LazyVerticalGrid अपने-आप फ़ोकस ग्रुप के तौर पर काम करते हैं. onEnter या onExit कॉलबैक सेट करने के लिए, आपको उन पर focusGroup मॉडिफ़ायर को साफ़ तौर पर लागू करने की ज़रूरत नहीं है.