Share
La structure de transitions Android vous permet de configurer l'apparition de modifications dans l'interface utilisateur de votre application. Vous pouvez animer les modifications dans l'écran d'une application, en définissant chaque phase comme une scène et en contrôlant la manière dont la transition modifie l'apparence de l'application d'une scène à l'autre..
Dans ce tutoriel, nous allons construire une application simple avec une transition animée. Cela impliquera de préparer la mise en page et les fichiers pouvant être dessinés en XML, puis de configurer et d'appliquer la transition en Java. Nous définirons deux scènes dans lesquelles les mêmes éléments de vue sont disposés différemment à l'écran. Comme nous utilisons une transition, Android animera automatiquement le changement d'une scène à l'autre..
Commencez par créer une nouvelle application dans l'EDI choisi. Vous devez disposer d’un minimum de 19 kits SDK pour les classes de transition. Par conséquent, vous devrez prendre des mesures supplémentaires si vous envisagez de prendre en charge des versions plus anciennes..
Donner à l'application un principal Activité et fichier de mise en page, en choisissant le nom start_layout.xml pour la mise en page. Nous ajouterons un autre fichier de mise en page ultérieurement, en utilisant la transition pour passer de l’un à l’autre. Les images suivantes montrent le processus dans Android Studio.
Préparons maintenant quelques formes dessinables à utiliser dans la transition. Nous allons utiliser quatre formes de cercle avec des dégradés de couleurs différentes. Dans le répertoire des ressources disponibles de votre application, commencez par créer un nouveau fichier nommé forme1.xml. Entrez la forme suivante:
La forme est un cercle avec un dégradé radial. Les quatre formes seront identiques, à l'exception des couleurs utilisées. Vous souhaiterez peut-être créer différentes versions des dessinables pour différentes densités de périphériques. Ajouter forme2.xml suivant:
Maintenant, ajoutez forme3.xml:
Enfin ajouter forme4.xml:
Nous allons utiliser ces formes comme Boutons Image dans les deux scènes de mise en page.
Définissons les deux scènes dans lesquelles nous allons passer en tant que dispositions XML. Commencez par le fichier de présentation principal que vous avez ajouté lors de la création de l'application, start_layout.xml. Ouvrez-le et passez à l'onglet d'édition XML. Utiliser un Disposition relative comme indiqué ci-dessous:
Nous ajoutons une couleur de fond et un identifiant pour la mise en page. L'ID est essentiel pour garantir la transition d'Android entre vos scènes. Nous utiliserons le même ID dans la deuxième scène. Lorsque vous effectuez une transition entre deux scènes, Android animera les modifications tant que chaque vue aura le même identifiant dans les deux scènes, sinon elle traitera les vues comme différentes et les fera simplement fondre à l’écran lorsque la transition aura lieu.
À l'intérieur de Disposition relative, ajouter un ImageButton pour chaque forme que nous avons créée:
Notez que chaque bouton de forme a un identifiant, qui sera le même dans la deuxième mise en page créée, et un sur clic attribut. Nous allons inclure cette méthode dans le menu principal. Activité plus tard et va commencer la transition lorsque l'utilisateur clique sur l'une des formes.
Vous verrez un aperçu de la disposition dans votre IDE, bien que dans certains cas, le dégradé et / ou la transparence ne soient pas affichés tant que vous n'avez pas exécuté l'application sur un périphérique ou l'émulateur. Les formes sont disposées de manière à s’asseoir dans chaque coin de l’écran, comme indiqué ci-dessous..
La première mise en page que nous avons créée représentera le début de la transition. Créons maintenant un deuxième fichier de mise en page pour la scène dans laquelle la transition sera modifiée. Ajoutez un nouveau fichier dans le répertoire des ressources de présentation de votre application, en le nommant. end_layout.xml. Passez à l'onglet d'édition de texte et entrez les informations suivantes:
Prenez un moment pour regarder le code de mise en page. Il est identique à la première mise en page à l'exception des positions des boutons de forme. Chaque forme est dans le coin opposé de sa position dans la première mise en page. La transition va donc permuter les formes en déplaçant leurs positions en diagonale sur l'écran.
Nous avons les deux dispositions définies, utilisons maintenant une transition pour passer d’une structure à l’autre. Ouvrez la fenêtre principale de votre application Activité classe. Vous aurez besoin des déclarations d'importation suivantes:
importer android.transition.AutoTransition; importer android.transition.Scene; importer android.transition.Transition; importer android.view.View; importer android.view.ViewGroup; importer android.view.animation.AccelerateDecelerateInterpolator; importer android.widget.RelativeLayout; importer android.transition.TransitionManager;
À l'intérieur de Activité déclaration de classe, avant la onCreate méthode, ajoutez les variables d'instance suivantes que nous utiliserons pour appliquer la transition:
// scènes de transition privées Scene scene1, scene2; // transition pour passer d'une scène à une autre privée transition de transition; // drapeau à permuter entre les scènes private boolean start;
Préparons maintenant la transition, qui commencera lorsque l'utilisateur cliquera sur une forme. Dans onCreate, Une fois le code existant entré par votre IDE, ajoutez ce qui suit:
// récupère l'ID de présentation RelativeLayout baseLayout = (RelativeLayout) findViewById (R.id.base); // première scène ViewGroup startViews = (ViewGroup) getLayoutInflater () .inflate (R.layout.start_layout, baseLayout, false); // deuxième scène ViewGroup endViews = (ViewGroup) getLayoutInflater () .inflate (R.layout.end_layout, baseLayout, false);
Nous définissons d’abord la scène de base, c’est-à-dire l’ID que nous avons donné à la disposition contenant dans les deux fichiers de disposition de scène. Nous définissons ensuite les deux scènes entre lesquelles nous effectuons la transition, en spécifiant leurs noms de fichier de mise en page et la scène de base qui les contient. Cela indiquera à Android que nous souhaitons faire la transition des vues dans les deux scènes, en traitant chaque vue avec le même identifiant dans les deux scènes comme étant le même objet, de sorte qu'il anime le changement d'une scène à l'autre.
Ensuite, nous définissons les deux scènes entre lesquelles nous souhaitons passer, toujours en onCreate:
// crée les deux scènes scene1 = new Scene (baseLayout, startViews); scene2 = nouvelle scène (baseLayout, endViews);
Nous transmettons la mise en page de base et les mises en page pertinentes à chaque constructeur. Maintenant, nous pouvons nous référer à ces scènes lors de la définition de la transition.
Préparons la transition, toujours en cours onCreate:
// créer une transition, définir les propriétés transition = new AutoTransition (); transition.setDuration (5000); transition.setInterpolator (new AccelerateDecelerateInterpolator ()); // initialize flag start = true;
Android fournit une gamme de types de transition en fonction de la manière dont vous souhaitez animer les modifications apportées à vos scènes. Dans ce cas, nous choisissons un AutoTransition, alors Android calculera comment effectuer le changement en fonction des propriétés modifiées entre les scènes. Voir la référence Transitions pour plus d'options.
Nous définissons une durée et un interpolateur pour la transition. Vous pouvez également éventuellement définir un délai de démarrage pour la modification. Enfin, nous initialisons le drapeau booléen à true. Pour plus de simplicité, nous allons utiliser ceci pour permuter les deux scènes chaque fois que l'utilisateur clique sur une forme, mais ceci ne sert qu'à montrer la fonctionnalité impliquée..
Rappelez-vous que nous avons ajouté un sur clic attribuer aux boutons de forme lorsque nous avons créé la mise en page XML. Ajoutons cette méthode à la Activité à présent:
public void changeScene (Affichage v) // Indicateur de contrôle if (début) TransitionManager.go (scene2, transition); début = faux; else TransitionManager.go (scene1, transition); début = vrai;
Nous utilisons le TransitionManager pour passer de la scène actuelle à l’autre, avec le drapeau booléen indiquant lequel nous sommes. Nous spécifions le Transition objet que nous avons créé pour adapter le déroulement du changement.
Vous devriez maintenant pouvoir exécuter votre application et voir la transition chaque fois que vous cliquez sur une forme. Chaque fois que vous cliquez, la transition doit déplacer les formes lentement vers les coins opposés, puis les échanger lorsque vous cliquez à nouveau..
Dans ce didacticiel, nous n’avons vraiment que commencé à explorer ce que vous pouvez faire avec le cadre de transitions Android. Pour développer vos transitions, consultez les méthodes supplémentaires dans la TransitionManager classe, comme beginDelayedTransition et Transition vers. Vous pouvez également utiliser un TransitionSet pour combiner plusieurs transitions, par exemple, pour configurer des effets de fondu et de déplacement. En fonction de la complexité de vos transitions, vous pouvez également bénéficier de la Valeurs de transition classe, qui fournit une référence aux valeurs de données pertinentes pour la transition. Pour plus d’informations sur ce que vous pouvez faire avec les scènes, consultez le Scène classe aussi bien.
Accentsconagua