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

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

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

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

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

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

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

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

1. ग्रुप में जाना: Compose, अपने-आप किसी चाइल्ड फ़ोकस टारगेट को चुनता है. एक डाइमेंशन वाले (Tab) नेविगेशन के लिए, यह विज़ुअल अपियरेंस के क्रम में पहले चाइल्ड को चुनता है. दो डाइमेंशन वाले नेविगेशन (ऐरो बटन या डी-पैड) के लिए, यह उस चाइल्ड को चुनता है जो ज्यामितीय रूप से, आने वाली दिशा के सबसे करीब होता है.
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 मॉडिफ़ायर लागू करने की ज़रूरत नहीं है.