ListViewのアイテムをアニメーションさせる

概要

Google NowのようなカードUIでアニメーションとか当初どうやるのか分からなかったのですが

思っていた以上に簡単だったので書いておきます。

アニメーションを定義したXMLを用意

res/anim/以下にitem_motion.xmlとしてファイルを作成します。

ファイルの中身はこんな感じ

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="700" >

    <alpha
        android:fromAlpha="0"
        android:toAlpha="1.0" />

    <translate
        android:fromXDelta="0"
        android:fromYDelta="100%"
        android:toXDelta="0"
        android:toYDelta="0" />

</set>

やっていることは、

• 700ミリ秒かけてアニメーションさせる(android:duration)
• アニメーション開始時に透過させる(android:fromAlpha)
• アニメーション終了時は透過させない(andorid:toAlpha)
• アニメーション開始時に下から移動させる(fromYDelta)
• アニメーション終了時に定位置にいる(toYDelta)

なので、このアニメーションは
下から上に少しずつ表示されるアニメーションになります。

Adapterの実装

ここが肝です。といってもすごく簡単

ようはXXAdapter#getView()でViewを返す時にアニメーションを実行すればいいだけ。

@Override
public View getView(int position, View convertView, ViewGroup parent) {
.....省略

    // アニメーションをロードする
    Animation anim = AnimationUtils.loadAnimation(getContext(), R.anim.item_motion);
    // ListViewのアイテム要素にロードしたアニメーションを実行する
    convertView.startAnimation(anim);

    return convertView;
}

これで以下のようなアニメーションになります。

ListViewでアニメーションさせるデモ

以上！