Share
Grâce à sa polyvalence remarquable, le ContrainteLayout Widget est devenu le "couteau suisse" de la mise en page pour les développeurs d'applications Android. Cependant, ajouter des animations complexes à son contenu, bien que possible, peut prendre beaucoup de temps. C’est pourquoi Google a présenté le MotionLayout widget dans I / O 2018.
le MotionLayout widget, qui fait maintenant partie de la bibliothèque de support d'Android, étend la ContrainteLayout widget. C’est un widget unique qui vous permet d’animer son contenu de manière déclarative en utilisant uniquement XML. En outre, il offre un contrôle précis de toutes ses animations..
Dans ce tutoriel, je vais vous montrer comment l'ajouter à vos projets Android Studio et créer quelques animations différentes avec celui-ci..
Pour suivre ce tutoriel, vous aurez besoin de:
Accentsconagua
ContrainteLayout widgetPour pouvoir utiliser le MotionLayout dans votre projet Android Studio, vous devez disposer de la dernière version de la bibliothèque de prise en charge de Constraint Layout en tant que la mise en oeuvre dépendance. De plus, afin d'éviter les conflits de version, assurez-vous d'inclure une dépendance pour la dernière version stable de la bibliothèque de support v7 appcompat.
En conséquence, ajoutez le code suivant à la app modules build.gradle fichier:
implémentation 'com.android.support:appcompat-v7:27.0.2' implémentation 'com.android.support.constraint: constraint-layout: 2.0.0-alpha1'
le MotionLayout widget peut tout faire la ContrainteLayout widget peut. Par conséquent, vous pouvez librement remplacer toute instance de ce dernier par le premier. Pour le moment, cependant, je vous suggère de créer un nouveau fichier XML de mise en page et d’ajouter le fichier. MotionLayout widget comme élément racine.
Tout au long de ce tutoriel, nous animerons une ImageView widget. Alors ajoutez-le comme le premier enfant de la mise en page.
Vous êtes libre d'utiliser n'importe quel drawable comme source du ImageView widget. Dans le code ci-dessus, j'utilise une couleur pouvant être dessinée.
Ensuite, ajoutez un bouton sur lequel vous pouvez appuyer pour lancer les animations. Le code suivant vous montre comment le positionner au centre de la présentation:
De plus, pour surveiller la progression des animations, ajoutez un Barre de recherche widget à la mise en page et placez-le sous le bouton. Voici comment:
Enfin, comme il existe un gestionnaire d'événements sur le clic associé au bouton, assurez-vous de le définir dans votre activité..
fun start (v: View) // Plus de code ici
Vous avez peut-être remarqué que nous n’avons ajouté aucune contrainte à la ImageView widget tout en définissant la mise en page. C'est parce que nous les ajouterons à une scène de mouvement à la place. Une scène de mouvement est un fichier XML contenant des détails sur l'animation que vous souhaitez créer avec un MotionLayout widget.
Pour créer une nouvelle scène de mouvement, créez un fichier de ressources XML et ajoutez un fichier. MotionScene élément.
Une scène de mouvement contient ConstraintSet éléments spécifiant les contraintes à appliquer à un widget en différents points de l'animation. Les fichiers de scène de mouvement contiennent généralement deux ensembles de contraintes: un pour le début de l'animation et un pour la fin..
Le code suivant vous montre comment créer deux ensembles de contraintes qui aideront le MotionLayout widget déplacer le ImageView widget du coin inférieur droit de l’écran au coin supérieur gauche:
Notez que chaque ConstraintSet L'élément doit toujours spécifier à la fois la position souhaitée et la taille souhaitée. Ceci est important car il écrasera toutes les informations de mise en page précédemment définies.
Pour aider le MotionLayout Si le widget comprend l’ordre dans lequel les ensembles de contraintes doivent être appliqués, vous devez ensuite créer un Transition élément. En utilisant son nom intuitif constraintSetStart et constraintSetEnd attributs, vous pouvez spécifier quel ensemble doit être appliqué en premier et lequel en dernier. le Transition L'élément vous permet également de spécifier la durée de l'animation.
À ce stade, la scène de mouvement est terminée. Cependant, le MotionLayout le widget n'est toujours pas au courant. Donc, retournez au fichier XML de mise en page, ajoutez un layoutDescription attribuer au widget et définir sa valeur sur le nom du fichier de scène de mouvement.
Si le nom de votre fichier de scène de mouvement est mon_scene.xml, votre MotionLayout le widget devrait maintenant ressembler à ceci:
…
Lorsque vous exécutez l'application, le MotionLayout Le widget appliquera automatiquement le jeu de contraintes spécifié dans constraintSetStart attribut du Transition élément. Par conséquent, pour lancer l'animation, il vous suffit d'appeler le transitionToFin () méthode du widget. Le code suivant, qui doit être ajouté au gestionnaire d'événements au clic que vous avez créé à une étape précédente, vous montre comment:
motion_container.transitionToEnd ()
À ce stade, si vous exécutez l'application et appuyez sur le bouton, vous devriez pouvoir voir le ImageView widget se déplacer en douceur à travers l'écran.
En attachant un TransitionListener objecter à la MotionLayout widget, vous pouvez surveiller de près l'avancement de l'animation.
motion_container.setTransitionListener (object: MotionLayout.TransitionListener // Plus de code ici)
le TransitionListener l’interface a deux méthodes abstraites et Android Studio générera automatiquement des talons pour celles-ci.
le onTransitionCompleted () La méthode est appelée lorsqu'une transition d'un ensemble de contraintes à un autre est terminée. Pour le moment, utilisons-le pour réinitialiser les contraintes du ImageView widget en appelant le transitionToStart () méthode à l'intérieur.
redéfinit fun onTransitionCompleted (motionLayout: MotionLayout ?, currentId: Int) if (currentId == R.id.ending_set) // Retour à la contrainte d'origine définie set_container.transitionToStart ()
le onTransitionChange () La méthode est appelée chaque fois que la progression de l'animation change. En tant que tel, la progression est un nombre à virgule flottante compris entre zéro et un. Le code suivant vous montre comment mettre à jour le Barre de recherche en fonction de l'avancement de l'animation:
Remplacez fun onTransitionChange (motionLayout: MotionLayout ?, startId: Int, endId: Int, progress: Float) seekbar.progress = ceil (progrès * 100) .toInt ()
Allez-y et lancez l'application à nouveau pour voir deux animations maintenant.
Dans notre animation, le ImageView le widget se déplace dans un chemin qui ressemble à une ligne droite. C'est parce que le MotionLayout Le widget ne dispose que de deux points: le point de départ, situé dans le coin inférieur droit de l’écran, et le point final, dans le coin supérieur gauche de l’écran. Si vous souhaitez modifier la forme du chemin, vous devrez fournir quelques points intermédiaires, situés entre les points de départ et d'arrivée. Pour ce faire, vous devrez créer de nouvelles images clés..
Avant de commencer à créer des images clés, vous devez ajouter un KeyFrameSet élément du Transition élément de votre scène de mouvement. À l'intérieur du nouvel élément, vous êtes libre de créer un nombre illimité d'images clés..
le MotionLayout Le widget prend en charge de nombreux types d’images clés. Dans ce tutoriel, nous ne travaillerons qu'avec deux types: KeyPosition cadres et KeyCycle cadres.
KeyPosition Les cadres sont ceux qui vous aident à modifier la forme du chemin. Lors de leur création, veillez à fournir l'ID du widget cible, une position le long de la timeline, qui peut être un nombre compris entre 0 et 100, et les coordonnées X ou Y souhaitées spécifiées sous forme de pourcentage. Les coordonnées peuvent être relatives aux axes X ou Y réels ou au chemin lui-même..
Le code suivant vous montre comment créer deux images clés qui forcent le ImageView widget pour suivre un chemin évitant les collisions avec le bouton et la barre de recherche:
Si vous exécutez l'application maintenant, vous devriez voir une animation qui ressemble à ceci:
Vous êtes bien entendu libre d'ajouter plus d'images clés. Par exemple, en ajoutant l’image clé suivante à la fin du montage, vous pouvez modifier le ImageView Widget suivre un chemin plus ondulé:
En utilisant un KeyCycle cadre avec le KeyPosition images, vous pouvez ajouter des oscillations à l'animation. Lors de la création de celui-ci, vous devez à nouveau fournir l'ID du widget cible, une position le long de la timeline et la valeur souhaitée de la propriété devant osciller. De plus, vous devez configurer un oscillateur en fournissant des détails tels que la forme d'onde à utiliser et la période d'onde..
Le code suivant crée un KeyCycle cadre qui utilise un oscillateur sinusoïdal pour faire tourner périodiquement le ImageView widget de 50 degrés:
Lors de l'exécution de l'application à nouveau, vous devriez voir une animation qui ressemble à ceci:
Pendant tout ce temps, vous avez appuyé sur un bouton pour lancer l'animation. Un tel bouton, cependant, n’est pas toujours nécessaire car le MotionLayout widget vous permet d’attacher directement des gestionnaires d’événements tactiles aux widgets animés. Actuellement, il prend en charge les événements sur clic et sur balayage.
Par exemple, vous pouvez ajouter ce qui suit Sur clic élément, qui cible le ImageView widget, à l'intérieur du Transition élément de votre scène de mouvement pour rendre le bouton redondant:
De même, vous pouvez utiliser un OnSwipe élément permettant à l'utilisateur de faire glisser manuellement le ImageView widget à travers l'écran. Lors de la création de l'élément, vous devez vous assurer que vous indiquez la bonne direction de glissement et le côté du widget devant servir de poignée de glissement..
Si vous exécutez à nouveau l'application, vous devriez maintenant pouvoir faire glisser le ImageView widget.
Vous savez maintenant comment utiliser le MotionLayout widget pour ajouter rapidement des animations complexes et interactives à vos applications Android. Vous pouvez être sûr que les animations s'exécuteront sans retard ni instabilité sur la plupart des appareils, à condition d'éviter les vues imbriquées..
Il est à noter que les prochaines versions d'Android Studio incluront un éditeur visuel de mouvement, susceptible d'améliorer encore la convivialité du widget..
Pour en savoir plus, consultez la documentation officielle.
