Material Design Motion pour Android

L’une des principales caractéristiques de Material Design est la transition des éléments et des composants pour exprimer les relations entre eux ou les résultats et la disponibilité des actions.

Depuis la version 1.2.0-alpha05, Composants matériels pour la bibliothèque Android a incorporé Transitions et Motion. Il s’agit d’un ensemble de classes facile à utiliser pour implémenter différents types de transitions et d’animations personnalisables. Ils utilisent android.transition bibliothèque à cette version, mais ils utiliseront androidx.transition A l’avenir.

Il existe différents modèles de transition qui comprenaient le système de mouvement Material Design pour la transition entre les composants ou les vues plein écran.

Ce qui est vraiment important, c’est de choisir le modèle de transition approprié pour chaque cas d’utilisation.

Les schémas de transition sont les suivants:

• Transformation de conteneur: elle est utilisée dans les transitions qui impliquent un élément persistant comme une liste, une surface de carte ou un bouton.
• Axe partagé: il est utilisé pour les transitions entre les éléments de l’interface utilisateur qui ont une relation spatiale ou de navigation.
• Fondu progressif: lorsqu’une relation entre des éléments est insignifiante ou n’existe pas.
• Fondu: il est appliqué dans les éléments de l’interface utilisateur qui doivent entrer ou sortir de l’écran.

Récemment, j’ai travaillé sur quelques exemples qui utilisent le système de mouvement Material Design.

implementation 'com.google.android.material:material:1.2.0-alpha06'

Ce modèle est utilisé pour créer une connexion visible entre deux éléments d’interface utilisateur. Il transforme un élément en un autre. Il s’agit d’un modèle UX commun pour exprimer qu’un élément est lié à un autre en tant que conteneur de détail d’élément. Par exemple, si un élément de carte dans une liste se transforme en vue détaillée, l’utilisateur perçoit que la page de détail est une version étendue de la carte.

Cela pourrait également être utilisé comme transformation d’un bouton FAB en menu ou en feuille.

Cette transition peut être appliquée entre des activités, des fragments ou des vues, selon que l’on souhaite transformer une vue d’une activité ou d’un fragment en une autre activité, fragment ou vue.

Cette transformation est entièrement personnalisable en spécifiant différentes valeurs pour les propriétés qui affectent la transition.

Définit la durée de cette transition en millisecondes.

Définit l’interpolateur de cette transition. Nous pouvons spécifier un interpolateur comme FastOutSlowIn ou personnalisé en utilisant PathInterpolator pour une courbe de Bézier cubique.

Définit le mode de fondu à utiliser pour basculer le contenu de la vue de début avec celui de la vue de fin. Il existe quatre modes de fondu:

– FADE_MODE_IN: Fondu du contenu entrant sans modifier l’opacité du contenu sortant. Il s’agit du mode par défaut.

– FADE_MODE_OUT: Fondu du contenu sortant sans modifier l’opacité du contenu entrant.

– FADE_MODE_CROSS: Fondu enchaîné du contenu entrant et sortant.

– FADE_MODE_THROUGH: Fondu séquentiel du contenu sortant et fondu du contenu entrant.

Il y a trois options:

– FIT_MODE_HEIGHT: Ajustez le contenu entrant à la hauteur du contenu sortant pendant l’animation d’échelle.

– FIT_MODE_WIDTH: Ajustez le contenu entrant à la largeur du contenu sortant pendant l’animation d’échelle.

– FIT_MODE_AUTO: Utilisez FIT_MODE_HEIGHT ou FIT_MODE_WIDTH automatiquement.

Définit la couleur d’arrière-plan du conteneur de morphing. Cette couleur est dessinée sous les vues de début et de fin. Ceci est très utile lorsque l’un ou les deux n’ont pas d’arrière-plan de couleur unie. Cela peut également être utilisé pour définir la couleur de transition afin d’améliorer la transformation d’une vue à une autre.

Définit la couleur à dessiner sous le conteneur de morphing dans les limites de la vue de dessin.

La vue de dessin est la vue à laquelle la transition se chevauchera. Cette vue de dessin peut être spécifiée à l’aide du setDrawingViewId() une fonction.