कस्टम लेआउट। पॉपअप + लंबन स्क्रॉलिंग

हाय साथियों!

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

मौजूदा घटक का विस्तार

कार्यान्वयन में आसानी के लिए, मैंने स्क्रैच से व्यूग्रुप का विस्तार नहीं करने का फैसला किया, लेकिन फ्रेमलैट से विरासत में मिला। यह बुनियादी दिनचर्या की चीजों को लागू करने की आवश्यकता को समाप्त कर देगा, जैसे कि बच्चों को मापने, लेआउट, आदि, लेकिन साथ ही साथ हमारे उद्यम को लागू करने के लिए पर्याप्त लचीलापन प्रदान करते हैं।
तो, क्लास ड्रैगबलपैननेल लयआउट बनाएं।
पहली चीज जो हम करना चाहते हैं, वह लेआउट प्रक्रिया को संशोधित करना है ताकि शीर्ष परत नीचे स्थानांतरित हो जाए और इसका केवल एक हिस्सा बाहर झाँके। ऐसा करने के लिए, ऑनलाइउट को फिर से परिभाषित करें:

@Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { super.onLayout(changed, left, top, right, bottom); if (getChildCount() != 2) { throw new IllegalStateException("DraggedPanelLayout must have 2 children!"); } bottomPanel = getChildAt(0); bottomPanel.layout(left, top, right, bottom - bottomPanelPeekHeight); slidingPanel = getChildAt(1); if (!opened) { int panelMeasuredHeight = slidingPanel.getMeasuredHeight(); slidingPanel.layout(left, bottom - bottomPanelPeekHeight, right, bottom - bottomPanelPeekHeight + panelMeasuredHeight); } } 

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

 <com.dataart.animtest.DraggedPanelLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:dp="http://schemas.android.com/apk/res/com.dataart.animtest" android:layout_width="match_parent" android:layout_height="match_parent" dp:bottom_panel_height="64dp" tools:context=".MainActivity" > <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/stripes" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:contentDescription="@string/android" android:src="@drawable/android" /> </FrameLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFFFFF" android:text="@string/hello_world" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="@string/random_button" /> </FrameLayout> </com.dataart.animtest.DraggedPanelLayout> 

जैसा कि आप देख सकते हैं, नीचे का पैनल सफलतापूर्वक नीचे स्थानांतरित हो गया है। हमें क्या चाहिए।

एक ड्रैग और ड्रॉप जोड़ें

एक सॉकेट को उंगली से खींचने के लिए लागू करने के लिए, आपको ऑनटचवेंट विधि को ओवरराइड करना होगा। यहां, जब हम अपनी उंगली से दबाते हैं (ACTION_DOWN) तो हमें याद होगा कि उपयोगकर्ता ने कहां पर क्लिक किया है, फिर एक उंगली (ACTION_MOVE) के साथ, हम अपने पैनल को स्थानांतरित करेंगे, और अंत में, ACTION_UP के साथ, हम कार्रवाई को पूरा करेंगे। कार्रवाई को पूरा करना शायद सबसे दिलचस्प काम है, लेकिन बाद में उस पर अधिक।

 @Override public boolean onTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) { startDragging(event); } else if (event.getAction() == MotionEvent.ACTION_MOVE) { if (touching) { float translation = event.getY() - touchY; translation = boundTranslation(translation); slidingPanel.setTranslationY(translation); bottomPanel .setTranslationY((float) (opened ? -(getMeasuredHeight() - bottomPanelPeekHeight - translation) * parallaxFactor : translation * parallaxFactor)); } } else if (event.getAction() == MotionEvent.ACTION_UP) { isBeingDragged = false; touching = false; } return true; } 

यहां सब कुछ सरल है। बाउंड्रीलेशन विधि स्क्रीन के भीतर एक उंगली के साथ पैनल के आंदोलन को प्रतिबंधित करती है; सेटट्रांसलेशन ऑफसेट को सेट करता है।

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

एक बार फिर, लेकिन संक्षेप में और कैप में। एनिमेशन के लिए मुख्य नियम उचित नहीं है !!!

इशारे का पूरा होना

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

