web-dev-qa-db-ja.com

ListViewアイテムの削除をアニメーション化する

私はこれを使用してListViewアイテムの削除をアニメーション化しようとしています：

    mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> adapterView, final View view, final int i, long l) {
            view.animate().setDuration(500).x(-view.getWidth()).alpha(0f);
            adapter.remove(tasks.get(i));
            adapter.notifyDataSetChanged();
        }
    });

それは動作しません。私は基本的に、この投稿の上部から4番目の回答のアドバイスに従いました。

Android ListView行）の追加または削除をアニメーション化する方法

ただし、アニメーションが発生している間、画面から滑り落ちるアイテムの下のアイテムも何らかの理由で削除されるため、面白い描画が行われたり、リサイクルされたりします。質問の質問者が最終的に正しいとマークした答えは、残念ながらAndroidのソース全体に対してRTFMです。エミュレートしようとしています。

TIA。ジョン

androidandroid-layoutandroid-listviewandroid-animation
31
John Wheeler

私はちょうど美しい解決策を見つけました： https://github.com/paraches/ListViewCellDeleteAnimation

ビデオはこちら： http://www.youtube.com/watch?v=bOl5MIti7n

'paraches'に感謝します;）

編集

Androidバージョン22.0.0の新しい Android.support.v7.widget.RecyclerView は、ListViewの後継として使用可能です。標準の追加/削除/更新アニメーションは、すぐに使用できます。ウィジェットのアニメーションも簡単にカスタマイズできます（ 少数のカスタムアニメーション ）。

カスタムアイテムアニメーションが必要な場合は、ListViewからRecyclerViewに切り替えることを強くお勧めします。

34
Michal Vician

アイデア：ユーザーが行を選択するとアニメーションが開始されます。アニメーションが完了したら、アダプターから行を削除します。次のコードは、選択した行をアニメーション化します。

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    final ListView listView = (ListView) findViewById(R.id.listView1);
    final ArrayList<String> values = new ArrayList<String>();
    values.add("Android");
    values.add("iPhone");
    values.add("WindowsMobile");
    values.add("Blackberry");
    values.add("Windows7");

    final ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
            Android.R.layout.simple_list_item_1, Android.R.id.text1, values);
    listView.setAdapter(adapter);

    final Animation animation = AnimationUtils.loadAnimation(this,
            R.anim.slide_out);
    animation.setAnimationListener(new AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            adapter.remove(adapter.getItem(selectedRow));
            adapter.notifyDataSetChanged();
        }
    });

    listView.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view,
                int position, long id) {
            Toast.makeText(getApplicationContext(),
                    " " + values.get(position), Toast.LENGTH_LONG).show();
            view.startAnimation(animation);
            selectedRow = position;

        }

    });
}

slide_out.xmlファイル：

<?xml version="1.0" encoding="utf-8"?>
 <set xmlns:Android="http://schemas.Android.com/apk/res/Android" >  
    <translate 
        Android:fromYDelta="0%" 
        Android:toYDelta="100%"  
        Android:duration="@Android:integer/config_mediumAnimTime"/>  
</set>
38
Alexey

Chet HaaseがDevBytesで https://www.youtube.com/watch?v=8MIfSxgsHIs で指摘しているように、これはすべて機能しますが、transientStateフラグを追加することを忘れないでください。

彼のコードから：

// Here's where the problem starts - this animation will animate a View object.
                    // But that View may get recycled if it is animated out of the container,
                    // and the animation will continue to fade a view that now contains unrelated
                    // content.
                    ObjectAnimator anim = ObjectAnimator.ofFloat(view, View.ALPHA, 0);
                    anim.setDuration(1000);
                    if (setTransientStateCB.isChecked()) {
                        // Here's the correct way to do this: if you tell a view that it has
                        // transientState, then ListView ill avoid recycling it until the
                        // transientState flag is reset.
                        // A different approach is to use ViewPropertyAnimator, which sets the
                        // transientState flag internally.
                        view.setHasTransientState(true);
                    }
                    anim.addListener(new AnimatorListenerAdapter() {
                        @Override
                        public void onAnimationEnd(Animator animation) {
                            cheeseList.remove(item);
                            adapter.notifyDataSetChanged();
                            view.setAlpha(1);
                            if (setTransientStateCB.isChecked()) {
                                view.setHasTransientState(false);
                            }
                        }
                    });
                    anim.start();
4
AllDayAmazing

ListViewの更新時に、上から下へのスライドアニメーションを使用しました。私が使用したコードは次のとおりです。

 adapter.notifyDataSetChanged();
 Animation animation = AnimationUtils.loadAnimation(
                    getApplication(), R.anim.slide_top_to_bottom);
 getListView().startAnimation(animation);
 getListView().setSelection(0);

およびslide_top_to_bottom.xml（res/animフォルダー内に保存）

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:Android="http://schemas.Android.com/apk/res/Android"   Android:interpolator="@Android:anim/accelerate_interpolator">
<translate Android:fromYDelta="-100%" Android:toXDelta="0" Android:duration="100" />
<alpha Android:fromAlpha="0.0" Android:toAlpha="1.0" Android:duration="50" />
</set>

編集：これを試してください：

mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, final View view, final int i, long l) {

    ValueAnimator fader = ObjectAnimator.ofFloat(view, "alpha", 1, 0);
    AnimatorSet animation = new AnimatorSet();
    animation.addListener(new AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {

        }
        @Override
        public void onAnimationRepeat(Animator animation) {
        }
        @Override
        public void onAnimationEnd(Animator animation) {

        }
        @Override
        public void onAnimationCancel(Animator animation) {
        }
    });
    ((AnimatorSet) animation).play(fader);
    animation.setDuration(500);
    animation.start();
    adapter.remove(tasks.get(i));
    adapter.notifyDataSetChanged();
}
});
1
Nishant