💆🏻 🕧 👀 इशारे प्रबंधन: इशारा संघर्ष से निपटने। भाग ३ 🎅🏽 📄 👩🏽‍🤝‍👩🏻

उन्नत और बुनियादी एंड्रॉइड डेवलपमेंट कोर्स के शुभारंभ से पहले लेख का अनुवाद तैयार किया गया था ।

यह इशारे पर नियंत्रण के बारे में एक श्रृंखला में तीसरा लेख है। यदि आपने उन्हें याद किया है तो आप पहले और दूसरे भाग के अनुवाद से खुद को परिचित कर सकते हैं।

पिछले लेखों में, हमने स्क्रीन स्पेस को किनारे से किनारे तक भरने के विषय को कवर किया था। इस लेख में, हम देखेंगे कि एंड्रॉइड 10 में आपके एप्लिकेशन के इशारों और नए सिस्टम के इशारों के बीच उत्पन्न होने वाले किसी भी संघर्ष को कैसे संभालना है । इशारों के टकराव से हमारा क्या मतलब है? आइए एक उदाहरण देखें। मान लीजिए कि हमारे पास एक म्यूजिक प्लेयर है जो उपयोगकर्ता को वर्तमान गीत के माध्यम से खींचने और छोड़ने के द्वारा स्क्रॉल करने की अनुमति देता है ।

SeekBar

दुर्भाग्य से, यह SeekBarहोम स्क्रीन पर लौटने के इशारे के क्षेत्र के बहुत करीब है, इस वजह से जल्दी से पिछले एप्लिकेशन (QuickSwitch) पर स्विच करने का इशारा शुरू होता है, जो उपयोगकर्ता को असुविधा देता है।

एक ही चीज स्क्रीन के किसी भी किनारे पर हो सकती है जहां हावभाव क्षेत्र स्थित हैं। ऐसे कई सामान्य उदाहरण हैं जो टकराव का कारण बन सकते हैं, जैसे: नेविगेशन ड्रॉअर ( DrawerLayout), हिंडोला ( ViewPager ), स्लाइडर्स ( SeekBar), सूचियों में स्वाइप करें ।

जो हमें इस सवाल पर लाता है कि "हम इसे कैसे ठीक कर सकते हैं?" इस प्रश्न को सुविधाजनक बनाने के लिए, हमने एक फ़्लोचार्ट बनाया है जो आपको स्थिति के आधार पर उत्तर प्रदान करता है।

आप यहां फ्लोचार्ट का एक पीडीएफ संस्करण पा सकते हैं ।

मुझे उम्मीद है कि सवालों के स्पष्टीकरण की आवश्यकता नहीं है, लेकिन सिर्फ मामले में, मैं उनमें से प्रत्येक के माध्यम से जाऊंगा:

1. क्या एप्लिकेशन को नेविगेशन और स्टेटस बार को छिपाने की आवश्यकता है?

पहला सवाल यह है कि क्या आपके आवेदन के लिए मुख्य उपयोग मामले में नेविगेशन और / या स्थिति बार को छिपाने की आवश्यकता है । छिपने से हमारा मतलब है कि ये सिस्टम पैनल बिल्कुल भी दिखाई नहीं देते हैं। इसका मतलब यह नहीं है कि आपने अपने आवेदन में "एज टू एज" या कुछ इसी तरह की अवधारणा को लागू किया है।

इस प्रश्न का उत्तर "हां" देने के संभावित कारण:

आप WindowManager ध्वज का उपयोग कर रहे हैं FLAG_FULLSCREEN। कृपया ध्यान दें कि यह थीम विशेषता का उपयोग करके भी किया जा सकता है android:windowFullscreenया थीम विकल्पों में से एक से विस्तारित किया जा सकता है Theme.XXX.Fullscreen।
आप सिस्टम-यूआई दृश्यता ध्वज का उपयोग कर रहे हैं SYSTEM_UI_FLAG_FULLSCREEN।
आप इमर्सिव मोड में सिस्टम-यूआई दृश्यता झंडे में से एक का उपयोग करते हैं: SYSTEM_UI_FLAG_IMMERSIVEया SYSTEM_UI_FLAG_IMMERSIVE_STICKY।

