[Android]超簡単！ListViewをオシャレにカスタマイズ！横からスライドしてくるリストアイテムを作る。

はじめに

AndroidでListViewの使い方がわかってきたら、オシャレにカスタマイズしてみましょう！！
ということで、今回はリストアイテムが横からスライドしてくるListViewのつくりかたをご紹介したいと思います。
『横から...』とはいってますが、汎用性があるので上からでも下からでもどこからでもスライドさせる事ができますよ。
まずは、イメージをつかむためにサンプルの動きを見て下さい。
Android 横からスライドしてくるListView | YouTude

このように、画面起動と同時にジャンッ！と登場してスクロールすると横からヌルヌルとリストアイテムが現れます。
（コレ、見ているだけでも結構楽しいです。）
難しい事は何もなく、とても簡単に実装できます。
このようなAndroid画面の録画方法はコチラを参考に↓↓↓
[Android4.4 KitKat] 新機能 screenrecordで画面を録画する方法 | アドカレ2013 : SP #19

実際に作ってみる

プロジェクトファイルの作成

なにはともあれ、プロジェクトファイルを作成しましょう。
特に注意しなければいけないところはないので、プロジェクト作成に関しての詳しい説明は割愛します。

既存のプロジェクト内のListViewをカスタマイズしたいという場合は、この後に解説するファイルをプロジェクトに組み込んでいって下さい。

レイアウトを作る

まずはメインのレイアウト

layoutフォルダに入っている"activity_main.xml"ファイルを編集します。

編集というほどのことはしません。
ListViewのみを表示するアクティビティを作りたいので、下記の用にシンプルに記述します。

<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
</ListView>

リストアイテムのレイアウト

レイアウトフォルダに"item_layout.xml"ファイルを新たに作成します。 これが、ListViewの各行のレイアウトになります。

今回は左からスライドさせるので、視覚的に分かりやすいようにリボンのようなレイアウトを作成しておきます。 XMLファイルは次のようになります。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/bg"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="16dp"
        android:layout_marginTop="8dp"
        android:background="#aa0000"
        android:gravity="center_vertical"
        android:padding="8dp"
        android:text="Text"
        android:textColor="#dfff" />

</LinearLayout>

このようになればOKです。

アニメーションを定義する

次にリストアイテムをスライドさせるアニメーションを定義します。
"res"フォルダの中にアニメーション用に"anim"というフォルダを作って、新たに"item_motion.xml"というファイルを作ります。

ここで定義しているアニメーションはとてもシンプルです。
まず、３行目の android:duration="700" でアニメーションの時間を指定しています。
この数値を大きくすればゆっくりと、小さくすればすばやく動きます。
次に、５行目の alpha で透過率を指定しています。
アニメーション開始時は fromAlpha="0" 完全に透明、700ミリ秒かけて toAlpha="1.0" 不透明になります。
最後に９行目の translate で左から右へスライドさせます。
Viewの左上が基点になっているので、アニメーション開始位置を fromXDelta="-100%" にして700ミリ秒かけて元の位置 toXDelta="0" に戻します。
これで左から右にスライドしているように見えます。

<?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="-100%"
        android:fromYDelta="0"
        android:toXDelta="0"
        android:toYDelta="0" />

</set>

クラスを作る

ArrayAdapterを継承したCustomAdapterクラスを作る

リストアイテムを操作する CustomAdapter クラスを作っていきましょう。
ソースコードから。

public class CustomAdapter extends ArrayAdapter<String>{

	static class ViewHolder {
		TextView labelText;
	}

	private LayoutInflater inflater;

	// コンストラクタ
	public CustomAdapter(Context context,int textViewResourceId, ArrayList<String> labelList) {
		super(context,textViewResourceId, labelList);
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		
		ViewHolder holder; 
		View view = convertView;
		
		// Viewを再利用している場合は新たにViewを作らない
		if (view == null) {
			inflater =  (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
			view = inflater.inflate(R.layout.item_layout, null);
			TextView label = (TextView)view.findViewById(R.id.tv);
			holder = new ViewHolder();
			holder.labelText = label;
			view.setTag(holder);			
		} else {
			holder = (ViewHolder) view.getTag();
		}

		// 特定の行のデータを取得
		String str = getItem(position);

		if (!TextUtils.isEmpty(str)) {
			// テキストビューにラベルをセット
			holder.labelText.setText(str);
		}

		// 行毎に背景色を変える
		if(position%2==0){
			holder.labelText.setBackgroundColor(Color.parseColor("#aa0000"));
		}else{
			holder.labelText.setBackgroundColor(Color.parseColor("#880000"));
		}

		// XMLで定義したアニメーションを読み込む
		Animation anim = AnimationUtils.loadAnimation(getContext(), R.anim.item_motion);
		// リストアイテムのアニメーションを開始
		view.startAnimation(anim);

		return view;
	}
}

このクラスの機能は、与えられた文字列をリストアイテムのテキストビューにセットして、見やすくなるように１行毎に背景色を変える事です。

そして、本題のアニメーションの処理です。
getView のなかで下記の処理を行います。
この、アニメーションを読み込んで、Viewに適用する処理は必ず getView の中で行いましょう。
そうしないと、それぞれのリストアイテムが個別に動かなくなります。

		// XMLで定義したアニメーションを読み込む
		Animation anim = AnimationUtils.loadAnimation(getContext(), R.anim.item_motion);
		// リストアイテムのアニメーションを開始
		view.startAnimation(anim);

仕上げにMainActivity

ここでは簡単な文字列を用意して、20個のリストアイテムをListViewに表示したいと思います。
せっかくリストアイテムのレイアウトを作ったので27行目の区切り線を非表示にするのを忘れないようにしましょう。

public class MainActivity extends Activity {

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

// ListViewのインスタンスを取得 ListView list = (ListView)findViewById(R.id.listView);

// リストアイテムのラベルを格納するArrayListをインスタンス化 ArrayList labelList = new ArrayList();

// "List Item + ??"を20個リストに追加 for(int i=1; i<=20; i++){ labelList.add("List Item "+i); } // Adapterのインスタンス化 // 第三引数にlabelListを渡す CustomAdapter mAdapter = new CustomAdapter(this, 0, labelList); // リストにAdapterをセット list.setAdapter(mAdapter); // リストアイテムの間の区切り線を非表示にする list.setDivider(null); } } [/java]

これで、サンプルに必要なファイルがすべてそろいました。
プロジェクトを実行して実際の動きを確かめてみて下さい。

まとめ

このように、非常に簡単にリストアイテムをアニメーションさせることができます。
また、アニメーションの定義を変更して様々な動きをするリストアイテムを作成する事も可能です。
その際はレイアウトも色々工夫すると楽しいかもしれませんね。
ListViewにひと工夫したいときに役立つカスタマイズ法のご紹介でした。