फ्लेक्सिबल वर्टिकलस्वाप बिहेवियर लिखना

नमस्कार, हेब्र! मेरा नाम इलिया ओसिंटसेव है, मैं Apiqa में एक Android डेवलपर हूं। बिल्ली के नीचे आपको SwipeDismissBehavior के समान उपयोगकर्ता इंटरफ़ेस घटक बनाने के लिए ViewDragHelper का उपयोग करने का एक उदाहरण मिलेगा, लेकिन लंबवत रूप से काम करना।

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

कार्य का मूल्यांकन करें

व्यक्तिगत खाता	कैबिनेट तकनीशियन

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

आरंभ करने के लिए, मैंने SwipeDismissBehavior पर आधारित एक सरल डेमो को यह जानने के लिए रखा कि यह कैसे काम करता है और परिवर्तनों के पैमाने का अनुमान लगाने के लिए। एक्सएमएल मार्कअप में इसे निर्दिष्ट करने का प्रयास निष्पादित होने पर एक अपवाद फेंकता है:

E/AndroidRuntime: FATAL EXCEPTION: main Process: io.apiqa.android.example, PID: 1024 android.view.InflateException: Binary XML file line #115: Could not inflate Behavior subclass com.google.android.material.behavior.SwipeDismissBehavior 

डेवलपर्स ने व्यवहार अनुबंध का उल्लंघन किया और संदर्भ और विशेषता से वर्ग निर्माता को ओवरराइड करना भूल गया। अब आप इस व्यवहार का उपयोग केवल अपने कोड में इसका उदाहरण बनाकर कर सकते हैं, लेकिन फिर भी, मौलिक रूप से दृश्य व्यवहार हमारी आवश्यकताओं को पूरा नहीं करता है, यहां तक ​​कि क्षैतिज दिशा में ध्यान दिए बिना भी।

डेमो एप्लिकेशन के लॉग में संदेश थे जो बताते हैं कि कुछ स्पर्श घटनाएं हैंडलर में नहीं गिरीं।

E / ViewDragHelper: pointerId = -1 को नजरअंदाज करना क्योंकि ACTION_MOVE से पहले इस सूचक के लिए ACTION_DOWN प्राप्त नहीं हुआ था। यह संभव हुआ क्योंकि ViewDragHelper को ईवेंट स्ट्रीम में सभी ईवेंट नहीं मिले थे।

एक विकल्प के रूप में OnTouchListener पर आधारित एक समाधान था, यह हमें OnClickListener का उपयोग करने के अवसर से वंचित करता है, जिसका अर्थ है कि हमें गतिविधि में बैनर के आंदोलन के कानून का वर्णन करना होगा। जैसा कि हम आगे बढ़ते हैं, हम आंदोलन के मापदंडों (उदाहरण के लिए, संवेदनशीलता) को बदलना नहीं चाहते हैं और यहाँ OnTouchListener का उपयोग करना अनुप्रेषित लगता है। इसके अलावा, हमारे दोनों प्रोजेक्ट्स में कोऑर्डिनेटर लयआउट में बैनर लगाए गए थे।

यदि आप वैकल्पिक मापदंडों के गेटर्स और सेटर को ध्यान में नहीं रखते हैं, तो SwipeDismissBehavior अपने आप में काफी छोटा है, यह ViewDragHelper का उपयोग करता है। मुझे नेटवर्क पर उनके बारे में कई प्रकाशन मिले और उन्होंने आवश्यक घटक के अपने कार्यान्वयन को लिखने का फैसला किया।

हम ViewDragHelper के साथ समन्वय करते हैं