इस प्रश्न के लिए "हां" का जवाब देने वाले अनुप्रयोगों के सामान्य उदाहरण गेम, वीडियो प्लेयर, फोटो दर्शक, ड्राइंग एप्लिकेशन हैं।

2. यूआई का उपयोग करने के लिए मुख्य परिदृश्य में / आसपास के क्षेत्र में स्वाइप शामिल है?

यह प्रश्न पता करता है कि क्या आपके UI में जेस्चर क्षेत्रों के आगे / पीछे ("बैक" और "होम") दोनों में कोई तत्व हैं जो उपयोगकर्ता को स्वाइप करना है।

खेल आमतौर पर इस तथ्य के कारण हां कहते हैं कि

स्क्रीन पर नियंत्रण आमतौर पर बाएं / दाएं किनारे और स्क्रीन के नीचे स्थित होता है।
कुछ खेलों में, आपको उन तत्वों पर ज़ोर से मारना होगा जो स्क्रीन पर किसी भी स्थान पर हो सकते हैं।

गेम्स के अलावा, यूआई के सामान्य उदाहरण जो कहना चाहिए हाँ हैं:

यूआई क्रॉप तस्वीरें जहां ड्रैग करने योग्य फ्रेम स्क्रीन के बाएं और दाएं किनारों के पास भी हैं।
एक ड्राइंग एप्लिकेशन जहां उपयोगकर्ता एक कैनवास पर आकर्षित हो सकता है जो पूरी स्क्रीन को कवर करता है।

3. अक्सर इशारा क्षेत्र के आसपास / में इस्तेमाल किया?

मुझे उम्मीद है कि यह एक काफी सरल प्रश्न है। इसमें दृश्य भी शामिल हैं, जो इशारों के क्षेत्र को कवर करते हैं, और फिर स्क्रीन के एक बड़े हिस्से का विस्तार करते हैं, उदाहरण के लिए, DrawerLayoutया एक बड़ा ViewPager।

4. देखें में स्वाइप / ड्रैग शामिल है?

हम रणनीति को थोड़ा बदलते हैं और व्यक्तिगत विचारों को देखना शुरू करते हैं। किसी भी विचार के लिए जिसके लिए आपने तीसरे प्रश्न की पुष्टि में उत्तर दिया था, हम एक छोटा स्पष्टीकरण देते हैं: क्या उपयोगकर्ता को इसे स्वाइप / ड्रैग करना चाहिए?

ऐसे कई उदाहरण हैं, जहां आप जवाब देने के लिए "कर रहे हैं हाँ»: SeekBars, BottomSheet या यहाँ तक कि PopupMenu(आप खुले करने के लिए ड्रैग है)।

5. क्या दृश्य पूरी तरह से / आम तौर पर इशारा क्षेत्रों के तहत स्थित है?

चौथे प्रश्न के आधार पर, अब हम स्पष्ट करते हैं कि दृश्य पूरी तरह से है या मुख्य रूप से इशारे के क्षेत्र में स्थित है।

यदि आपका दृश्य इस तरह एक स्क्रॉल करने योग्य कंटेनर में है RecyclerView, तो इस प्रश्न के बारे में थोड़ा अलग ढंग से सोचें: क्या पूरी तरह से / मूल रूप से विस्तारित दृश्य सभी स्क्रॉल पदों में इशारे के क्षेत्र में आता है ? यदि उपयोगकर्ता इशारा क्षेत्र के तहत दृश्य को स्क्रॉल कर सकता है, तो आपको कुछ भी करने की आवश्यकता नहीं है।

