Jak animować dodawanie lub usuwanie wierszy Android ListView

W iOS istnieje bardzo łatwa i wydajna funkcja do animowania dodawania i usuwania wierszy UITableView, oto klip z filmu na YouTube pokazujący domyślną animację. Zwróć uwagę, jak otaczające rzędy zapadają się na usunięty wiersz. Ta animacja pomaga użytkownikom śledzić, co zmieniło się na liście i gdzie na liście patrzyli, kiedy zmieniły się dane.

Odkąd pracuję na Androidzie, nie znalazłem odpowiedniego narzędzia do animowania pojedynczych wierszy w TableView . Wywołanie notifyDataSetChanged()mojego adaptera powoduje, że ListView natychmiast aktualizuje swoją zawartość o nowe informacje. Chciałbym pokazać prostą animację nowego wiersza wciskającego się lub wysuwającego, gdy zmieniają się dane, ale nie mogę znaleźć żadnego udokumentowanego sposobu, aby to zrobić. Wygląda na to, że LayoutAnimationController może mieć klucz do uruchomienia tego, ale kiedy ustawię LayoutAnimationController na moim ListView (podobnie do LayoutAnimation2 ApiDemo ) i usuwam elementy z mojego adaptera po wyświetleniu listy, elementy znikają natychmiast, zamiast zostać animowane .

Próbowałem też wykonać następujące czynności, aby animować pojedynczy element po jego usunięciu:

@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);
}

Jednak rzędy otaczające animowany rząd nie zmieniają pozycji, dopóki nie zostaną przeskoczone na nowe pozycje, gdy notifyDataSetChanged()zostanie wywołane. Wygląda na to, że ListView nie aktualizuje swojego układu po umieszczeniu jego elementów.

Podczas pisania własnej implementacji / rozwidlenia ListView przyszło mi do głowy, wydaje się, że nie powinno to być takie trudne.

Dzięki!

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());

do animacji od góry do dołu:

<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>

The RecyclerViewZajmuje dodawania, usuwania i ponownego zamawiania animacji!

Ten prosty projekt AndroidStudio zawieraRecyclerView . spójrz na commity :

1. zatwierdzić klasyczną aplikację Hello World na Androida
2. zatwierdzenie, dodanie RecyclerView do projektu (treść nie dynamiczna)
3. zatwierdzanie, dodawanie funkcjonalności do modyfikowania zawartości RecyclerView w czasie wykonywania (ale bez animacji)
4. i na koniec ... zatwierdzić dodanie animacji do RecyclerView

Spójrz na rozwiązanie Google. Oto tylko metoda usuwania.

Kod projektu ListViewRemovalAnimation i demonstracja wideo

Wymaga Androida 4.1+ (API 16). Ale mamy 2014 rok na zewnątrz.

Ponieważ ListViewssą wysoce zoptymalizowane, myślę, że nie jest to możliwe. Czy próbowałeś utworzyć „ListView” według kodu (tj. Nadmuchując swoje wiersze z xml i dołączając je do a LinearLayout) i animując je?

Czy zastanawiałeś się nad animacją przeciągnięcia w prawo? Możesz zrobić coś takiego jak narysowanie coraz większego białego paska u góry elementu listy, a następnie usunięcie go z listy. Pozostałe komórki nadal szarpnęły się w miejscu, ale lepiej niż nic.

call listView.scheduleLayoutAnimation (); przed zmianą listy

Zhakowałem razem inny sposób, aby to zrobić bez konieczności manipulowania widokiem listy. Niestety zwykłe animacje na Androida zdają się manipulować zawartością wiersza, ale nieefektywnie zmniejszają widok. Więc najpierw rozważ ten moduł obsługi:

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);
}

Dodaj tę kolekcję do adaptera listy:

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

i dodaj

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

Następnie, gdziekolwiek chcesz ukryć wiersz, dodaj to:

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));

Otóż ​​to! Szybkość animacji można zmienić, zmieniając liczbę pikseli zmniejszających wysokość jednocześnie. Nie bardzo wyrafinowane, ale działa!

Po wstawieniu nowego wiersza do ListView, po prostu przewijam ListView do nowej pozycji.

ListView.smoothScrollToPosition(position);

Nie próbowałem tego, ale wygląda na to, że animateLayoutChanges powinien zrobić to, czego szukasz. Widzę to w klasie ImageSwitcher, zakładam, że to także w klasie ViewSwitcher?

Ponieważ Android jest open source, tak naprawdę nie trzeba ponownie wdrażać optymalizacji ListView. Możesz pobrać kod ListView i spróbować znaleźć sposób na włamanie się do animacji, możesz także otworzyć żądanie funkcji w Android trackerze błędów (a jeśli zdecydowałeś się go wdrożyć, nie zapomnij dodać łatki ).

Do Twojej wiadomości, kod źródłowy ListView jest tutaj .

Oto kod źródłowy, który umożliwia usuwanie wierszy i zmianę ich kolejności.

Dostępny jest również plik demonstracyjny APK. Usuwanie wierszy odbywa się bardziej zgodnie z aplikacją Gmaila Google, która odsłania widok z dołu po przesunięciu widoku z góry. Widok z dołu może mieć przycisk Cofnij lub cokolwiek chcesz.

Tak jak wyjaśniłem moje podejście na mojej stronie, udostępniłem link. W każdym razie chodzi o tworzenie map bitowych przez getdrawingcache. Posiadanie dwóch map bitowych i animowanie dolnej mapy bitowej w celu uzyskania efektu ruchomego

Zobacz następujący kod:

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);
        }
    });

Aby to zrozumieć, zobacz obrazy

Dzięki.

Zrobiłem coś podobnego do tego. Jednym z podejść jest interpolacja w czasie animacji wysokości widoku w czasie wewnątrz wierszy onMeasurepodczas wystawiania requestLayout()dla listView. Tak, może być lepiej zrobić bezpośrednio na liścieView code, ale było to szybkie rozwiązanie (wyglądało dobrze!)

Po prostu podziel się innym podejściem:

Pierwszy set widoku listy w Androidzie: animateLayoutChanges się prawdą :

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

Następnie używam modułu obsługi do dodawania elementów i aktualizowania widoku listy z opóźnieniem:

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;
}