लिखने पर फ़ोकस करें

जब कोई उपयोगकर्ता आपके ऐप्लिकेशन के साथ इंटरैक्ट करता है, तो वह अक्सर अपनी स्क्रीन पर मौजूद एलिमेंट को टच करके ऐसा करता है. हालांकि, इंटरैक्शन का यह इकलौता तरीका नहीं है. इंटरैक्शन के अन्य तरीके ये हो सकते हैं:

  • ChromeOS का कोई उपयोगकर्ता, स्क्रीन पर नेविगेट करने के लिए, अपने फ़िज़िकल कीबोर्ड पर मौजूद ऐरो बटन का इस्तेमाल कर सकता है.
  • कोई व्यक्ति गेम खेलते समय, गेम के मेन्यू में नेविगेट करने के लिए, अपने कनेक्ट किए गए गेम कंट्रोलर का इस्तेमाल कर सकता है.
  • मोबाइल ऐप्लिकेशन का कोई उपयोगकर्ता, ऑन-स्क्रीन कीबोर्ड का इस्तेमाल करके एलिमेंट के बीच साइकल कर सकता है.

इन मामलों में, यह ट्रैक करना ज़रूरी है कि किसी भी समय कौनसे कॉम्पोनेंट पर फ़ोकस है. इसे हम फ़ोकस कहते हैं. स्क्रीन पर मौजूद एलिमेंट को लॉजिकल क्रम में फ़ोकस किया जाना चाहिए. Jetpack Compose में, फ़ोकस को मैनेज करने का डिफ़ॉल्ट तरीका होता है. यह ज़्यादातर मामलों में सही होता है. हालांकि, कुछ मामलों में आपको इस डिफ़ॉल्ट तरीके में बदलाव करना पड़ सकता है.

यहां दिए गए पेजों पर, अपने ऐप्लिकेशन में फ़ोकस का इस्तेमाल करने का तरीका बताया गया है:

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

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

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

यूज़र इंटरफ़ेस (यूआई) में कई तरीकों से नेविगेट किया जा सकता है. इनमें से कुछ तरीकों के बारे में ज़्यादातर उपयोगकर्ताओं को पहले से पता होगा:

  • TAB: एक डाइमेंशन वाला नेविगेशन, जिसमें आगे या पीछे जाया जा सकता है. TAB नेविगेशन से, फ़ोकस क्रम में अगले या पिछले एलिमेंट पर चला जाता है. डिफ़ॉल्ट रूप से, Compose, Composables के एलान के क्रम का पालन करता है. एक डाइमेंशन वाला नेविगेशन, कीबोर्ड पर मौजूद tab बटन या स्मार्टवॉच पर मौजूद रोटरी बेज़ल की मदद से किया जा सकता है. इस तरह के फ़ोकस सर्च में, स्क्रीन पर मौजूद हर एलिमेंट पर जाया जाता है.
  • ऐरो बटन: दो डाइमेंशन वाला नेविगेशन, जिसमें लेफ़्ट, राइट, अप या डाउन जाया जा सकता है. दो डाइमेंशन वाला नेविगेशन, टीवी पर मौजूद डी-पैड या कीबोर्ड पर मौजूद ऐरो बटन की मदद से किया जा सकता है. इसके ट्रैवर्सल क्रम में, सिर्फ़ किसी दिए गए लेवल पर मौजूद एलिमेंट पर जाया जाता है. डी-पैड के बीच में मौजूद बटन और 'वापस जाएं' बटन का इस्तेमाल करके, किसी दूसरे लेवल पर जाया जा सकता है.

यहां दिए गए स्क्रीनशॉट को उदाहरण के तौर पर लें. इसमें चार बटन हैं, जो एक के नीचे एक हैं. आपको इन सभी बटन के बीच, दिखने के क्रम में साइकल करनी है. Jetpack Compose में यह सुविधा डिफ़ॉल्ट रूप से मिलती है. टूलकिट की मदद से, tab बटन का इस्तेमाल करके, वर्टिकल क्रम में ऊपर से नीचे की ओर हर कंपोज़ेबल के बीच साइकल की जा सकती है. इसके अलावा, अप या डाउन ऐरो बटन दबाकर, फ़ोकस को एक जगह से दूसरी जगह ले जाया जा सकता है.

इस स्क्रीनशॉट में, छोटे साइज़ के डिवाइस पर एक के नीचे एक वर्टिकल तरीके से रखे गए बटन की सूची दिखाई गई है.
पहली इमेज. छोटे फ़ॉर्म फ़ैक्टर में दिखने वाले बटन की सूची

जब आप किसी दूसरे तरह के लेआउट पर स्विच करते हैं, तो चीज़ें थोड़ी बदल जाती हैं. अगर आपके लेआउट में एक से ज़्यादा कॉलम हैं, जैसे कि यहां दिया गया लेआउट, तो Jetpack Compose की मदद से, बिना कोई कोड जोड़े उनके बीच नेविगेट किया जा सकता है. अगर आप tab बटन दबाते हैं, तो Jetpack Compose, एलान के क्रम में आइटम को अपने-आप हाइलाइट करता है. यह क्रम, पहले से चौथे तक होता है. अपने कीबोर्ड पर मौजूद ऐरो बटन का इस्तेमाल करने से, 2D स्पेस में चुनी गई चीज़, आपकी चुनी गई दिशा में जाती है.

Column {
    Row {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Row {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}

Composables को दो Rows में एलान किया जाता है. साथ ही, फ़ोकस एलिमेंट को क्रम में, पहले से चौथे तक एलान किया जाता है. tab बटन दबाने पर, फ़ोकस का क्रम इस तरह होता है:

बड़ी स्क्रीन पर, अगल-बगल दो कॉलम में रखे गए बटन की सूची का स्क्रीनशॉट.
दूसरी इमेज. बड़े फ़ॉर्म फ़ैक्टर में, दो कॉलम में एक के बगल में एक रखे गए बटन की सूची

यहां दिए गए स्निपेट में, आइटम को Rows के बजाय Columns में एलान किया जाता है:

Row {
    Column {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Column {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}

इस लेआउट में, आइटम के बीच वर्टिकल क्रम में, ऊपर से नीचे की ओर, स्क्रीन की शुरुआत से आखिर तक ट्रैवर्स किया जाता है:

बड़ी स्क्रीन पर, अगल-बगल दो कॉलम में रखे गए बटन की सूची का स्क्रीनशॉट.
तीसरी इमेज. बड़े फ़ॉर्म फ़ैक्टर में, दो कॉलम में एक के बगल में एक रखे गए बटन की सूची

एक डाइमेंशन वाले नेविगेशन में अंतर होने के बावजूद, दो डाइमेंशन वाले नेविगेशन के मामले में, पिछले दोनों सैंपल एक जैसा अनुभव देते हैं. आम तौर पर, ऐसा इसलिए होता है, क्योंकि दोनों उदाहरणों में स्क्रीन पर मौजूद आइटम की जगह एक जैसी होती है. पहले Column से दाईं ओर नेविगेट करने पर, फ़ोकस दूसरे Column पर चला जाता है. वहीं, पहले Row से नीचे की ओर नेविगेट करने पर, फ़ोकस उसके नीचे मौजूद Row पर चला जाता है.

आगे बढ़ें
फ़ोकस ट्रैवर्सल ऑर्डर बदलें