[Android 9.0 Pie Java] Chat-Listenbildschirm im LINE-Stil → Übergangsanimation für den persönlichen Chat-Bildschirm implementiert (mit Beispiel-App)

Umgebung

Android9.0 Pie Java

Einführung

Gepostet früher, [Android 9.0 Pie Java] Horizontales Wischen → Dialogfeldanzeige → In Chat-App löschen Es wird eine Fortsetzung von sein.

• Wenn Sie auf ein Element in der Chat-Liste drücken, überlappen sich die Fragmente auf dem Chat-Bildschirm, sodass sie von rechts nach links angezeigt werden.
• <Wenn Sie die Taste drücken, verschwindet das Fragment auf dem Chat-Bildschirm von links nach rechts.

Es funktioniert wie das folgende Gif.

URL des fertigen Produkts

Ich lasse es in diesem Artikel weg, weil es eine große Sache wäre, den gesamten Code zu platzieren. Wenn Sie den Chat-Bildschirm mit Dateien wie Layout und Adapter herunterladen und verschieben möchten, klicken Sie bitte hier! https://github.com/yuta-matsumoto/chat

Code

ChatListFragment.java __ "Wenn Sie auf ein Element in der Chat-Liste drücken, überlappen sich die Fragmente des Chat-Bildschirms, sodass sie von rechts nach links angezeigt werden." __ Dies ist der Kern der Implementierung. Nehmen Sie den onItemClick-Teil jedes Elements in der Chat-Liste auf. [Klicken Sie hier für den vollständigen Text von ChatListFragment.java](https://github.com/yuta-matsumoto/chat/blob/ce20f0149be73bcf6370cd7b648a7bdf72a48991/app/src/main/java/com/example/chat/fragments/Chat

ChatListFragment.java

        //Chatlistenadapter
        final ChatListAdapter adapter = new ChatListAdapter(list) {
            @Override
            public void onItemClick(View view, int pos, List<ChatListRowData> list) {
                //Übergeben Sie die Informationen des ausgewählten Benutzers
                ChatFragment fragment = new ChatFragment();
                //Das Bundle ist praktisch, um Daten zwischen Fragmenten zu übertragen
                Bundle args = new Bundle();
                if (args != null) {
                    args.putString("userName", list.get(pos).getName());
                    fragment.setArguments(args);
                }
                //Vorbereitung für den Bildschirmübergang
                FragmentTransaction transaction = getFragmentManager().beginTransaction();
                //Animation von Schichtfragmenten von links nach rechts
                transaction.setCustomAnimations(R.anim.slide_in_left, R.anim.slide_out_right); // (1)
                //Überlagern Sie ChatFragment mit ChatListFragment
                transaction.add(R.id.mainContainer, fragment, "fragment"); // (2)
                //Zum hinteren Stapel hinzufügen
                transaction.addToBackStack(null);
                transaction.commit();
            }
        };

(1) Verwenden Sie Ihre Lieblingsanimation für Bildschirmübergänge zwischen Fragmenten Ich verwende FragmentTransaction.setCustomAnimations. Bereiten Sie die Animationsdefinition unter res mit der folgenden Konfiguration vor und laden Sie sie.

├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) Mit "transaction.add" kann ChatFragment ChatListFragment überlagert werden.

ChatFragment.java __ "Wenn Sie die Taste <drücken, verschwindet das Fragment auf dem Chat-Bildschirm von links nach rechts." __ Dies ist der Kern der Implementierung. Nehmen Sie den onViewCreated-Teil jedes Elements der Chat-Liste auf. [Klicken Sie hier, um den vollständigen Text von ChatFragment.java anzuzeigen.]

ChatFragment.java

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        //···Kürzung

        // <Button Listener
        ImageButton backButton = view.findViewById(R.id.backButton);
        backButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //Vorbereitung für den Bildschirmübergang
                FragmentTransaction transaction = getFragmentManager().beginTransaction();
                //Animation, bei der Fragmente von rechts nach links verschwinden
                transaction.setCustomAnimations(R.anim.slide_in_left, R.anim.slide_out_right); // (1)
                //Entfernen Sie ChatFragment
                transaction.remove(chatFragment); // (2)
                transaction.commit();
            }
        });
    }

(1) Das Gleiche wie die Beschreibung von ChatListFragment ist in Ordnung.

(2) ChatFragment wird mit "transaction.remove" gelöscht.

das ist alles.

Schließlich

Um die Bewegung dieser Animation zu reproduzieren, wird nicht gut entschieden, ob mehrere Aktivitäten verwendet werden. Da die Aktivität selbst sehr umfangreich ist, habe ich die Konfiguration von 1 Aktivität + N Fragment gewählt. Ich habe es kürzlich auf einer tatsächlichen Maschine bauen lassen und bin glücklich, weil es ziemlich cool funktioniert hat! !!