Androidリストビュー行の追加または削除をアニメーション化する方法

iOSには、UITableView行の追加と削除をアニメーション化するための非常に簡単で強力な機能があります。これは、デフォルトのアニメーションを示すYouTubeビデオのクリップです。周囲の行が削除された行にどのように折りたたまれているかに注意してください。このアニメーションは、ユーザーがリストで何が変更されたか、データが変更されたときにリストのどこを見ているかを追跡するのに役立ちます。

私はAndroidで開発してきたので、TableViewの個々の行をアニメーション化する同等の機能を見つけられませんでした。notifyDataSetChanged()アダプタを呼び出すと、ListViewはそのコンテンツを新しい情報ですぐに更新します。データが変更されたときに新しい行が押し込まれるか、またはスライドする簡単なアニメーションを表示したいのですが、これを行うための文書化された方法が見つかりません。LayoutAnimationControllerがこれを機能させるためのキーを保持しているように見えますが、ListViewにLayoutAnimationControllerを設定し（ApiDemoのLayoutAnimation2と同様）、リストが表示された後にアダプターから要素を削除すると、要素はアニメーション化されずにすぐに消えます。

個別のアイテムが削除されたときにアニメーション化するために、次のようなことも試しました。

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

ただし、アニメーション化された行を囲む行notifyDataSetChanged()は、呼び出されたときに新しい位置にジャンプするまで位置を移動しません。要素が配置されても、ListViewはレイアウトを更新しないようです。

ListViewの独自の実装/フォークを作成することは私の心を超えましたが、これはそれほど難しいことではないようです。

ありがとう！

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

上から下へのアニメーションの使用：

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

RecyclerView追加、削除、および再注文のアニメーションの世話を！

このシンプルなAndroidStudioプロジェクトが特徴RecyclerView。コミットを見てみましょう：

1. 従来のHello World Androidアプリのコミット
2. コミット、RecyclerViewをプロジェクトに追加（動的ではないコンテンツ）
3. コミット、実行時にRecyclerViewのコンテンツを変更する機能を追加（ただしアニメーションはなし）
4. そして最後に... RecyclerViewへのアニメーションの追加をコミットします

Googleソリューションをご覧ください。こちらは削除方法のみです。

ListViewRemovalAnimationプロジェクトコードとビデオデモ

Android 4.1以降（API 16）が必要です。しかし、我々は2014年の外にあります。

ListViews高度に最適化されているので、これを達成することは不可能だと思います。コードで（つまり、xmlから行をインフレートしてに追加することによって） "ListView"を作成してLinearLayoutアニメーション化しようとしましたか？

スイープを右にアニメートすることを検討しましたか？リストアイテムの上部に次第に大きな白いバーを描画し、それをリストから削除するようなこともできます。他のセルはまだ所定の位置にジャークしますが、何もないよりはましです。

listView.scheduleLayoutAnimation（）;を呼び出します。リストを変更する前

リストビューを操作せずに別の方法でハッキングしました。残念ながら、通常のAndroidアニメーションは行のコンテンツを操作するように見えますが、実際にビューを縮小することには効果がありません。したがって、最初にこのハンドラーを検討します。

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

このコレクションをリストアダプターに追加します。

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

そして追加

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

次に、行を非表示にしたい場合は、これを追加します。

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

それでおしまい！一度に高さを縮小するピクセル数を変更することで、アニメーションの速度を変更できます。実際には洗練されていませんが、動作します！

ListViewに新しい行を挿入した後、ListViewを新しい位置にスクロールするだけです。

ListView.smoothScrollToPosition(position);

まだ試していませんが、animateLayoutChangesで目的の処理を実行できるようです。ImageSwitcherクラスに表示されますが、ViewSwitcherクラスにもあると思いますか？

Androidはオープンソースであるため、実際にListViewの最適化を再実装する必要はありません。ListViewのコードを取得し、アニメーションをハッキングする方法を見つけようとすることができます。また、Androidバグトラッカーで機能リクエストを開くこともできます（実装することにした場合は、パッチの提供を忘れないでください）。

ちなみに、ListViewのソースコードはこちらです。

次に、行を削除してそれらを並べ替えるソースコードを示します。

デモAPKファイルも利用できます。行の削除は、GoogleのGmailアプリの線に沿って行われ、上面ビューをスワイプすると底面ビューが表示されます。下のビューには、[元に戻す]ボタンなど、必要なものを含めることができます。

私のサイトで私のアプローチを説明したように、リンクを共有しました。常に、アイデアはgetdrawingcacheによってビットマップを作成します.2つのビットマップを持ち、下のビットマップをアニメーション化して移動効果を作成します

次のコードをご覧ください。

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

画像で理解するにはこちらをご覧ください

ありがとう。

私はこれと同じようなことをしました。1つのアプローチは、listViewのonMeasure発行中requestLayout()に、行内のアニメーションの時間の経過に伴うビューの高さの時間を補間することです。はい、それはlistViewコード内で直接行う方が良いかもしれませんが、それは迅速な解決策でした（見栄えが良かったです！）

別のアプローチを共有するだけです：

まず、リストビューのandroid：animateLayoutChangesをtrueに設定します。

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

次に、ハンドラーを使用してアイテムを追加し、遅延してリストビューを更新します。

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