1. यदि पैनल की गति काफी अधिक है - पैनल को अंत तक लाएं और घटक को विपरीत स्थिति में रखें।
2. यदि गति अधिक नहीं है, तो जांचें कि क्या उपयोगकर्ता ने आधी दूरी के माध्यम से पैनल खींचा है। यदि ऐसा है, तो एक निश्चित गति से ड्राइविंग जारी रखें, अन्यथा, पैनल को अपनी मूल स्थिति में लौटाएं।

 public void finishAnimateToFinalPosition(float velocityY) { final boolean flinging = Math.abs(velocityY) > 0.5; boolean opening; float distY; long duration; if (flinging) { opening = velocityY < 0; distY = calculateDistance(opening); duration = Math.abs(Math.round(distY / velocityY)); animatePanel(opening, distY, duration); } else { boolean halfway = Math.abs(slidingPanel.getTranslationY()) >= (getMeasuredHeight() - bottomPanelPeekHeight) / 2; opening = opened ? !halfway : halfway; distY = calculateDistance(opening); duration = Math.round(300 * (double) Math.abs((double) slidingPanel.getTranslationY()) / (double) (getMeasuredHeight() - bottomPanelPeekHeight)); } animatePanel(opening, distY, duration); } 

उपरोक्त विधि इस तर्क को लागू करती है। गति की गणना करने के लिए, अंतर्निहित क्लास वेलोसिटीट्रैक का उपयोग करें।
अंत में, एक ऑब्जेक्ट बनाएं और एनीमेशन को पूरा करें:

 public void animatePanel(final boolean opening, float distY, long duration) { ObjectAnimator slidingPanelAnimator = ObjectAnimator.ofFloat(slidingPanel, View.TRANSLATION_Y, slidingPanel.getTranslationY(), slidingPanel.getTranslationY() + distY); ObjectAnimator bottomPanelAnimator = ObjectAnimator.ofFloat(bottomPanel, View.TRANSLATION_Y, bottomPanel.getTranslationY(), bottomPanel.getTranslationY() + (float) (distY * parallaxFactor)); AnimatorSet set = new AnimatorSet(); set.playTogether(slidingPanelAnimator, bottomPanelAnimator); set.setDuration(duration); set.setInterpolator(sDecelerator); set.addListener(new MyAnimListener(opening)); set.start(); } 

एनीमेशन के अंत में, हम एक नए राज्य में घटक का अनुवाद करते हैं, ऑफसेट को शून्य करते हैं और लेआउट को निष्पादित करते हैं।

 @Override public void onAnimationEnd(Animator animation) { setOpenedState(opening); bottomPanel.setTranslationY(0); slidingPanel.setTranslationY(0); requestLayout(); } 

अन्य तत्वों से टच'ए का अवरोधन

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

 @Override public boolean onInterceptTouchEvent(MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_DOWN) { touchY = event.getY(); } else if (event.getAction() == MotionEvent.ACTION_MOVE) { if (Math.abs(touchY - event.getY()) > touchSlop) { isBeingDragged = true; startDragging(event); } } else if (event.getAction() == MotionEvent.ACTION_UP) { isBeingDragged = false; } return isBeingDragged; } 

हमारे कार्यान्वयन में, हम यह देखने के लिए जांचते हैं कि क्या उपयोगकर्ता ने सच लौटने से पहले अपनी उंगली को पर्याप्त (टचस्लोप) स्थानांतरित कर दिया है (जिसका अर्थ है कि हमने नियंत्रण ले लिया है)।
हो गया, अब उपयोगकर्ता बटन पर क्लिक कर सकता है और पैनल को कहीं भी ले जाना शुरू कर सकता है। बटन बस क्लिक को पंजीकृत नहीं करता है, लेकिन ACTION_CANCEL घटना प्राप्त करता है।

समापन

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

सभी घटक स्रोत गिथब पर उपलब्ध हैं। आलेख में वर्णित वर्णन के अतिरिक्त, कार्यान्वयन में यह भी शामिल है:

1. पैनलों के बीच एक छाया खींचना;
2. कस्टम विशेषताएँ;
3. एनीमेशन को गति देने के लिए हार्डवेयर परतों का उपयोग करना।

आपका ध्यान देने के लिए धन्यवाद।