ऊपर दिए गए आरेख में, आप ViewPagerएक नकारात्मक उत्तर के उदाहरण के रूप में एक हिंडोला पूर्ण स्क्रीन ( ) देख सकते हैं और आश्चर्य कर सकते हैं कि इस मामले को संभालने की आवश्यकता क्यों नहीं है। यह इस तथ्य के कारण है कि 20dpदृश्य की चौड़ाई की तुलना में बाएं / दाएं इशारों के क्षेत्र चौड़ाई (डिफ़ॉल्ट: प्रत्येक) में अपेक्षाकृत छोटे हैं । ठेठपोर्ट्रेट ओरिएंटेशन में आपके फोन की स्क्रीन की चौड़ाई ~ 360dp है, जिससे ~ 320dp मुक्त स्थान छोड़ दिया जाता है जिसमें उपयोगकर्ता को कठिनाई नहीं होती है (यह लगभग 90% स्क्रीन है)। आंतरिक मार्जिन / इंडेंट के साथ भी, उपयोगकर्ता अभी भी हिंडोला के माध्यम से आराम से स्क्रॉल कर सकता है।

6. क्या दृश्य सीमा किसी भी आवश्यक क्षेत्र को ओवरलैप करती है?

अंतिम प्रश्न स्पष्ट करता है कि क्या दृश्य आवश्यक इशारों वाले क्षेत्रों में से किसी में है। यदि आप हमारे पिछले लेख को याद करते हैं, तो आपको याद होगा कि सिस्टम जेस्चर के अनिवार्य क्षेत्र स्क्रीन के ऐसे क्षेत्र हैं जहाँ सिस्टम जेस्चर हमेशा पूर्वता लेते हैं।

एंड्रॉइड 10 में, केवल एक अनिवार्य इशारा क्षेत्र है, जो स्क्रीन के निचले भाग में स्थित है, जो उपयोगकर्ता को घर लौटने या अपने नवीनतम एप्लिकेशन खोलने की अनुमति देता है। यह प्लेटफ़ॉर्म के भविष्य के रिलीज़ में बदल सकता है, लेकिन अब हमें केवल स्क्रीन के निचले भाग में दृश्य के साथ काम करना होगा।

विशिष्ट उदाहरण हैं:

मोडहीन BottomSheet , के रूप में वे स्क्रीन के तल पर एक छोटा सा ड्रैग और ड्रॉप दृश्य में संक्षिप्त करने के लिए करते हैं।
स्क्रीन के निचले भाग में क्षैतिज रूप से स्क्रॉल हिंडोला, उदाहरण के लिए, स्टिकर के साथ एक इंटरफ़ेस।

अब जब हमने प्रश्नों को हल कर लिया है, तो हम आशा करते हैं कि आप किसी एक समाधान पर आ सकते हैं, तो आइए उनमें से प्रत्येक को अधिक विस्तार से देखें।

संभाला नहीं जाता

चलो सबसे सरल "समाधान" के साथ शुरू करते हैं, बस कुछ भी नहीं करते हैं !

बेशक, शायद अभी भी अनुकूलन के लिए जगह है जो आप कर सकते हैं (नीचे दिए गए अनुभाग देखें), लेकिन सौभाग्य से वहाँ कोई गंभीर समस्याएं नहीं हैं एप्लिकेशन के साथ इशारा नेविगेशन मोड चालू है।

यदि शेड्यूल आपको यहां लाया गया है, लेकिन आपको अभी भी लगता है कि कोई समस्या है, तो कृपया हमें बताएं । शायद हम कुछ याद किया।

हावभाव वाले क्षेत्रों से दृश्य देखना

जैसा कि हमने अपने पिछले लेख से सीखा है , इनसेट आपके एप्लिकेशन को बताने के लिए मौजूद हैं जहां स्क्रीन पर सिस्टम जेस्चर जोन हैं। जेस्चर संघर्ष को हल करने के लिए हम जिन तरीकों का उपयोग कर सकते हैं, उनमें से एक यह है कि इशारों वाले क्षेत्रों से किसी भी परस्पर विरोधी विचारों को स्थानांतरित किया जाए। यह स्क्रीन के निचले भाग में देखने के लिए विशेष रूप से महत्वपूर्ण है, क्योंकि यह क्षेत्र अनिवार्य इशारों का क्षेत्र है, और एप्लिकेशन वहां पर इशारा बहिष्करण एपीआई का उपयोग नहीं कर सकते हैं।

