Kotlin Android MotionLayout Beispiel

In diesem Tutorial lernen Sie motionlayout kennen und sehen sich Beispiele an, wie Sie damit Animationen in Ihrer App verwalten können. Aber zuerst: Was ist das?

MotionLayout ist ein Layouttyp, mit dem Sie Bewegungen und Widget-Animationen in Ihrer Anwendung verwalten können.

Diese Klasse ist eine Unterklasse des flexiblen ConstraintLayout und baut darauf auf. Sie ist daher ab API-Level 14 verfügbar. Sie überbrückt die Lücke zwischen Layout-Übergängen und komplexer Bewegungsverwaltung und bietet eine Mischung aus Funktionen des Property-Animations-Frameworks, des TransitionManagers und des CoordinatorLayouts.

Sie können mehr über motionlayout hier lesen.

Beispiel 1: MotionLayout - Parallaxes Scrolling mit MotionLayout

Dies ist ein einfaches Beispiel, das Sie in MotionLayout einführt, indem es einen Parallax-Scrolling-Effekt für den Inhalt implementiert.

Dies ist besonders auf Detailseiten wichtig, um den Benutzern ein modernes Erlebnis zu bieten. Hier ist eine Demonstration dessen, was gebaut wird:

Android MotionLayout Beispiel

Schritt 1: Abhängigkeiten

Für dieses Projekt werden keine Abhängigkeiten von Drittanbietern benötigt.

Schritt 2: Definieren von Bewegungen

Sie müssen die Bewegungen als Xml-Ressourcen-Dateien definieren. Erstellen Sie zunächst einen Ordner mit dem Namen xml unter dem Verzeichnis res und fügen Sie die folgenden zwei Szenen hinzu:

scene_header.xml

<?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"
            motion:motionInterpolator="linear">
        <OnSwipe
                motion:touchAnchorId="@+id/image"
                motion:touchAnchorSide="bottom"
                motion:dragDirection="dragUp"/>

        <ConstraintSet android:id="@+id/start">
            <Constraint
                    android:id="@id/image"
                    android:layout_width="match_parent"
                    android:layout_height="220dp"
                    android:alpha="1.0"
                    motion:layout_constraintTop_toTopOf="parent"/>
            <Constraint
                    android:id="@id/label"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    motion:layout_constraintBottom_toBottomOf="@+id/guideline"
                    motion:layout_constraintStart_toStartOf="parent"/>
            <Constraint
                    android:id="@id/guideline"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    motion:layout_constraintGuide_begin="210dp"/>
        </ConstraintSet>

        <ConstraintSet android:id="@+id/end">
            <Constraint
                    android:id="@id/image"
                    android:layout_width="match_parent"
                    android:layout_height="220dp"
                    android:alpha="0"
                    android:translationX="0dp"
                    android:translationY="0dp"
                    motion:layout_constraintTop_toTopOf="parent"/>
            <Constraint
                    android:id="@id/label"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:scaleX="0.6"
                    android:scaleY="0.6"
                    motion:layout_constraintBottom_toBottomOf="@+id/guideline"
                    motion:layout_constraintStart_toStartOf="parent"/>
            <Constraint
                    android:id="@id/guideline"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    motion:layout_constraintGuide_begin="56dp"/>
        </ConstraintSet>

    </Transition>

</MotionScene>

**scene_main.xml

<?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="300"
            motion:motionInterpolator="linear">

        <OnSwipe
                motion:touchAnchorId="@+id/header"
                motion:touchAnchorSide="bottom"
                motion:dragDirection="dragUp" />

        <ConstraintSet android:id="@+id/start">
            <Constraint
                    android:id="@id/header"
                    android:layout_width="match_parent"
                    android:layout_height="220dp"
                    motion:layout_constraintTop_toTopOf="parent" />

            <Constraint
                    android:id="@id/contents"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    motion:layout_constraintTop_toBottomOf="@+id/header"
                    motion:layout_constraintBottom_toBottomOf="parent" />
        </ConstraintSet>

        <ConstraintSet android:id="@+id/end">
            <Constraint
                    android:id="@+id/header"
                    android:layout_width="match_parent"
                    android:layout_height="56dp"
                    motion:layout_constraintTop_toTopOf="parent"
                    motion:progress="1"/>

            <Constraint
                    android:id="@id/contents"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    motion:layout_constraintTop_toBottomOf="@+id/header"
                    motion:layout_constraintBottom_toBottomOf="parent" />
        </ConstraintSet>
    </Transition>

</MotionScene>

Schritt 3: Layouts erstellen

Der nächste Schritt besteht darin, Ihre xml-Layouts zu erstellen. Es gibt drei solcher Layouts:

(a). header_scroll.xml

<androidx.constraintlayout.motion.widget.MotionLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#000000"
        app:layoutDescription="@xml/scene_header">

    <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="220dp"
            android:scaleType="centerCrop"
            android:src="@drawable/flower"/>

    <TextView
            android:id="@+id/label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Lorem Ipsum"
            android:textSize="30dp"
            android:padding="10dp"
            android:textColor="#FFFFFF"/>

    <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_begin="210dp"/>

</androidx.constraintlayout.motion.widget.MotionLayout>

(b). contents_scroll.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/contents"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/large_text"
            android:padding="10dp"/>

</androidx.core.widget.NestedScrollView>

(c). activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutDescription="@xml/scene_main"
        tools:context=".MainActivity">

    <include layout="@layout/header_scroll"/>
    <include layout="@layout/contents_scroll"/>

</androidx.constraintlayout.motion.widget.MotionLayout>

Schritt : Code schreiben

Der nächste Schritt ist das Schreiben des Codes für MainActivity, in diesem Fall in der Programmiersprache Kotlin. Dies wird Ihre Startaktivität sein.

Hier ist der vollständige Code:

MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Schritt : Code ausführen

Nachdem Sie die Schritte von Adobe befolgt haben, führen Sie den Code in android studio aus.

Referenz

Sie können die Download-Links zum Projekt unten finden:

---

Ich wünsche Ihnen einen schönen Tag.

Beispiel 1: MotionLayout - Parallaxes Scrolling mit MotionLayout​

Schritt 1: Abhängigkeiten​

Schritt 2: Definieren von Bewegungen​

Schritt 3: Layouts erstellen​

Schritt : Code schreiben​

Schritt : Code ausführen​

Referenz​