MotionLayout की मदद से, मोशन और विजेट ऐनिमेशन मैनेज करें

MotionLayout एक लेआउट टाइप है, जो आपके ऐप्लिकेशन में मोशन और विजेट ऐनिमेशन को मैनेज करने में आपकी मदद करता है. MotionLayout इसकी सब-क्लास है ConstraintLayout और अपने समृद्ध लेआउट सुविधाएं. ConstraintLayout लाइब्रेरी के हिस्से के तौर पर, MotionLayout सहायता लाइब्रेरी के तौर पर उपलब्ध है.

MotionLayout लेआउट ट्रांज़िशन और कॉम्प्लेक्स मोशन के बीच के अंतर को कम करता है हैंडलिंग, जिसमें प्रॉपर्टी ऐनिमेशन के बीच कई सुविधाओं का इस्तेमाल किया गया है फ़्रेमवर्क, TransitionManager, और CoordinatorLayout.

पहली इमेज. टच को कंट्रोल करने वाली सामान्य गतिविधि.

लेआउट के बीच ट्रांज़िशन का ब्यौरा देने के अलावा, MotionLayout आपको किसी भी लेआउट प्रॉपर्टी को ऐनिमेट करना होगा. इसके अलावा, यह स्वाभाविक रूप से, seekable ट्रांज़िशन. इसका मतलब है कि ट्रांज़िशन के दौरान, कोई भी पॉइंट तुरंत दिखाया जा सकता है और टच इनपुट जैसी कुछ स्थितियों के हिसाब से तय होता है. MotionLayout से भी मदद मिलती है कीफ़्रेम सेट करने होंगे, जिससे आपकी ज़रूरतों के हिसाब से पूरी तरह से अपनी पसंद के मुताबिक ट्रांज़िशन किए जा सकेंगे.

MotionLayout में पूरी जानकारी दी गई है. इसका मतलब है कि किसी भी ट्रांज़िशन के बारे में एक्सएमएल, चाहे वह कितना भी जटिल हो.

डिज़ाइन पर ध्यान देना

MotionLayout का मकसद यूज़र इंटरफ़ेस (यूआई) एलिमेंट की जगह बदलना, उनका साइज़ बदलना, और उन्हें ऐनिमेट करना है जैसे कि बटन और टाइटल बार. अपने ऐप्लिकेशन में मोशन का इस्तेमाल इस तौर पर न करें गैरज़रूरी विशेष प्रभाव. इसका इस्तेमाल करके, उपयोगकर्ताओं को यह समझने में मदद करें कि आपका ऐप्लिकेशन क्या है कर रहे हैं. अपने ऐप्लिकेशन को मोशन के साथ डिज़ाइन करने के बारे में ज़्यादा जानकारी के लिए, मटीरियल डिज़ाइन सेक्शन के बारे में जानकारी मोशन.

शुरू करें

अपने प्रोजेक्ट में MotionLayout का इस्तेमाल करने के लिए, यह तरीका अपनाएं.

  1. ConstraintLayout डिपेंडेंसी जोड़ें: इस्तेमाल करने के लिए अपने प्रोजेक्ट में MotionLayout जोड़ें, तो आपके ऐप्लिकेशन के हिसाब से ConstraintLayout 2.0 डिपेंडेंसी build.gradle फ़ाइल. अगर आप AndroidX का इस्तेमाल कर रहे हैं, तो निम्न निर्भरता:

    ग्रूवी

    dependencies {
    implementation "androidx.constraintlayout:constraintlayout:2.2.0-alpha14"
    // To use constraintlayout in compose
    implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14"
}

    Kotlin

    dependencies {
    implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha14")
    // To use constraintlayout in compose
    implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14")
}

  2. एक 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>

  3. एक 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 के बारे में ज़्यादा जानकारी के लिए, ये संसाधन देखें: