Dans ce tutoriel, vous découvrirez le motionlayout et vous verrez des exemples de son utilisation pour gérer les animations dans votre application. Mais d'abord, qu'est-ce que c'est ?
MotionLayout est un type de layout qui vous aide à gérer les mouvements et les animations de widgets dans votre application.
Cette classe est une sous-classe de la flexible ConstraintLayout et s'appuie sur elle. Elle est donc disponible à partir du niveau 14 de l'API. Elle comble le fossé entre les transitions de mise en page et la gestion complexe des mouvements, en offrant un mélange de fonctionnalités entre le cadre d'animation des propriétés, TransitionManager et CoordinatorLayout.
Vous pouvez en savoir plus sur motionlayout [ici] (https://developer.android.com/training/constraint-layout/motionlayout).
Exemple 1 : MotionLayout - Défilement parallaxe à l'aide de MotionLayout
Il s'agit d'un exemple simple qui vous présente le motionlayout en mettant en œuvre l'effet de défilement Parallax sur le contenu.
Cet effet est important, notamment sur les pages de détail, pour offrir une expérience moderne aux utilisateurs. Voici une démonstration de ce qui est construit :
Étape 1 : Dépendances
Aucune dépendance de tierce partie n'est nécessaire pour ce projet.
Étape 2 : Définition des mouvements
Vous devez définir les mouvements comme des fichiers de ressources xml. Tout d'abord, créez un dossier appelé xml dans votre répertoire res et ajoutez les deux scènes suivantes :
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>
Etape 3 : Créer des mises en page
L'étape suivante consiste à créer vos mises en page xml. Il y a trois mises en page de ce type :
(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>
Étape : Écrire le code
L'étape suivante consiste à écrire le code de votre MainActivity, dans ce cas en langage de programmation Kotlin. Ce sera votre activité de lancement.
Voici le code complet :
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)
}
}
Step : Exécuter le code
Après avoir suivi les étapes ci-dessus, exécutez le code dans android studio.
Référence
Vous pouvez trouver les liens de téléchargement du projet ci-dessous :
| Numéro | Lien | |
|---|---|---|
| 1. | Télécharger le code | |
| 2. | Suivre l'auteur du code | [Suivre l'auteur du code]. |
Passez une bonne journée.
