Cette page a été traduite par l'API Cloud Translation.

Gérer l'animation des mouvements et des widgets avec MotionLayout

MotionLayout est un type de mise en page qui vous aide à gérer les animations de mouvement et de widget dans votre application. MotionLayout est une sous-classe de ConstraintLayout s'appuie sur ses nombreuses de mise en page. Dans la bibliothèque ConstraintLayout, MotionLayout est disponible en tant que bibliothèque d'assistance.

MotionLayout établit un pont entre les transitions de mise en page et les mouvements complexes grâce à une combinaison de fonctionnalités dans l'animation des propriétés le framework, TransitionManager CoordinatorLayout

</ph> <ph type="x-smartling-placeholder">

</ph> Figure 1 : Mouvements basiques avec commande tactile.

En plus de décrire les transitions entre les mises en page, MotionLayout vous permet pour animer toutes les propriétés de mise en page. De plus, il permet intrinsèquement de rechercher de transition. Cela signifie que vous pouvez afficher instantanément n'importe quel point de la transition en fonction de certaines conditions, comme la saisie tactile. MotionLayout accepte aussi pour créer des transitions entièrement personnalisées selon vos besoins.

MotionLayout est entièrement déclaratif, ce qui signifie que vous pouvez décrire toutes les transitions dans XML, quelle que soit sa complexité.

Considérations de conception

MotionLayout est destiné à déplacer, redimensionner et animer les éléments d'interface utilisateur avec lesquels les utilisateurs interagissent, comme les boutons et les barres de titre. N'utilisez pas de mouvements dans votre application un effet spécial sans frais. Utilisez-le pour aider les utilisateurs à comprendre en quoi consiste votre application faire. Pour en savoir plus sur la conception d'une application avec mouvement, consultez la Section Material Design Comprendre mouvements.

Premiers pas

Suivez ces étapes pour commencer à utiliser MotionLayout dans votre projet.

Ajoutez la dépendance ConstraintLayout:pour utiliser MotionLayout dans votre projet, ajoutez le la dépendance ConstraintLayout 2.0 à l'état build.gradle. Si vous utilisez AndroidX, ajoutez le la dépendance suivante:

Groovy

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")
}

Créez un fichier MotionLayout: MotionLayout est une sous-classe de ConstraintLayout. Vous pouvez donc transformer tout d'un ConstraintLayout existant en MotionLayout en remplaçant le nom de la classe dans votre fichier de ressources de mise en page, comme indiqué dans les exemples suivants:

AndroidX

<!-- before: ConstraintLayout -->
<androidx.constraintlayout.widget.ConstraintLayout .../>
<!-- after: MotionLayout -->
<androidx.constraintlayout.motion.widget.MotionLayout .../>

Bibliothèque Support

<!-- before: ConstraintLayout -->
<android.support.constraint.ConstraintLayout .../>
<!-- after: MotionLayout -->
<android.support.constraint.motion.MotionLayout .../>

Voici un exemple complet de fichier MotionLayout, qui définit la mise en page illustrée dans la figure 1:

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>

Bibliothèque Support

<?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>

Créer une MotionScene:au cours de la précédente MotionLayout exemple, l'attribut app:layoutDescription fait référence à scène de mouvement. Une scène de mouvement est un fichier de ressources XML. Dans son <MotionScene> élément racine, une scène de mouvement contient toutes les descriptions de mouvement pour l'élément la mise en page correspondante. Pour séparer les informations de mise en page des mouvements descriptions, chaque MotionLayout fait référence à un mouvement distinct . Les définitions de la scène de mouvement prévalent sur les définitions similaires. définitions dans le MotionLayout.

Voici un exemple de fichier de scène de mouvement qui décrit l'image de base horizontale mouvement de la figure 1:
```
<?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>
    
```
Remarques :
- <Transition> contient la définition de base du mouvement.
  - motion:constraintSetStart et motion:constraintSetEnd sont des références aux aux extrémités du mouvement. Ces points de terminaison sont définis <ConstraintSet> éléments plus tard dans la scène de mouvement.
  - motion:duration spécifie le nombre de millisecondes. nécessaires pour que le mouvement se termine.
