[Android 9.0 Pie Java] Écran de liste de discussion de style LINE → Animation de transition de l'écran de discussion personnelle implémentée (avec exemple d'application)

environnement

Android9.0 Pie Java

introduction

Publié plus tôt, [Android 9.0 Pie Java] Balayage horizontal → Affichage de la boîte de dialogue → Supprimer dans l'application de chat Ce sera une continuation de.

• Lorsque vous appuyez sur un élément de la liste de discussion, les fragments sur l'écran de discussion se chevauchent de sorte qu'ils couvrent de droite à gauche.
• <Lorsque vous appuyez sur le bouton, le fragment de l'écran de discussion disparaît de gauche à droite.

Cela fonctionne comme le Gif suivant.

URL du produit fini

Je l'omets dans cet article car ce serait un gros problème de mettre tout le code. Si vous souhaitez télécharger et déplacer l'écran de discussion, y compris des fichiers tels que la mise en page et l'adaptateur, veuillez cliquer ici! https://github.com/yuta-matsumoto/chat

code

ChatListFragment.java __ "Lorsque vous appuyez sur un élément de la liste de discussion, les fragments de l'écran de discussion se chevauchent de sorte qu'ils couvrent de droite à gauche." __ C'est la partie centrale de l'implémentation. Prenez la partie onItemClick de chaque élément de la liste de discussion. Cliquez ici pour le texte intégral de ChatListFragment.java

ChatListFragment.java

        //Adaptateur de liste de discussion
        final ChatListAdapter adapter = new ChatListAdapter(list) {
            @Override
            public void onItemClick(View view, int pos, List<ChatListRowData> list) {
                //Transmettre les informations de l'utilisateur sélectionné
                ChatFragment fragment = new ChatFragment();
                //Le bundle est pratique pour transmettre des données entre les fragments
                Bundle args = new Bundle();
                if (args != null) {
                    args.putString("userName", list.get(pos).getName());
                    fragment.setArguments(args);
                }
                //Préparation de la transition d'écran
                FragmentTransaction transaction = getFragmentManager().beginTransaction();
                //Animation de couches de fragments de gauche à droite
                transaction.setCustomAnimations(R.anim.slide_in_left, R.anim.slide_out_right); // (1)
                //Superposer ChatFragment au-dessus de ChatListFragment
                transaction.add(R.id.mainContainer, fragment, "fragment"); // (2)
                //Ajouter à la pile arrière
                transaction.addToBackStack(null);
                transaction.commit();
            }
        };

(1) Pour utiliser votre animation préférée pour les transitions d'écran entre les fragments J'utilise FragmentTransaction.setCustomAnimations. Préparez et chargez la définition d'animation sous res avec la configuration suivante.

├res/ 　　├anim/ 　　　　├slide_in_left.xml 　　　　└slide_out_right.xml

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"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="1.0"
        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"/>
    <alpha android:fromAlpha="1.0" android:toAlpha="1.0"
        android:duration="@android:integer/config_mediumAnimTime" />
</set>

(2) En utilisant transaction.add, ChatFragment peut être superposé sur ChatListFragment.

ChatFragment.java __ "Lorsque vous appuyez sur le bouton <, le fragment de l'écran de discussion disparaît de gauche à droite" __ C'est la partie centrale de l'implémentation. Prenez la partie onViewCreated de chaque élément de la liste de discussion. [Cliquez ici pour le texte intégral de ChatFragment.java](https://github.com/yuta-matsumoto/chat/blob/ce20f0149be73bcf6370cd7b648a7bdf72a48991/app/src/main/java/com/example/chat/fragments/ChatFragment.java

ChatFragment.java

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        //···réduction

        // <Écouteur de bouton
        ImageButton backButton = view.findViewById(R.id.backButton);
        backButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //Préparation de la transition d'écran
                FragmentTransaction transaction = getFragmentManager().beginTransaction();
                //Animation où les fragments disparaissent de droite à gauche
                transaction.setCustomAnimations(R.anim.slide_in_left, R.anim.slide_out_right); // (1)
                //Supprimer ChatFragment
                transaction.remove(chatFragment); // (2)
                transaction.commit();
            }
        });
    }

(1) La même chose que la description de ChatListFragment est OK.

(2) ChatFragment est supprimé en utilisant transaction.remove.

c'est tout.

finalement

Afin de reproduire le mouvement de cette animation, il n'est pas bien décidé si plusieurs activités sont utilisées. Comme l'activité elle-même est lourde, j'ai choisi la configuration 1 Activity + N Fragment. Je l'ai récemment fait construire sur une machine réelle, et je suis content parce que cela a fonctionné plutôt bien! !!