ViewDragHelper दृश्य स्तर पर ड्रैग एंड ड्रॉप समर्थन की सुविधा के लिए एक उपयोगिता वर्ग है। यह विजेट की स्थिति को ट्रैक करता है और मूल दृश्य समूह के अंदर एक या दो अक्षों के साथ उन्हें एनिमेट करने के लिए कई उपयोगी कार्य करता है। काम करने के लिए, उसे एक हैंडलर की जरूरत है जो ViewDragHelper.Callback को लागू करता है । हैंडलर के पास एक अनिवार्य तरीका है, और बैनर को स्थानांतरित करने के लिए शुरू करने के लिए, यह कुछ और को फिर से परिभाषित करने के लिए पर्याप्त है। सामान्य तौर पर, यह सहायक उपयोग करने में आसान होता है, यह किसी भी परियोजना में उपलब्ध है, जैसे कि यह ऐपकॉम के साथ आता है। एक सहायक बनाने के लिए, माता-पिता समन्वयकलेयआउट के संदर्भ की आवश्यकता होती है, इसलिए हम आलसी आरंभीकरण का आयोजन करेंगे। onInterceptTouchEvent और onTouchEvent हमें संबंधित सहायक विधियों को कॉल करना होगा, बाकी तर्क हैंडलर के अंदर होंगे।

 class VerticalSwipeBehavior<V: View>: CoordinatorLayout.Behavior<V> { companion object { @Suppress("UNCHECKED_CAST") fun <V: View> from(v: V): VerticalSwipeBehavior<V> { val lp = v.layoutParams require(lp is CoordinatorLayout.LayoutParams) val behavior = lp.behavior requireNotNull(behavior) require(behavior is VerticalSwipeBehavior) return behavior as VerticalSwipeBehavior<V> } } @Suppress("unused") constructor() : super() @Suppress("unused") constructor(context: Context, attrs: AttributeSet) : super(context, attrs) private var dragHelper: ViewDragHelper? = null private var interceptingEvents = false override fun onInterceptTouchEvent(parent: CoordinatorLayout, child: V, ev: MotionEvent): Boolean { var isIntercept = interceptingEvents when (ev.actionMasked) { MotionEvent.ACTION_DOWN -> { isIntercept = parent.isPointInChildBounds(child, ev.x.toInt(), ev.y.toInt()) interceptingEvents = isIntercept } MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> { interceptingEvents = false } } return if (isIntercept) { helper(parent).shouldInterceptTouchEvent(ev) } else false } override fun onTouchEvent(parent: CoordinatorLayout, child: V, ev: MotionEvent): Boolean { val helper = helper(parent) val isViewUnder = helper.isViewUnder(child, ev.x.toInt(), ev.y.toInt()) if (helper.capturedView == child || isViewUnder ) { helper.processTouchEvent(ev) return true } else { return false } } private fun helper(parent: ViewGroup): ViewDragHelper { var h = dragHelper if (h == null) { h = ViewDragHelper.create(parent, callback) dragHelper = h return h } return h } } 

आवश्यक tryCaptureView हैंडलर tryCaptureView हमें यह तय करना होगा कि किसी विशेष दृश्य को स्थानांतरित करना है या नहीं। ताकि सहायक आवश्यक घटनाओं को याद न करें, हम उस सूचक को स्वीकार करते हैं जो पहले प्राप्त हुआ था। सबसे लचीला समाधान प्राप्त करने के लिए, तीन अतिरिक्त इंटरफेस पेश किए गए हैं, जिसके माध्यम से आप बैनर डिजाइन को विस्तार से नियंत्रित कर सकते हैं:

• SideEffect दृश्य गुणों में SideEffect प्रगति को दर्शाता है
• VerticalClamp दृश्य की गति को VerticalClamp रूप से सीमित करने के लिए डिज़ाइन किया गया है
• उपयोगकर्ता द्वारा स्वाइप बंद करने के बाद PostAction कहा जाता है, यहां हम व्यू मूवमेंट जारी रख सकते हैं।