- <OnSwipe> vous permet de créer des commandes tactiles pour le mouvement.
  - motion:touchAnchorId fait référence à la vue que l'utilisateur peut faites glisser et faites glisser.
  - motion:touchAnchorSide signifie que la vue est déplacée depuis le côté droit.
  - motion:dragDirection fait référence à la progression la direction de la traînée. Par exemple : motion:dragDirection="dragRight" indique une progression augmente à mesure que vous faites glisser la vue vers la droite.
- <ConstraintSet> est l'endroit où vous définissez les différentes contraintes qui décrivent votre mouvement. Dans cet exemple, un <ConstraintSet> est défini pour chaque extrémité de votre mouvement. Ces extrémités sont centrées verticalement avec app:layout_constraintTop_toTopOf="parent" et app:layout_constraintBottom_toBottomOf="parent" Horizontalement, les extrémités sont à l'extrême gauche et droite l'écran.
Pour obtenir une analyse plus détaillée des différents éléments d'une scène de mouvement consultez la Exemples de MotionLayout.

Attributs interpolés

Dans un fichier de scène de mouvement, les éléments ConstraintSet peuvent contenir des éléments supplémentaires qui sont interpolés au moment de la transition. En plus de la position et les attributs suivants sont interpolés par MotionLayout:

alpha
visibility
elevation
rotation, rotationX, rotationY
translationX, translationY, translationZ
scaleX, scaleY

Attributs personnalisés

Dans un élément <Constraint>, vous pouvez utiliser l'élément <CustomAttribute> pour spécifier Une transition pour des attributs qui ne sont pas simplement liés à la position ou à View .

<Constraint
    android:id="@+id/button" ...>
    <CustomAttribute
        motion:attributeName="backgroundColor"
        motion:customColorValue="#D81B60"/>
</Constraint>

Un <CustomAttribute> contient deux attributs qui lui sont propres:

motion:attributeName est obligatoire et doit correspondre à un objet avec "getter" et méthodes setter. Les getter et setter doivent correspondre à un modèle spécifique. Pour Par exemple, backgroundColor est accepté, car la vue possède des sous-titres getBackgroundColor() et setBackgroundColor().
L'autre attribut que vous devez fournir est basé sur le type de valeur. Choisir parmi types pris en charge suivants: <ph type="x-smartling-placeholder">
- motion:customColorValue pour les couleurs
- motion:customIntegerValue pour les entiers
- motion:customFloatValue pour les éléments à virgule flottante
- motion:customStringValue pour les chaînes
- motion:customDimension pour les dimensions
- motion:customBoolean pour les valeurs booléennes

Lorsque vous spécifiez un attribut personnalisé, définissez les valeurs des points de terminaison dans les champs fin <ConstraintSet>.

Modifier la couleur d'arrière-plan

Reprenons l'exemple précédent et supposons que vous souhaitiez que les couleurs de la vue changent. dans le cadre de son mouvement, comme illustré dans la figure 2.

</ph> <ph type="x-smartling-placeholder">

</ph> Figure 2. La couleur d'arrière-plan de la vue change à mesure qu'elle se déplace.

Ajoutez un élément <CustomAttribute> à chaque élément ConstraintSet, comme indiqué dans l'extrait de code suivant:

<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>

Attributs MotionLayout supplémentaires

En plus des attributs de l'exemple précédent, MotionLayout possède d'autres attributs attributs que vous pouvez spécifier:

app:applyMotionScene="boolean" indique si la scène de mouvement doit être appliquée. La valeur par défaut de cet attribut est true.
app:showPaths="boolean" indique si les trajectoires d'animation doivent être affichées en tant que est en cours d'exécution. La valeur par défaut de cet attribut est false.
app:progress="float" vous permet de spécifier explicitement la progression de la transition. Toi Vous pouvez utiliser n'importe quelle valeur à virgule flottante de 0 (le début de la transition) à 1 (la fin de la transition).
app:currentState="reference" vous permet de spécifier un ConstraintSet spécifique.
app:motionDebug vous permet d'afficher des informations de débogage supplémentaires concernant du mouvement. Les valeurs possibles sont "SHOW_PROGRESS", "SHOW_PATH" ou "SHOW_ALL".

Ressources supplémentaires

Pour en savoir plus sur MotionLayout, consultez les ressources suivantes: