Comment animer l'ajout ou la suppression de lignes ListView Android

Dans iOS, il existe une fonction très simple et puissante pour animer l'ajout et la suppression de lignes UITableView, voici un extrait d'une vidéo youtube montrant l'animation par défaut. Notez comment les lignes environnantes se replient sur la ligne supprimée. Cette animation aide les utilisateurs à suivre ce qui a changé dans une liste et où dans la liste ils regardaient quand les données ont changé.

Depuis que je développe sur Android, je n'ai trouvé aucune facilité équivalente pour animer des lignes individuelles dans une TableView . En appelant notifyDataSetChanged()mon adaptateur, ListView met immédiatement à jour son contenu avec de nouvelles informations. Je voudrais montrer une animation simple d'une nouvelle ligne poussant ou glissant lorsque les données changent, mais je ne trouve aucun moyen documenté de le faire. Il semble que LayoutAnimationController puisse détenir une clé pour que cela fonctionne, mais lorsque je définis un LayoutAnimationController sur ma ListView (similaire à LayoutAnimation2 d'ApiDemo ) et que je supprime des éléments de mon adaptateur après l'affichage de la liste, les éléments disparaissent immédiatement au lieu d'être animés. .

J'ai également essayé des choses comme les suivantes pour animer un élément individuel lorsqu'il est supprimé:

@Override
protected void onListItemClick(ListView l, View v, final int position, long id) {
    Animation animation = new ScaleAnimation(1, 1, 1, 0);
    animation.setDuration(100);
    getListView().getChildAt(position).startAnimation(animation);
    l.postDelayed(new Runnable() {
        public void run() {
            mStringList.remove(position);
            mAdapter.notifyDataSetChanged();
        }
    }, 100);
}

Cependant, les lignes entourant la ligne animée ne bougent pas jusqu'à ce qu'elles sautent à leur nouvelle position lors de l' notifyDataSetChanged()appel. Il semble que ListView ne met pas à jour sa disposition une fois ses éléments placés.

Bien que l'écriture de ma propre implémentation / fork de ListView me soit venue à l'esprit, cela semble être quelque chose qui ne devrait pas être si difficile.

Merci!

Animation anim = AnimationUtils.loadAnimation(
                     GoTransitApp.this, android.R.anim.slide_out_right
                 );
anim.setDuration(500);
listView.getChildAt(index).startAnimation(anim );

new Handler().postDelayed(new Runnable() {

    public void run() {

        FavouritesManager.getInstance().remove(
            FavouritesManager.getInstance().getTripManagerAtIndex(index)
        );
        populateList();
        adapter.notifyDataSetChanged();

    }

}, anim.getDuration());

pour une animation de haut en bas:

<set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate android:fromYDelta="20%p" android:toYDelta="-20"
            android:duration="@android:integer/config_mediumAnimTime"/>
        <alpha android:fromAlpha="0.0" android:toAlpha="1.0"
            android:duration="@android:integer/config_mediumAnimTime" />
</set>

Le RecyclerViewprend en charge l'ajout, la suppression et la réorganisation des animations!

Ce projet AndroidStudio simple comprend RecyclerView: jetez un œil aux commits :

1. validation de l'application Android Hello World classique
2. commit, ajout d'une RecyclerView au projet (contenu non dynamique)
3. validation, ajout de fonctionnalités pour modifier le contenu de RecyclerView lors de l'exécution (mais pas d'animations)
4. et enfin ... valider l'ajout d'animations à RecyclerView

Jetez un œil à la solution Google. Voici une méthode de suppression uniquement.

Code de projet ListViewRemovalAnimation et démonstration vidéo

Il a besoin d'Android 4.1+ (API 16). Mais nous avons 2014 à l'extérieur.

Étant donné qu'ils ListViewssont hautement optimisés, je pense que ce n'est pas possible de répondre. Avez-vous essayé de créer votre "ListView" par code (c'est-à-dire en gonflant vos lignes de xml et en les ajoutant à a LinearLayout) et en les animant?

Avez-vous pensé à animer un balayage vers la droite? Vous pouvez faire quelque chose comme dessiner une barre blanche progressivement plus grande en haut de l'élément de liste, puis la supprimer de la liste. Les autres cellules continueraient à se mettre en place, mais ce serait mieux que rien.

appelez listView.scheduleLayoutAnimation (); avant de changer la liste

J'ai piraté ensemble une autre façon de le faire sans avoir à manipuler la vue de liste. Malheureusement, les animations Android régulières semblent manipuler le contenu de la ligne, mais ne permettent pas de réduire la vue. Alors, considérez d'abord ce gestionnaire:

private Handler handler = new Handler() {
@Override
public void handleMessage(Message message) {
    Bundle bundle = message.getData();

    View view = listView.getChildAt(bundle.getInt("viewPosition") - 
        listView.getFirstVisiblePosition());

    int heightToSet;
    if(!bundle.containsKey("viewHeight")) {
        Rect rect = new Rect();
        view.getDrawingRect(rect);
        heightToSet = rect.height() - 1;
    } else {
        heightToSet = bundle.getInt("viewHeight");
    }

    setViewHeight(view, heightToSet);

    if(heightToSet == 1)
        return;

    Message nextMessage = obtainMessage();
    bundle.putInt("viewHeight", (heightToSet - 5 > 0) ? heightToSet - 5 : 1);
    nextMessage.setData(bundle);
    sendMessage(nextMessage);
}

Ajoutez cette collection à votre adaptateur de liste:

private Collection<Integer> disabledViews = new ArrayList<Integer>();

et ajouter

public boolean isEnabled(int position) {
   return !disabledViews.contains(position);
}

Ensuite, où que vous souhaitiez masquer une ligne, ajoutez ceci:

Message message = handler.obtainMessage();
Bundle bundle = new Bundle();
bundle.putInt("viewPosition", listView.getPositionForView(view));
message.setData(bundle);
handler.sendMessage(message);    
disabledViews.add(listView.getPositionForView(view));

C'est tout! Vous pouvez modifier la vitesse de l'animation en modifiant le nombre de pixels dont elle réduit la hauteur à la fois. Pas vraiment sophistiqué, mais ça marche!

Après avoir inséré une nouvelle ligne dans ListView, je fais simplement défiler ListView vers une nouvelle position.

ListView.smoothScrollToPosition(position);

Je ne l'ai pas essayé, mais il semble que animateLayoutChanges devrait faire ce que vous recherchez. Je le vois dans la classe ImageSwitcher, je suppose que c'est aussi dans la classe ViewSwitcher?

Comme Android est open source, vous n'avez pas réellement besoin de réimplémenter les optimisations de ListView. Vous pouvez récupérer le code de ListView et essayer de trouver un moyen de pirater l'animation, vous pouvez également ouvrir une demande de fonctionnalité dans le suivi des bogues Android (et si vous avez décidé de l'implémenter, n'oubliez pas de contribuer un correctif ).

Pour info, le code source de ListView est ici .

Voici le code source pour vous permettre de supprimer des lignes et de les réorganiser.

Un fichier APK de démonstration est également disponible. La suppression des lignes se fait plus dans le sens de l'application Gmail de Google qui révèle une vue de dessous après avoir glissé une vue de dessus. La vue inférieure peut avoir un bouton Annuler ou tout ce que vous voulez.

Comme je l'avais expliqué dans mon site, j'ai partagé le lien. Quoi qu'il en soit, l'idée est de créer des bitmaps par getdrawingcache.

Veuillez consulter le code suivant:

listView.setOnItemClickListener(new AdapterView.OnItemClickListener()
    {
        public void onItemClick(AdapterView<?> parent, View rowView, int positon, long id)
        {
            listView.setDrawingCacheEnabled(true);
            //listView.buildDrawingCache(true);
            bitmap = listView.getDrawingCache();
            myBitmap1 = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), rowView.getBottom());
            myBitmap2 = Bitmap.createBitmap(bitmap, 0, rowView.getBottom(), bitmap.getWidth(), bitmap.getHeight() - myBitmap1.getHeight());
            listView.setDrawingCacheEnabled(false);
            imgView1.setBackgroundDrawable(new BitmapDrawable(getResources(), myBitmap1));
            imgView2.setBackgroundDrawable(new BitmapDrawable(getResources(), myBitmap2));
            imgView1.setVisibility(View.VISIBLE);
            imgView2.setVisibility(View.VISIBLE);
            RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
            lp.setMargins(0, rowView.getBottom(), 0, 0);
            imgView2.setLayoutParams(lp);
            TranslateAnimation transanim = new TranslateAnimation(0, 0, 0, -rowView.getHeight());
            transanim.setDuration(400);
            transanim.setAnimationListener(new Animation.AnimationListener()
            {
                public void onAnimationStart(Animation animation)
                {
                }

                public void onAnimationRepeat(Animation animation)
                {
                }

                public void onAnimationEnd(Animation animation)
                {
                    imgView1.setVisibility(View.GONE);
                    imgView2.setVisibility(View.GONE);
                }
            });
            array.remove(positon);
            adapter.notifyDataSetChanged();
            imgView2.startAnimation(transanim);
        }
    });

Pour comprendre les images, voir ceci

Merci.

J'ai fait quelque chose de similaire à cela. Une approche consiste à interpoler sur la durée de l'animation la hauteur de la vue dans le temps à l'intérieur des lignes onMeasurelors de l'émission requestLayout()pour listView. Oui, il peut être préférable de le faire directement dans le code listView mais c'était une solution rapide (qui avait l'air bien!)

Partageons simplement une autre approche:

Définissez d' abord l' androïde de la vue de liste : animateLayoutChanges sur true :

<ListView
        android:id="@+id/items_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:animateLayoutChanges="true"/>

Ensuite, j'utilise un gestionnaire pour ajouter des éléments et mettre à jour la vue de liste avec retard:

Handler mHandler = new Handler();
    //delay in milliseconds
    private int mInitialDelay = 1000;
    private final int DELAY_OFFSET = 1000;


public void addItem(final Integer item) {
    mHandler.postDelayed(new Runnable() {
        @Override
        public void run() {
            new Thread(new Runnable() {
                @Override
                public void run() {
                    mDataSet.add(item);
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            mAdapter.notifyDataSetChanged();
                        }
                    });
                }
            }).start();

        }
    }, mInitialDelay);
    mInitialDelay += DELAY_OFFSET;
}