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

Google I / O 2019 सम्मेलन हाल ही में समाप्त हुआ, जिस पर अपडेट और हमारे प्यारे एसडीके में नवीनतम सुधारों की घोषणा की गई। व्यक्तिगत रूप से, मुझे विशेष रूप से कांस्ट्रेनल लयआउट की भविष्य की कार्यक्षमता के बारे में निकोलस रोड और जॉन हॉफर्ड द्वारा प्रस्तुति में रुचि थी। विशेष रूप से, मोशन लयआउट के रूप में इसके विस्तार के बारे में।

बीटा रिलीज़ के बाद, मैं इस लाइब्रेरी के आधार पर एक डेटिंग एनीमेशन लागू करना चाहता था।

पहले, शर्तों को परिभाषित करते हैं:

"मोशन लॅटआउट एक कांस्टीटय़ूनलआउट है जो आपको अलग-अलग राज्यों के बीच लेआउट को एनिमेट करने की अनुमति देता है।" - प्रलेखन

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

इसलिए, किए गए परिचय के साथ, अब देखते हैं कि हम क्या प्राप्त करना चाहते हैं:

कार्ड का ढेर

हम स्थानांतरित नक्शा दिखाते हैं

साथ शुरू करने के लिए, MotionLayout को लेआउट निर्देशिका में जोड़ें, जिसमें अब तक केवल एक शीर्ष कार्ड है:

<androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/motionLayout"     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:layout_width="match_parent"     android:layout_height="match_parent"     app:layoutDescription="@xml/scene_swipe"     app:motionDebug="SHOW_ALL">     <FrameLayout         android:id="@+id/topCard"         android:layout_width="0dp"         android:layout_height="0dp" /> </androidx.constraintlayout.motion.widget.MotionLayout> 

इस लाइन पर ध्यान दें: ऐप: मोशनडेब = "SHOW_ALL"। यह हमें डिबगिंग जानकारी, वस्तुओं के प्रक्षेपवक्र, एनीमेशन की शुरुआत और अंत के साथ राज्यों को प्रदर्शित करने की अनुमति देता है, साथ ही साथ वर्तमान प्रगति भी। डिबगिंग करते समय लाइन बहुत मदद करती है, लेकिन इसे ठेस भेजने से पहले इसे हटाना न भूलें: इसके लिए कोई अनुस्मारक नहीं है।

जैसा कि आप देख सकते हैं, हमने यहां के दृश्य के लिए कोई प्रतिबंध नहीं लगाया है। उन्हें उस दृश्य (मोशनसेन) से लिया जाएगा, जिसे अब हम परिभाषित करते हैं।

आइए प्रारंभिक स्थिति को परिभाषित करके शुरू करें: एक कार्ड स्क्रीन के केंद्र में स्थित होता है, जिसमें चारों ओर इंडेंट होते हैं।

 <MotionScene xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto">    <ConstraintSet android:id="@+id/rest">        <Constraint            android:id="@id/topCard"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_marginBottom="50dp"            android:layout_marginEnd="50dp"            android:layout_marginStart="50dp"            android:layout_marginTop="50dp"            app:layout_constraintEnd_toEndOf="parent"            app:layout_constraintStart_toStartOf="parent">    </ConstraintSet> </MotionScene> 

बाधा सेट (ConstraintSet) पास और पसंद जोड़ें। वे शीर्ष कार्ड की स्थिति को प्रतिबिंबित करेंगे जब यह पूरी तरह से बाएं या दाएं स्थानांतरित हो जाता है। हम चाहते हैं कि एक सुंदर एनीमेशन दिखाने के लिए स्क्रीन से गायब होने से पहले नक्शा बंद हो जाए जो हमारे फैसले की पुष्टि करता है।

 <ConstraintSet    android:id="@+id/pass"    app:deriveConstraintsFrom="@+id/rest">    <Constraint        android:id="@id/topCard"        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_marginBottom="80dp"        android:layout_marginEnd="200dp"        android:layout_marginStart="50dp"        android:layout_marginTop="20dp"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintWidth_percent="0.7" /> </ConstraintSet> <ConstraintSet    android:id="@+id/like"    app:deriveConstraintsFrom="@id/rest">    <Constraint        android:id="@id/topCard"        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_marginBottom="80dp"        android:layout_marginEnd="50dp"        android:layout_marginStart="200dp"        android:layout_marginTop="20dp"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintWidth_percent="0.7" /> </ConstraintSet> 

पिछले दृश्य में बाधाओं के दोनों सेटों को जोड़ें। वे लगभग समान हैं, केवल स्क्रीन के दोनों किनारों पर प्रतिबिंबित।

अब हमारे पास प्रतिबंधों के तीन सेट हैं - शुरू, पसंद और पास। आइए इन राज्यों के बीच के संक्रमण को परिभाषित करें।

ऐसा करने के लिए, स्वाइप के लिए बाईं ओर एक संक्रमण जोड़ें, स्वाइप के लिए दूसरा दाईं ओर।

 <Transition    app:constraintSetEnd="@+id/pass"    app:constraintSetStart="@+id/rest"    app:duration="300">    <OnSwipe        app:dragDirection="dragLeft"        app:onTouchUp="autoComplete"        app:touchAnchorId="@id/topCard"        app:touchAnchorSide="left"        app:touchRegionId="@id/topCard" /> </Transition> <Transition    app:constraintSetEnd="@+id/like"    app:constraintSetStart="@+id/rest"    app:duration="300">    <OnSwipe        app:dragDirection="dragRight"        app:onTouchUp="autoComplete"        app:touchAnchorId="@+id/topCard"        app:touchAnchorSide="right"        app:touchRegionId="@id/topCard" /> </Transition> 

तो, शीर्ष कार्ड के लिए, हम बाईं ओर स्वाइप एनीमेशन सेट करते हैं और वही - दाईं ओर स्वाइप के लिए दर्पण।

ये गुण हमारे दृश्य के साथ बातचीत को बेहतर बनाने में मदद करेंगे:

• touchRegionId: चूँकि हमने मानचित्र के चारों ओर पैडिंग जोड़ी है, इसलिए हमें यह सुनिश्चित करने की आवश्यकता है कि स्पर्श केवल मानचित्र के क्षेत्र में ही पहचाना जाता है, न कि पूरा मोशन लयआउट। यह touchRegionId का उपयोग करके किया जा सकता है।
  
• onTouchUp: कार्ड जारी करने के बाद एनीमेशन का क्या होगा? इसे या तो अपनी प्रारंभिक स्थिति में आगे बढ़ना चाहिए या वापस लौटना चाहिए, इसलिए स्वत: पूर्णता लागू होती है।
  

आइए देखें क्या हुआ:

मानचित्र स्वचालित रूप से स्क्रीन से बाहर चला जाता है

अब हम एनीमेशन पर काम करेंगे, जो कि मानचित्र के स्क्रीन से बाहर जाने पर शुरू होगा।

हम अपने एनिमेशन के प्रत्येक अंतिम स्थिति के लिए दो और कॉन्स्ट्रेन्ससेट सेट जोड़ते हैं: मैप स्क्रीन को बाएँ और दाएँ छोड़ता है।

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

 <ConstraintSet android:id="@+id/offScreenLike">    <Constraint        android:id="@id/topCard"        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_marginBottom="80dp"        android:layout_marginEnd="50dp"        android:layout_marginTop="20dp"        app:layout_constraintStart_toEndOf="parent"        app:layout_constraintWidth_percent="0.7" />   </ConstraintSet> 

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

 <Transition app:autoTransition="animateToEnd" app:constraintSetEnd="@+id/offScreenLike" app:constraintSetStart="@+id/like" app:duration="150" /> 

अब हमारे पास एक स्वाइप कार्ड है जिसे स्क्रीन से स्वाइप किया जा सकता है!

निचला नक्शा एनीमेशन

अब डेक के अनंत का भ्रम पैदा करने के लिए नीचे कार्ड बनाते हैं।

लेआउट में पहले के समान एक और मानचित्र जोड़ें:

 <FrameLayout    android:id="@+id/bottomCard"    android:layout_width="0dp"    android:layout_height="0dp"    android:background="@color/colorAccent" /> 

एनीमेशन के प्रत्येक चरण में इस मानचित्र पर लागू प्रतिबंधों को सेट करने के लिए XML बदलें:

 <ConstraintSet android:id="@id/rest">    <!-- ... -->    <Constraint android:id="@id/bottomCard">        <Layout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_marginBottom="50dp"            android:layout_marginEnd="50dp"            android:layout_marginStart="50dp"            android:layout_marginTop="50dp" />        <Transform            android:scaleX="0.90"            android:scaleY="0.90" />    </Constraint> </ConstraintSet> <ConstraintSet    android:id="@+id/offScreenLike"    app:deriveConstraintsFrom="@id/like">    <!-- ... -->    <Constraint android:id="@id/bottomCard">        <Transform            android:scaleX="1"            android:scaleY="1" />    </Constraint> </ConstraintSet> 

ऐसा करने के लिए, हम सुविधाजनक ConstraintSet संपत्ति का उपयोग कर सकते हैं।

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



हमारे मामले में, इसका मतलब है कि पास सेट में हम लेआउट टैग को परिभाषित नहीं करते हैं, लेकिन इसे माता-पिता से कॉपी करते हैं। हालांकि, हम ट्रांसफ़ॉर्म को ओवरराइड करते हैं, इसलिए, हम ट्रांसफॉर्म टैग में निर्दिष्ट सभी विशेषताओं को अपने साथ बदल देते हैं, इस मामले में, पैमाने में बदलाव।

