Exemples d’animation de transition d’activité Android en Kotlin

Pour créer une application moderne, vous pouvez utiliser des animations de transition dans votre activité. L'Android Framework permet d'induire des transitions animées élégantes lorsque vous ouvrez ou quittez une activité. Dans cet article, nous allons voir comment inclure de telles transitions.

Exemple 1 : Kotlin Android - Transitions d'activité sans aucune bibliothèque

Voyons un exemple de la façon de créer des transitions animées sans utiliser de bibliothèque tierce.

Étape 1 : Dépendances

Aucune dépendance de tierce partie n'est nécessaire.

Step 2 : Animations

L'étape suivante consiste à écrire ces animations en XML et à les inclure dans un répertoire de ressources nommé anim. Si un tel répertoire n'existe pas dans votre application, créez-le.

Après avoir créé le répertoire anim, nous allons y ajouter les fichiers d'animation suivants :

slide_down.xml

Puis nous ajoutons le code suivant :

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="50"
        android:fromYDelta="0%p"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toYDelta="100%p" />

</set>

slide_in_left.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="-100%p" android:toXDelta="0"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

slide_in_right.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%p" android:toXDelta="0"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

slide_out_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="-100%p"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

slide_out_right.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="100%p"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

slide_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="100"
        android:fromYDelta="100%"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toXDelta="0" />

</set>

Étape 3 : Styles

Dans la troisième étape, nous devons réellement appliquer les animations aux activités. Cependant, ceci est fait de manière déclarative au niveau du thème par opposition au niveau de l'activité.

Donc, dans le fichier styles.xml, créez un style comme suit :

    <style name="CustomActivityAnimation" parent="@android:style/Animation.Activity">
        <item name="android:activityOpenEnterAnimation">@anim/slide_in_right</item>
        <item name="android:activityOpenExitAnimation">@anim/slide_out_left</item>
        <item name="android:activityCloseEnterAnimation">@anim/slide_in_left</item>
        <item name="android:activityCloseExitAnimation">@anim/slide_out_right</item>
    </style>

Ensuite, appliquez-le au thème comme suit :

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowAnimationStyle">@style/CustomActivityAnimation</item>
    </style>

Voici le fichier styles.xml complet :

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowAnimationStyle">@style/CustomActivityAnimation</item>
    </style>

    <style name="CustomActivityAnimation" parent="@android:style/Animation.Activity">
        <item name="android:activityOpenEnterAnimation">@anim/slide_in_right</item>
        <item name="android:activityOpenExitAnimation">@anim/slide_out_left</item>
        <item name="android:activityCloseEnterAnimation">@anim/slide_in_left</item>
        <item name="android:activityCloseExitAnimation">@anim/slide_out_right</item>
    </style>

</resources>

Étape 4 : Activités

Nous aurons trois activités :

1. ActivitéA
2. ActivitéB
3. ActivitéC

ActivitéA.kt

package info.camposha.activity_transitions

import android.content.Intent
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity

class ActivityA : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_a)
    }

    fun intentB(view: View?) {
        startActivity(Intent(this, ActivityB::class.java))
    }

    fun intentC(view: View?) {
        startActivity(Intent(this, ActivityC::class.java))
    }
}

ActivitéB

package info.camposha.activity_transitions

import android.content.Intent
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity

class ActivityB : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_b)
    }

    fun intentC(view: View?) {
        startActivity(Intent(this, ActivityC::class.java))
    }

    fun intentA(view: View?) {
        startActivity(Intent(this, ActivityA::class.java))
    }
}

ActivitéC

package info.camposha.activity_transitions

import android.content.Intent
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity

class ActivityC : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_c)
    }

    fun intentA(view: View?) {
        startActivity(Intent(this, ActivityA::class.java))
    }

    fun intentB(view: View?) {
        startActivity(Intent(this, ActivityB::class.java))
    }
}

C'est tout le code kotlin que nous écrivons.

Step 5 : Layouts

Retrouvez les codes de mise en page dans le téléchargement du code source.

Étape 6 : Exécution

Exécutez le projet et vous obtiendrez ce qui suit :

Étape 7 : Télécharger

Téléchargez le code source à partir de [ici] (https://github.com/Oclemy/ActivityTransitions/archive/refs/heads/master.zip).

Exemples avec bibliothèques

Pour rendre votre application plus moderne, vous pouvez inclure des animations de transition entre les activités. Il y a plusieurs façons de le faire et nous allons les examiner dans cet article.

(a). Utiliser la bibliothèque d'animations Intent

Cette bibliothèque est aussi simple que possible. Vous pouvez facilement inclure différents types d'animations dans vos activités.

Étape 1 : Installation

Commencez par installer la bibliothèque. Elle est hébergée dans jitpack :

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

`

Ensuite, ajoutez la déclaration d'implémentation comme une dépendance :

implementation 'com.github.hajiyevelnur92:intentanimation:1.0'

Étape 2 : Code

Voici le code :

import static maes.tech.intentanim.CustomIntent.customType;
//MainActivity or any activity name
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //.....//

        //here is library
        customType(MainActivity.this,"here is animation name");
}
   //Here are the animations
*left-to-right
*right-to-left
*bottom-to-up
*up-to-bottom
*fadein-to-fadeout
*rotateout-to-rotatein

Liens

Télécharger le code complet ici.

(b). Transitions avec Bungee

Bungee est une bibliothèque Android légère pour des animations de transition d'activité sympas.

Cette solution prend en charge un SDK minimum de 16 (Android Jellybean 4.1).

Bungee dispose de 15 animations de transition d'activité différentes :

• diviser
• rétrécir
• carte
• entrée et sortie
• glisser vers la gauche
• glisser vers la droite
• glisser vers le haut
• glisser vers le bas
• glisser vers la gauche
• glisser vers la droite
• zoom
• fondu
• rotation
• diagonal
• moulin à vent

Vous pouvez télécharger l'application de démonstration [ici] (https://play.google.com/store/apps/details?id=com.spencerstudios.bungeelibrarydemo) pour la voir en action.

Étape 1 : Installation

Pour l'installer, commencez par enregistrer jitpack comme url de dépôt maven dans le build.gradle de votre dossier projet :

allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

Ensuite, dans le build.gradle de votre dossier d'application, déclarez la dépendance comme une déclaration d'implémentation :

dependencies {
            implementation 'com.github.Binary-Finery:Bungee:3.0'
    }

Étape 2 : écrire du code

Une seule ligne de code est nécessaire pour utiliser Bungee. Par exemple dans ce cas, une animation de zoom est déclenchée :

startActivity(new Intent(context, TargetActivity.class));
Bungee.zoom(context);  //fire the zoom animation

Ou disons que vous voulez déclencher l'animation lorsque le bouton retour est pressé :

@Override
public void onBackPressed(){
  super.onBackPressed();
  Bungee.slideLeft(context); //fire the slide left animation
}

Voici toutes les méthodes disponibles :

Bungee.split(context);
Bungee.shrink(content);
Bungee.card(context);
Bungee.inAndOut(context);
Bungee.swipeLeft(context);
Bungee.swiperRight(context);
Bungee.slideLeft(context);
Bungee.slideRight(context);
Bungee.slideDown(context);
Bungee.slideUp(context);
Bungee.fade(context);
Bungee.zoom(context);
Bungee.windmill(context);
Bungee.diagonal(context);
Bungee.spin(context);

Exécuter

Exécutez le projet.

Référence

Voici les liens de référence :

---