आइए एक उदाहरण फिर से देखें। हमारे पास एक म्यूजिक प्लेयर इंटरफेस है जो हमने ऊपर दिखाया है। इसमें SeekBarस्क्रीन के नीचे स्थित है, जिससे उपयोगकर्ता गीत के माध्यम से स्क्रॉल कर सकता है।

स्क्रीन के निचले भाग में सीकबार के साथ यूआई म्यूजिक प्लेयर

लेकिन जब कोई उपयोगकर्ता किसी गाने को छोड़ने की कोशिश करता है, तो ऐसा होता है:

एक सिस्टम जेस्चर को रिकॉर्ड करना जो कि सीकबार के साथ टकराव करता है,

यह इसलिए है क्योंकि इशारे का निचला क्षेत्र सीकबेर को ओवरलैप करता है, इसलिए होम-बैक जेस्चर प्राथमिकता लेता है। यहाँ इशारा क्षेत्रों का दृश्य है:

एक सरल उपाय

यहां सबसे सरल उपाय एक अतिरिक्त इंडेंट / मार्जिन जोड़ना है ताकि सीकबेर इशारे से ऊपर की ओर बढ़े। कुछ इस तरह से:

यदि हम इस उदाहरण में सीकबेर को खींचते हैं, तो आप देखेंगे कि अब हम घर वापसी के इशारे को सक्रिय नहीं करते हैं:

सीकबार अब निचले सिस्टम के इशारे के साथ संघर्ष नहीं करता है।

इसे लागू करने के लिए, हमें एपीआई 29 और जेटपैक कोर लाइब्रेरी v1.2.0 (वर्तमान में अल्फा में ) में उपलब्ध नए सिस्टम जेस्चर इनसेट का उपयोग करने की आवश्यकता है । उदाहरण में, हम निचले इशारे को इनसेट के मूल्य से मेल खाने के लिए नीचे इंडेंट बढ़ाते हैं :SeekBar

ViewCompat.setOnApplyWindowInsetsListener(seekBar) { view, insets ->
     //      view ,    system gesture insets
    view.updatePadding(
        bottom = insets.systemGestureInsets.bottom
    )
    insets
}

यदि आप सीखने में रुचि रखते हैं कि कैसे काम करना आसान है WindowInsets, तो आप इस विषय पर हमारे अन्य लेख पढ़ सकते हैं:

WindowInsets - श्रोता लेआउट

आगे की कार्रवाई

इस बिंदु पर, आप यह तय कर सकते हैं कि नौकरी पहले से ही की गई है, और कुछ लेआउट के लिए यह बहुत अच्छा अंतिम समाधान हो सकता है। लेकिन हमारे उदाहरण में, उपयोगकर्ता इंटरफ़ेस नेत्रहीन रूप से बहुत सारी खोई हुई जगह के साथ वापस आ गया है SeekBar। इस प्रकार, केवल दृश्य को ऊपर धकेलने के बजाय, हम स्थान खोने से बचने के लिए लेआउट को फिर से डिज़ाइन कर सकते हैं:

SeekBarप्लेबैक पैनल के शीर्ष पर चले गए।

यहां हम SeekBarप्लेबैक पैनल के शीर्ष पर चले गए हैं , पूरी तरह से इशारा क्षेत्र के बाहर। इसका मतलब है कि अब हमें समायोजित करने के लिए पैनल की ऊंचाई को कृत्रिम रूप से बढ़ाने की आवश्यकता नहीं है SeekBar।

, . « ».

API

हमारे पिछले लेख में, हमने उल्लेख किया है कि "अनुप्रयोगों में स्क्रीन के कुछ हिस्सों के लिए सिस्टम इशारों को बाहर करने की क्षमता है । " एप्लिकेशन जेस्चर बहिष्करण API का उपयोग करके ऐसा करते हैं, जो पहली बार एंड्रॉइड 10 में दिखाई दिया था।

