MotionLayout
एक लेआउट टाइप है, जो आपके ऐप्लिकेशन में मोशन और विजेट ऐनिमेशन को मैनेज करने में आपकी मदद करता है.
MotionLayout
इसकी सब-क्लास है
ConstraintLayout
और अपने समृद्ध
लेआउट सुविधाएं. ConstraintLayout
लाइब्रेरी के हिस्से के तौर पर, MotionLayout
सहायता लाइब्रेरी के तौर पर उपलब्ध है.
MotionLayout
लेआउट ट्रांज़िशन और कॉम्प्लेक्स मोशन के बीच के अंतर को कम करता है
हैंडलिंग, जिसमें प्रॉपर्टी ऐनिमेशन के बीच कई सुविधाओं का इस्तेमाल किया गया है
फ़्रेमवर्क,
TransitionManager
, और
CoordinatorLayout
.
लेआउट के बीच ट्रांज़िशन का ब्यौरा देने के अलावा, MotionLayout
आपको
किसी भी लेआउट प्रॉपर्टी को ऐनिमेट करना होगा. इसके अलावा, यह स्वाभाविक रूप से, seekable
ट्रांज़िशन. इसका मतलब है कि ट्रांज़िशन के दौरान, कोई भी पॉइंट तुरंत दिखाया जा सकता है
और टच इनपुट जैसी कुछ स्थितियों के हिसाब से तय होता है. MotionLayout
से भी मदद मिलती है
कीफ़्रेम सेट करने होंगे, जिससे आपकी ज़रूरतों के हिसाब से पूरी तरह से अपनी पसंद के मुताबिक ट्रांज़िशन किए जा सकेंगे.
MotionLayout
में पूरी जानकारी दी गई है. इसका मतलब है कि किसी भी ट्रांज़िशन के बारे में
एक्सएमएल, चाहे वह कितना भी जटिल हो.
डिज़ाइन पर ध्यान देना
MotionLayout
का मकसद यूज़र इंटरफ़ेस (यूआई) एलिमेंट की जगह बदलना, उनका साइज़ बदलना, और उन्हें ऐनिमेट करना है
जैसे कि बटन और टाइटल बार. अपने ऐप्लिकेशन में मोशन का इस्तेमाल इस तौर पर न करें
गैरज़रूरी विशेष प्रभाव. इसका इस्तेमाल करके, उपयोगकर्ताओं को यह समझने में मदद करें कि आपका ऐप्लिकेशन क्या है
कर रहे हैं. अपने ऐप्लिकेशन को मोशन के साथ डिज़ाइन करने के बारे में ज़्यादा जानकारी के लिए,
मटीरियल डिज़ाइन सेक्शन के बारे में जानकारी
मोशन.
शुरू करें
अपने प्रोजेक्ट में MotionLayout
का इस्तेमाल करने के लिए, यह तरीका अपनाएं.
-
ConstraintLayout
डिपेंडेंसी जोड़ें: इस्तेमाल करने के लिए अपने प्रोजेक्ट मेंMotionLayout
जोड़ें, तो आपके ऐप्लिकेशन के हिसाब सेConstraintLayout
2.0 डिपेंडेंसीbuild.gradle
फ़ाइल. अगर आप AndroidX का इस्तेमाल कर रहे हैं, तो निम्न निर्भरता:ग्रूवी
dependencies { implementation "androidx.constraintlayout:constraintlayout:2.2.0-beta01" // To use constraintlayout in compose implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01" }
Kotlin
dependencies { implementation("androidx.constraintlayout:constraintlayout:2.2.0-beta01") // To use constraintlayout in compose implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01") }
-
एक
MotionLayout
फ़ाइल बनाएं:MotionLayout
ConstraintLayout
की सब-क्लास है, ताकि आप किसी भी वर्शन मौजूदाConstraintLayout
कोMotionLayout
में अपनी लेआउट संसाधन फ़ाइल में क्लास का नाम बदलना, जैसा कि ये उदाहरण देखें:AndroidX
<!-- before: ConstraintLayout --> <androidx.constraintlayout.widget.ConstraintLayout .../> <!-- after: MotionLayout --> <androidx.constraintlayout.motion.widget.MotionLayout .../>
सहायता लाइब्रेरी
<!-- before: ConstraintLayout --> <android.support.constraint.ConstraintLayout .../> <!-- after: MotionLayout --> <android.support.constraint.motion.MotionLayout .../>
यहां
MotionLayout
फ़ाइल का पूरा उदाहरण दिया गया है, जो पहली इमेज में दिखाए गए लेआउट के बारे में बताता है:AndroidX
<?xml version="1.0" encoding="utf-8"?> <!-- activity_main.xml --> <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene_01" tools:showPaths="true"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" android:text="Button" /> </androidx.constraintlayout.motion.widget.MotionLayout>
सहायता लाइब्रेरी
<?xml version="1.0" encoding="utf-8"?> <!-- activity_main.xml --> <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene_01" tools:showPaths="true"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" android:text="Button" /> </android.support.constraint.motion.MotionLayout>
-
एक MotionScene बनाएं: पिछले
MotionLayout
में उदाहरण के लिए,app:layoutDescription
एट्रिब्यूट मोशन सीन. मोशन सीन एक एक्सएमएल रिसॉर्स फ़ाइल है. इसके अंदर<MotionScene>
रूट एलिमेंट है, मोशन सीन में संबंधित लेआउट. लेआउट की जानकारी को मोशन से अलग रखने के लिए ब्यौरे में, हरMotionLayout
एक अलग मोशन का रेफ़रंस देता है सीन. मोशन सीन की परिभाषाओं को किसी भी मिलते-जुलते सीन के मुकाबले ज़्यादा अहमियत दी जाती हैMotionLayout
में दी गई परिभाषाएं.यहां मोशन सीन फ़ाइल का एक उदाहरण दिया गया है, जिसमें बेसिक हॉरिज़ॉन्टल के बारे में बताया गया है पहली इमेज में मोशन:
<?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> <OnSwipe motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" motion:dragDirection="dragRight" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene>
यहां दी गई बातों का ध्यान रखें:
-
<Transition>
गति की मूल परिभाषा शामिल होती है.-
motion:constraintSetStart
औरmotion:constraintSetEnd
मोशन के एंडपॉइंट. इन एंडपॉइंट के बारे में मोशन सीन में बाद में<ConstraintSet>
एलिमेंट जोड़े गए. -
motion:duration
मिलीसेकंड की संख्या बताता है यह गति पूरी होने में लग सकती है.
-
-
<OnSwipe>
आपको गति के लिए टच नियंत्रण बनाने देता है.-
motion:touchAnchorId
का मतलब उस व्यू से है जिसे उपयोगकर्ता देख सकता है स्वाइप करें और खींचें. -
motion:touchAnchorSide
का मतलब है दृश्य को दाईं ओर से खींचा जा रहा है. -
motion:dragDirection
का मतलब है, प्रोग्रेस दिशा तय करें. उदाहरण के लिए,motion:dragDirection="dragRight"
का मतलब है, प्रोग्रेस जैसे-जैसे दृश्य दाईं ओर खींचा जाता है वैसे-वैसे बढ़ता जाता है.
-
-
<ConstraintSet>
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है वह जगह है जहां आप अपनी गति के बारे में बताने वाले अलग-अलग कंस्ट्रेंट तय करते हैं. इस उदाहरण में, इसके लिए एक<ConstraintSet>
तय किया गया है आपकी गतिविधि के हर एंडपॉइंट को. ये एंडपॉइंट वर्टिकल रूप से सेंटर किए गए हैंapp:layout_constraintTop_toTopOf="parent"
और का इस्तेमाल करकेapp:layout_constraintBottom_toBottomOf="parent"
. हॉरिज़ॉन्टल तौर पर, एंडपॉइंट स्क्रीन.
उन विभिन्न तत्वों के बारे में विस्तार से जानने के लिए, जो कोई मोशन सीन सहायता करता है, तो MotionLayout के उदाहरण.
-
इंटरपोलेट किए गए एट्रिब्यूट
मोशन सीन वाली फ़ाइल में, ConstraintSet
एलिमेंट में अतिरिक्त एलिमेंट हो सकता है
ट्रांज़िशन के दौरान इंटरपोलेट किए गए एट्रिब्यूट. स्थिति और
बाउंड है, तो ये एट्रिब्यूट MotionLayout
से इंटरपोलेट किए गए हैं:
alpha
visibility
elevation
rotation
,rotationX
,rotationY
translationX
,translationY
,translationZ
scaleX
,scaleY
कस्टम विशेषताएं
<Constraint>
में, यह बताने के लिए <CustomAttribute>
एलिमेंट का इस्तेमाल किया जा सकता है
उन एट्रिब्यूट के लिए ट्रांज़िशन जो क्रम या View
से नहीं जुड़े हैं
एट्रिब्यूट.
<Constraint android:id="@+id/button" ...> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60"/> </Constraint>
<CustomAttribute>
के दो एट्रिब्यूट होते हैं:
motion:attributeName
ज़रूरी है और गैटर के साथ किसी ऑब्जेक्ट से मेल खाना चाहिए और सेटर तरीके. गैटर और सेटर को किसी खास पैटर्न से मेल खाना चाहिए. इसके लिए उदाहरण के लिए,backgroundColor
का इस्तेमाल किया जा सकता है, क्योंकि व्यू मेंgetBackgroundColor()
औरsetBackgroundColor()
तरीके.- आपको जो अन्य एट्रिब्यूट देना होगा वह वैल्यू टाइप पर आधारित होना चाहिए. इनमें से चुनें
निम्न समर्थित प्रकार:
- रंगों के लिए
motion:customColorValue
- पूर्णांक के लिए
motion:customIntegerValue
- फ़्लोट के लिए
motion:customFloatValue
- स्ट्रिंग के लिए
motion:customStringValue
- डाइमेंशन के लिए
motion:customDimension
- बूलियन के लिए
motion:customBoolean
- रंगों के लिए
कस्टम एट्रिब्यूट तय करते समय, स्टार्ट और दोनों में एंडपॉइंट वैल्यू तय करें
खत्म होने के <ConstraintSet>
एलिमेंट.
बैकग्राउंड का रंग बदलें
पिछले उदाहरण के आधार पर, मान लीजिए कि आपको व्यू के रंग बदलने हैं जैसा कि दूसरी इमेज में दिखाया गया है.
हर ConstraintSet
एलिमेंट में <CustomAttribute>
एलिमेंट जोड़ें, जैसा कि यहां दिखाया गया है
यहां दिया गया कोड स्निपेट जोड़ें:
<ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent"> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#D81B60" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent"> <CustomAttribute motion:attributeName="backgroundColor" motion:customColorValue="#9999FF" /> </Constraint> </ConstraintSet>
अन्य MotionLayout एट्रिब्यूट
पिछले उदाहरण में दिए गए एट्रिब्यूट के अलावा, MotionLayout
में
विशेषताएं जिन्हें आप शायद शामिल करना चाहें:
app:applyMotionScene="boolean"
बताता है कि मोशन सीन को लागू करना है या नहीं. इस एट्रिब्यूट के लिए डिफ़ॉल्ट वैल्यूtrue
है.app:showPaths="boolean"
बताता है कि मोशन पाथ को हलचल चल रही है. इस एट्रिब्यूट के लिए डिफ़ॉल्ट वैल्यूfalse
है.app:progress="float"
की मदद से, ट्रांज़िशन की प्रोग्रेस के बारे में साफ़ तौर पर बताया जा सकता है. आपने लोगों तक पहुंचाया मुफ़्त में0
(ट्रांज़िशन की शुरुआत) से1
तक के किसी भी फ़्लोटिंग-पॉइंट वैल्यू का इस्तेमाल कर सकता है (संक्रमण की समाप्ति).app:currentState="reference"
की मदद से, आपको कोई खासConstraintSet
तय करने की सुविधा मिलती है.app:motionDebug
आपको हलचल है. संभावित वैल्यू"SHOW_PROGRESS"
,"SHOW_PATH"
या"SHOW_ALL"
हैं.
अन्य संसाधन
MotionLayout
के बारे में ज़्यादा जानकारी के लिए, ये संसाधन देखें:
- Kotlin 03.2 में बेहतर Android: MotionLayout के साथ ऐनिमेशन
- MotionLayout के उदाहरण
- GitHub पर MotionLayout/ConstraintLayout सैंपल
- MotionLayout के बारे में जानकारी (पार्ट I)
- MotionLayout के बारे में जानकारी (पार्ट II)
- MotionLayout के बारे में जानकारी (पार्ट III)
- MotionLayout के बारे में जानकारी (पार्ट IV)