उनमें से प्रत्येक में, onViewCaptured(View) विधि onViewCaptured(View) , यहां क्लाइंट कार्यान्वयन दृश्य गुणों के प्रारंभिक मान निकाल सकते हैं। इस पद्धति के लिए कॉल के आदेश की गारंटी नहीं है।

 var sideEffect: SideEffect = AlphaElevationSideEffect() var clamp: VerticalClamp = FractionConstraintWithTopMargin(1f, 1f) var settle: PostAction = OriginSettleAction() private val callback = object: ViewDragHelper.Callback() { private val INVALID_POINTER_ID = -1 private var currentPointer = INVALID_POINTER_ID private var originTop: Int = 0 override fun tryCaptureView(child: View, pointerId: Int): Boolean { return currentPointer == INVALID_POINTER_ID || pointerId == currentPointer } override fun onViewCaptured(child: View, activePointerId: Int) { originTop = child.top currentPointer = activePointerId sideEffect.onViewCaptured(child) settle.onViewCaptured(child) clamp.onViewCaptured(child.top) } override fun onViewReleased(child: View, xvel: Float, yvel: Float) { // TODO currentPointer = INVALID_POINTER_ID } override fun clampViewPositionHorizontal(child: View, left: Int, dx: Int) = child.left // TODO } 

यद्यपि हमारा दृष्टिकोण लंबवत नहीं चलता है, फिर भी हमें दृश्य बगों से बचने के लिए हैंडलर में clampViewPositionHorizontal लागू करना याद रखना चाहिए। एक साधारण कार्यान्वयन बाएं समन्वय को लौटाता है, जिसका अर्थ है कि विजेट क्षैतिज रूप से नहीं चलता है।

हमारे मामले में, clampViewPositionVertical हैंडलर को कॉल clampViewPositionVertical इंटरफ़ेस में दिया गया है। constraint विधि अधिकतम और / या न्यूनतम दृश्य स्थिति द्वारा सीमित एक ऊंचाई समन्वय वापस करना चाहिए। जब यह पहुँच जाता है, ViewDragHelper आंदोलन को सीमित करेगा। upCast(distance, top, height, dy) और downCast में एक ही हस्ताक्षर है और यात्रा की प्रारंभिक स्थिति को ध्यान में रखते हुए, यात्रा की गई दूरी का एक हिस्सा लौटाते हैं। onViewPositionChanged हैंडलर onViewPositionChanged हम इस कदम की प्रगति प्राप्त करते हैं और इसे SideEffect#apply(View, Float) , जिसमें आप हावभाव की प्रगति के आधार पर पारदर्शिता या अन्य दृश्य गुणों को बदल सकते हैं। यदि दृश्य की वर्तमान स्थिति प्रारंभिक से अधिक है, तो प्रगति शून्य से संकेत के साथ प्रेषित होती है।

 override fun clampViewPositionVertical(child: View, top: Int, dy: Int): Int { return clamp.constraint(child.height, top, dy) } override fun onViewPositionChanged(child: View, left: Int, top: Int, dx: Int, dy: Int) { val factor = if (top < originTop) { val diff = originTop - top -clamp.bottomCast(diff, top, child.height, dy) } else { val diff = top - originTop clamp.topCast(diff, top, child.height, dy) } sideEffect.apply(child, factor) } 

डिफ़ॉल्ट रूप से, FractionClamp उपयोग किया जाता है, जो दृश्य की गति को एक ऊँचाई और नीचे तक सीमित करता है (गुणांक निर्माणकर्ता में सेट किए जाते हैं), AlphaElevationSideEffect बैनर की पारदर्शिता और ऊँचाई को बदल देता है। कार्य को पूरा करने पर विचार करने के लिए, आपको उपयोगकर्ता द्वारा जारी किए जाने के बाद बैनर को एनिमेटेड रूप से स्थानांतरित करने की क्षमता को जोड़ना होगा।

जब उपयोगकर्ता दृश्य जारी करता है, तो सहायक पॉइंटर की गति को याद onViewReleased और हैंडलर पर onViewReleased को कॉल onViewReleased । इसमें, हम settleCapturedViewAt एनीमेशन का उपयोग कर शुरू कर सकते हैं। अनुबंध के अनुसार, उनमें से किसी के सफल कॉल के बाद, प्रत्येक अगले फ्रेम पर continueSettling चाहिए ताकि दृश्य आगे बढ़ सके। एक ही समय में, निपटारा हटा दिया गया है केवल onViewReleased विधि से कॉल किया जा सकता है जब mReleaseInProgress सहायक का आंतरिक ध्वज सही पर सेट हो। एक और अंतर यह है कि smoothSlideViewTo पॉइंटर की गति को ध्यान में नहीं रखता है।

 override fun onViewReleased(child: View, xvel: Float, yvel: Float) { val diff = child.top - originTop if (abs(yvel) > 0) { val settled = dragHelper?.let { if (diff > 0) { settle.releasedBelow(it, diff, child) } else { settle.releasedAbove(it, diff, child) } } ?: false if (settled) { listener?.onPreSettled(diff) child.postOnAnimation(RecursiveSettle(child, diff)) } } currentPointer = INVALID_POINTER_ID } 

इस तर्क को PostAction इंटरफ़ेस में समझाया गया है। releasedAbove और releasedBelow तरीकों को लागू releasedBelow जा सकता है, ताकि जब इसे स्थानांतरित किया जाए, तो बैनर स्क्रीन को छोड़कर उसी गति से आगे बढ़ता रहे, और जब इसे नीचे स्थानांतरित किया जाता है, तो यह अपनी मूल स्थिति में लौट आता है। यदि कोई भी तरीका सही है, तो एनीमेशन को ट्रिगर किया गया है और व्यू इवेंट कतार में एक RecursiveSettle जोड़ा जाता है, जो कि एनीमेशन खत्म होने तक इसमें बना रहेगा। डिफ़ॉल्ट रूप से, OriginSettleAction उपयोग तब किया जाता है जब किसी भी ऑफसेट को शुरुआती बिंदु पर वापस देखा जाता है। एक अन्य विकल्प - SettleOnTopAction जब दृश्य को नीचे ले जाता है, तो इसे प्रारंभिक बिंदु पर लौटाता है, और उच्चतर होने पर यह आपको स्क्रीन से दूर ले जाता है।

 class SettleOnTopAction: PostAction { private var originTop: Int = -1 override fun onViewCaptured(child: View) { originTop = child.top } override fun releasedAbove(helper: ViewDragHelper, child: View): Boolean { return helper.settleCapturedViewAt(child.left, originTop) } override fun releasedBelow(helper: ViewDragHelper, child: View): Boolean { return helper.settleCapturedViewAt(child.left, -child.height) } } 

यदि आवश्यक हो, तो आप VerticalSwipeBehavior.SwipeListener इंटरफेस को लागू करके घटनाओं की सदस्यता ले सकते हैं। इसकी दो सममित विधियां हैं, एक को चाल एनीमेशन की शुरुआत से पहले बुलाया जाता है, दूसरा इसके समाप्त होने के बाद। तर्क उस दिशा और दूरी को दिखाता है जिस पर उपयोगकर्ता ने बैनर जारी किया था। परिणामी परिणाम हमारी आवश्यकताओं को पूरा करता है।

इसका परिणाम प्राप्त करने के लिए, यह गुणों को परिभाषित करने के लिए पर्याप्त है:

 val drag = findViewById<View>(R.id.drag) VerticalSwipeBehavior.from(drag).apply { settle = SettleOnTopAction() sideEffect = NegativeFactorFilterSideEffect(AlphaElevationSideEffect()) clamp = BelowFractionalClamp() } 

वैसे, सहायक अन्य गति नियंत्रण सुविधाएँ भी प्रदान करता है। उदाहरण के लिए, setMinVelocity(Float) विधि का उपयोग करके, आप चलती दृश्य के लिए न्यूनतम गति को सीमित कर सकते हैं। सहायक स्क्रीन की सीमाओं से स्वाइप की मान्यता का भी समर्थन करता है, इसके लिए आपको उन्हें setEdgeTrackingEnabled(Int) विधि में निर्दिष्ट करना होगा। यह याद रखना चाहिए कि ViewDragHelper का एक उदाहरण केवल एक दृश्य की गति को नियंत्रित कर सकता है और केवल एक पॉइंटर को ध्यान में रखता है।

निष्कर्ष निकालना

मेरा अनुभव यह है कि ViewDragHelper किसी एप्लिकेशन में ड्रैग एंड ड्रॉप या मूविंग पैनल बनाना आसान बनाता है। हेल्पर का व्यवहार या ओवरराइड व्यूग्रुप में उपयोग करना आसान है। यह देखने और उनके आंदोलन को नियंत्रित करने के लिए कई उपयोगी तरीके हैं। सामग्री डिज़ाइन घटकों के आंतरिक कार्यान्वयन का अध्ययन करना Android डेवलपर के करियर का एक अच्छा अनुभव है। डिजाइनरों के ऐसे कार्य मुझे एक एप्लिकेशन इंटरफ़ेस बनाने और सहयोगियों और समुदाय के साथ ज्ञान साझा करने के लिए नए दृष्टिकोणों का पता लगाने के लिए प्रेरित करते हैं।

आप अपनी परियोजनाओं में परिणामी लाइब्रेरी का उपयोग कर सकते हैं। इसे सक्षम करने के लिए, build.gradle फ़ाइल में निर्भरता निर्दिष्ट करें

 dependencies { implementation 'io.apiqa.android:verticalswipebehavior:1.0.0' } 

app:layout_behavior="io.apiqa.android.verticalswipe.VerticalSwipeBehavior" अंदर एक उपयुक्त दृश्य के लिए, app:layout_behavior="io.apiqa.android.verticalswipe.VerticalSwipeBehavior" प्रॉपर्टी निर्दिष्ट करें app:layout_behavior="io.apiqa.android.verticalswipe.VerticalSwipeBehavior" मार्कअप में app:layout_behavior="io.apiqa.android.verticalswipe.VerticalSwipeBehavior" । आप अभिभावकों का उपयोग करके माता-पिता के भीतर बैनर को स्थिति दे सकते हैं। साइडएफ़ेक्ट , वर्टिकल क्लैम्प और पोस्टएक्शन कार्यान्वयन को समन्वित करके , आप अपने द्वारा आवश्यक बैनर व्यवहार को प्राप्त कर सकते हैं। रिपॉजिटरी में , उनमें से प्रत्येक के कार्यशील संस्करण उपलब्ध हैं।

नया साल मुबारक हो!