दो अलग-अलग कार्य हैं जो सिस्टम जेस्चर क्षेत्रों को बाहर करने के लिए प्रदान करता है: View.setSystemGestureExclusionRects()और Window.setSystemGestureExclusionRects()। आपको क्या उपयोग करना चाहिए यह एप्लिकेशन पर निर्भर करता है: यदि आप एंड्रॉइड का उपयोग करते हैं View, तो सिस्टम एपीआई को पसंद करता है, अन्यथा Windowएपीआई का उपयोग करें ।

दो एपीआई के बीच मुख्य अंतर यह है कि विंडो एपीआईकिसी भी आयत को खिड़की के समन्वय स्थान में होने की उम्मीद है। यदि आप दृश्य का उपयोग करते हैं, तो आप आमतौर पर दृश्य समन्वय के स्थान पर काम करेंगे। व्यू एपीआई समन्वित रिक्त स्थान के बीच परिवर्तन का ध्यान रखता है, अर्थात, आपको केवल दृश्य की सामग्री के संदर्भ में तर्क करने की आवश्यकता है।

आइए एक उदाहरण देखें। हम फिर से एक संगीत खिलाड़ी के अपने उदाहरण का उपयोग करने जा रहे हैं, जो SeekBarस्क्रीन की पूरी चौड़ाई में स्थित है। हमने SeekBarपिछले भाग में होम स्क्रीन पर लौटने के इशारे के साथ संघर्ष को निर्धारित किया था, लेकिन हमारे पास अभी भी इशारों के बाएं और दाएं क्षेत्र हैं जिनकी हमें देखभाल करने की आवश्यकता है।

आइए देखें कि क्या होता है जब एक उपयोगकर्ता "स्लाइडर" पर एक गाना छोड़ने की कोशिश करता हैSeekBar(सर्कुलर ड्रैग) किनारों में से एक के पास स्थित है:

सीकबार का बैक जेस्चर क्षेत्र के साथ संघर्ष है।

चूंकि स्लाइडर सही जेस्चर क्षेत्र के तहत है, सिस्टम का मानना है कि उपयोगकर्ता इशारे का उपयोग करके वापस जाने की कोशिश कर रहा है, इसलिए, पीछे तीर दिखाता है। यह उपयोगकर्ताओं के लिए असुविधाजनक है, क्योंकि वे शायद इस समय वापस नहीं जाना चाहते थे। हम स्लाइडर के सीमाओं को बाहर करने के लिए ऊपर दिए गए जेस्चर बहिष्करण एपीआई का उपयोग करके इसे ठीक कर सकते हैं।

जेस्चर अपवाद एपीआई को आमतौर पर दो स्थानों से कहा जाता है: onDraw()जब आपका दृष्टिकोण प्रदान किया जाता है, और onLayout()अन्यथा। आपका दृश्य गुजरता हैList<Rect>जिसमें सभी आयतों को बाहर रखा जाना है। जैसा कि पहले उल्लेख किया गया है, इन आयतों को अपने स्वयं के समन्वय प्रणाली में होना चाहिए।

आमतौर पर आप इस तरह का एक फंक्शन बनाते हैं जिसे onLayout()/ और से बुलाया जाएगा onDraw():

private val gestureExclusionRects = mutableListOf<Rect>()
private fun updateGestureExclusion() {
   //   ,      Android 10+
   if (Build.VERSION.SDK_INT < 29) return
  // -,     
   gestureExclusionRects.clear()
      //   ,    .  SeekBar    .
   thumb?.also { t ->
       gestureExclusionRects += t.copyBounds()
   }
   //            view,       ,     
   // ,       
   systemGestureExclusionRects = gestureExclusionRects
}

इसका पूरा उदाहरण यहां देखा जा सकता है ।

इसके बाद हमने इसे जोड़ा, किनारों के पास

रिवाइंडिंग उम्मीद के मुताबिक काम करती है: ऊपर के उदाहरण पर बैक जेस्चर क्षेत्र में काम कर रहा सीकबेर

ध्यान दें। SeekBarAndroid 10 में आपके लिए यह स्वचालित रूप से मौजूद है, इसलिए इसे स्वयं करने की कोई आवश्यकता नहीं है। यहां हम आपको सामान्य रूपरेखा दिखाने के लिए एक उदाहरण के रूप में करते हैं।

सीमाएं

हालांकि जेस्चर बहिष्करण API सभी जेस्चर संघर्षों को हल करने के लिए सही समाधान की तरह लग सकता है, यह वास्तव में ऐसा नहीं है। जेस्चर बहिष्करण API का उपयोग करते हुए, आप घोषित करते हैं कि सिस्टम रिटर्न एक्शन की तुलना में आपके एप्लिकेशन का जेस्चर अधिक महत्वपूर्ण है। यह एक मजबूत कथन है, इसलिए इस एपीआई को एक आपातकालीन निकास के रूप में बनाया गया है जब आप कुछ और नहीं कर सकते।

जेस्चर बहिष्करण एपीआई का उपयोग करते हुए, आप घोषणा करते हैं कि आपके एप्लिकेशन का इशारा बैकट्रैकिंग की प्रणाली कार्रवाई से अधिक महत्वपूर्ण है।

चूंकि एपीआई जो व्यवहार प्रदान करता है वह एक आरामदायक उपयोगकर्ता अनुभव का उल्लंघन कर सकता है, सिस्टम इसके उपयोग को सीमित करता है: आवेदन केवल 200dp तक प्रत्येक किनारे को बाहर कर सकते हैं ।

यहाँ कुछ सामान्य प्रश्न हैं जो डेवलपर्स के पास यह सुनते ही हैं:

प्रतिबंध क्यों आवश्यक है? मुझे उम्मीद है कि ऊपर दिए गए स्पष्टीकरण ने आपको पहले ही एक कारण दे दिया है। हमारा मानना है कि उपयोगकर्ता को साइड स्वाइप से लगातार वापस जाने में सक्षम होना बहुत महत्वपूर्ण है। डिवाइस में लगातार, एक भी आवेदन नहीं। यह प्रतिबंध बहुत अधिक प्रतिबंधात्मक लग सकता है, लेकिन स्क्रीन के पूरे किनारे को छोड़कर सिर्फ एक एप्लिकेशन, उपयोगकर्ता को असुविधा का कारण बनाने के लिए पर्याप्त है, जो या तो एप्लिकेशन को हटाने या कुछ और अधिक कट्टरपंथी की ओर जाता है।

दूसरे शब्दों में, नेविगेशन सिस्टम हमेशा सुसंगत और उपयोग में आसान होना चाहिए।

क्यों 200dp?200dp का तर्क बहुत सीधा है। जैसा कि हमने पहले बताया, जेस्चर बहिष्करण एपीआई का उपयोग अंतिम उपाय के रूप में किया जाता है, इसलिए इस सीमा की गणना कई महत्वपूर्ण स्पर्श लक्ष्य के रूप में की गई थी। संवेदी लक्ष्य के लिए न्यूनतम अनुशंसित आकार48dp .4 संवेदी लक्ष्य × है 48dp = 192dp। कुछ और इंडेंटेशन जोड़ें और हमें मूल्य मिलता है 200dp।

क्या होगा यदि मुझे प्रति धार 200dp से अधिक बाहर करने की आवश्यकता है? सिस्टम केवल आपके द्वारा अनुरोधित सबसे कम 200dp को बाहर करेगा।

सिस्टम 200 dp की कुल ऊंचाई के लिए एक अनुरोध की अनुमति देता है , स्क्रीन के बाहर मेरे दृश्य के निचले किनारे से गिना

जाता है, क्या यह एक सीमा माना जाता है?नहीं, सिस्टम केवल उन आयतों को बाहर करता है जो स्क्रीन के भीतर हैं। इसी तरह, यदि दृश्य स्क्रीन पर आंशिक रूप से है, तो केवल अनुरोधित आयत के दृश्य भाग को ध्यान में रखा जाता है।

अगली पोस्ट में गोता लगाएँ

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

इशारे प्रबंधन: इशारा संघर्ष से निपटने। भाग ३