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
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 utiliserMotionLayout
dans votre projet, ajoutez le la dépendanceConstraintLayout
2.0 à l'étatbuild.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 deConstraintLayout
. Vous pouvez donc transformer tout d'unConstraintLayout
existant enMotionLayout
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'attributapp: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, chaqueMotionLayout
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 leMotionLayout
.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
etmotion: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 avecapp:layout_constraintTop_toTopOf="parent"
etapp: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-titresgetBackgroundColor()
etsetBackgroundColor()
.- 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">
- </ph>
motion:customColorValue
pour les couleursmotion:customIntegerValue
pour les entiersmotion:customFloatValue
pour les éléments à virgule flottantemotion:customStringValue
pour les chaînesmotion:customDimension
pour les dimensionsmotion: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 type="x-smartling-placeholder">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 esttrue
.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 estfalse
.app:progress="float"
vous permet de spécifier explicitement la progression de la transition. Toi Vous pouvez utiliser n'importe quelle valeur à virgule flottante de0
(le début de la transition) à1
(la fin de la transition).app:currentState="reference"
vous permet de spécifier unConstraintSet
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:
- Fonctionnalités avancées d'Android en Kotlin 03.2: Animation avec MotionLayout
- Exemples de MotionLayout
- Exemples MotionLayout/ConstraintLayout sur GitHub
- Présentation de MotionLayout (partie I)
- Présentation de MotionLayout (partie II)
- Présentation de MotionLayout (partie III)
- Présentation de MotionLayout (partie IV)