यह आसान है कि किसी नए तत्व को जोड़ने के लिए MotionLayout का उपयोग करना आसान है और इसे हमारे दृश्य के एनिमेशन के साथ एकीकृत करना है।

एनीमेशन को अंतहीन बनाना

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

पहले मैं एक नए बदलाव के साथ ऐसा करना चाहता था:

 <Transition    app:autoTransition="jumpToEnd"    app:constraintSetEnd="@+id/rest"    app:constraintSetStart="@+id/offScreenLike"    app:duration="0" /> 

पूरा एनिमेशन वैसा ही चलता है, जैसा उसे होना चाहिए। अब हमारे पास कार्ड का एक ढेर है जिसे आप अंतहीन रूप से स्वाइप कर सकते हैं!

थोड़ा स्वाइप करने के बाद, मैंने कुछ देखा। कार्ड को छूने पर डेक एनीमेशन के अंत में संक्रमण रुक जाता है। एनिमेशन की अवधि शून्य होने के बावजूद, यह अभी भी रुकता है, जो खराब है।



मैं केवल एक तरह से जीतने में कामयाब रहा - प्रोग्रामेटिक रूप से MotionLayout में सक्रिय संक्रमण को बदलकर।

ऐसा करने के लिए, हम एनीमेशन के पूरा होने पर एक कॉलबैक सेट करेंगे। जैसे ही ऑफस्क्रीनलाइक और ऑफस्क्रीनस्क्रीन पूरा हो जाता है, हम बस फिर से बाकी राज्य में संक्रमण को रीसेट कर देते हैं और प्रगति को शून्य कर देते हैं।

 motionLayout.setTransitionListener(object : TransitionAdapter() {    override fun onTransitionCompleted(motionLayout: MotionLayout, currentId: Int) {        when (currentId) {            R.id.offScreenPass,            R.id.offScreenLike -> {                motionLayout.progress = 0f                motionLayout.setTransition(R.id.rest, R.id.like)            }        }    }   }) 

इससे कोई फर्क नहीं पड़ता कि हम किस संक्रमण को निर्धारित करते हैं, पास करते हैं या पसंद करते हैं, जब हम स्वाइप करते हैं तो हम इच्छित पर स्विच करते हैं।



यह समान दिखता है, लेकिन एनीमेशन बंद नहीं होता है! चलो आगे बढ़ते हैं!

डेटा बाइंडिंग

नक्शे पर प्रदर्शित करने के लिए परीक्षण डेटा बनाएं। अभी के लिए, हम प्रत्येक कार्ड की पृष्ठभूमि का रंग बदलने के लिए खुद को सीमित करेंगे।

हम एक svMp-Method के साथ एक ViewModel बनाते हैं जो केवल नए डेटा को प्रतिस्थापित करता है। इसे इस तरह से गतिविधि में बांधें:

 val viewModel = ViewModelProviders .of(this) .get(SwipeRightViewModel::class.java) viewModel .modelStream .observe(this, Observer { bindCard(it) }) motionLayout.setTransitionListener(object : TransitionAdapter() { override fun onTransitionCompleted(motionLayout: MotionLayout, currentId: Int) { when (currentId) { R.id.offScreenPass, R.id.offScreenLike -> { motionLayout.progress = 0f motionLayout.setTransition(R.id.rest, R.id.like) viewModel.swipe() } } } }) 

यह स्वाइप एनीमेशन के पूरा होने के बारे में ViewModel को सूचित करने के लिए बना हुआ है, और यह उस डेटा को अपडेट करेगा जो वर्तमान में प्रदर्शित है।

पॉपअप आइकन

दो दृश्य जोड़ें, जो जब स्क्रीन के एक तरफ स्वाइप दिखाई देते हैं (केवल एक नीचे दिखाया गया है, तो दूसरा मिरर किया गया है)।

 <ImageView android:id="@+id/likeIndicator" android:layout_width="0dp" android:layout_height="0dp" /> 

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

 <ConstraintSet android:id="@id/rest">    <!-- ... -->    <Constraint android:id="@+id/like">        <Layout            android:layout_width="40dp"            android:layout_height="40dp"            app:layout_constraintBottom_toBottomOf="parent"            app:layout_constraintStart_toEndOf="parent"            app:layout_constraintTop_toTopOf="parent" />        <Transform            android:scaleX="0.5"            android:scaleY="0.5" />        <PropertySet android:alpha="0" />    </Constraint>   </ConstraintSet> <ConstraintSet    android:id="@+id/like"    app:deriveConstraintsFrom="@id/rest">    <!-- ... -->    <Constraint android:id="@+id/like">        <Layout            android:layout_width="100dp"            android:layout_height="100dp"            app:layout_constraintBottom_toBottomOf="@id/topCard"            app:layout_constraintEnd_toEndOf="@id/topCard"            app:layout_constraintStart_toStartOf="@id/topCard"            app:layout_constraintTop_toTopOf="@id/topCard" />        <Transform            android:scaleX="1"            android:scaleY="1" />        <PropertySet android:alpha="1" />    </Constraint> </ConstraintSet> 

स्क्रीन से परे जाने वाले एनिमेशन पर प्रतिबंध लगाने की आवश्यकता नहीं है, क्योंकि वे माता-पिता से विरासत में मिले हैं। और हमारे मामले में, यह स्वाइप की स्थिति है।

हमें बस इतना ही करना है। अब आप बहुत आसानी से एनीमेशन श्रृंखला में घटकों को जोड़ सकते हैं।

प्रोग्राम को एनिमेशन से चलाएं

हम कार्ड पर दो बटन बना सकते हैं ताकि उपयोगकर्ता न केवल स्वाइप कर सके, बल्कि बटन का उपयोग करके नियंत्रण कर सके।

प्रत्येक बटन स्वाइप के समान एनीमेशन शुरू करता है।

हमेशा की तरह, बटन क्लिक की सदस्यता लें और सीधे MotionLayout ऑब्जेक्ट पर एनीमेशन शुरू करें:

 likeButton.setOnClickListener {    motionLayout.transitionToState(R.id.like) } passButton.setOnClickListener {    motionLayout.transitionToState(R.id.pass) } 

हमें ऊपर और नीचे दोनों कार्ड के लिए बटन जोड़ने की आवश्यकता है ताकि एनीमेशन लगातार खेलता रहे। हालाँकि, निचले मानचित्र के लिए, क्लिक सदस्यता की आवश्यकता नहीं है, क्योंकि यह या तो दिखाई नहीं देता है, या ऊपरी नक्शा एनिमेटेड है, और हम इसे बाधित नहीं करना चाहते हैं।



MotionLayout हमारे लिए राज्य परिवर्तनों को कैसे संभालता है, इसका एक और शानदार उदाहरण। आइए एनीमेशन को थोड़ा धीमा करें:



मोशन लाइएट के बदले हुए बदलाव को देखें। जादू!

मानचित्र को वक्र के साथ स्वाइप करें

मान लीजिए कि हम इसे पसंद करते हैं यदि मानचित्र एक सीधी रेखा में नहीं चलता है, लेकिन एक वक्र (ईमानदार होने के लिए, मैं बस ऐसा करने की कोशिश करना चाहता था)।

फिर आपको दोनों दिशाओं में आंदोलन के लिए KeyPosition को परिभाषित करने की आवश्यकता है, ताकि आंदोलन का मार्ग एक चाप द्वारा घुमावदार हो।

इसे मोशन सीन में जोड़ें:

 <Transition    app:constraintSetEnd="@+id/like"    app:constraintSetStart="@+id/rest"    app:duration="300">    <!-- ... -->    <KeyFrameSet>        <KeyPosition            app:drawPath="path"            app:framePosition="50"            app:keyPositionType="pathRelative"            app:motionTarget="@id/topCard"            app:percentX="0.5"            app:percentY="-0.1" />           </KeyFrameSet> </Transition> 

अब नक्शा एक गैर-प्रतिबंधित घुमावदार रास्ते पर चलता है। जादुई!

निष्कर्ष

जब आप उत्पादन में समान एनिमेशन के हमारे वर्तमान कार्यान्वयन के साथ इन एनिमेशन को बनाते समय मुझे मिली कोड की मात्रा की तुलना करते हैं, तो परिणाम चौंका देने वाला होता है।

MotionLayout अपूर्ण रूप से संक्रमण को रद्द करने (उदाहरण के लिए, जब छुआ जाता है) को संभालता है, एनीमेशन श्रृंखला बना रहा है, संक्रमण के दौरान गुण बदल रहा है, और बहुत कुछ। यह टूल मूल रूप से यूआई लॉजिक को सरल करते हुए, सब कुछ बदल देता है।

काम करने लायक कुछ और चीजें हैं (ज्यादातर रिसाइकलर व्यू में एनिमेशन और बिडायरेबल स्क्रॉलिंग को अक्षम करना), लेकिन मुझे यकीन है कि यह सॉल्व है।

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

पुनश्च: और चूंकि उन्होंने मुझे एक अनुवादक के रूप में मंजिल दी है, हमारी एंड्रॉइड टीम में एक डेवलपर के लिए जगह है । आपका ध्यान के लिए धन्यवाद।