
メーラーや、RSSリーダー、Twitter クライアントアプリなど、アイテムの状態(既読/未読)によって、
(リストビュー)アイテムの背景色を変更しているものがあります。
※例えば、上図の下2つのアイテムが既読(薄水色背景)、上2つのアイテムが未読(白色背景)
本エントリでは、リストビュー(ListView)アイテムの背景色を動的に変更する方法について解説します。
概要
1. 背景色に設定する色をリソースに定義する(ここでは既読用と未読用の2種類)
2. 背景色に設定する drawable をセレクタとしてリソースに定義する(この中で先の1の定義を参照)
3. ListView に設定する任意の Adapter クラスの getView() メソッドにて、対象のビューに対し、
setBackgroundDrawable() メソッドを呼び出し、(2で定義したdrawable)背景色を設定するソースを記述する
具体的なソースコードは、イカのとおり。
1. res / values / colors.xml ・・・ 色リソース定義
<resources>
<!-- 既読時の背景色(薄水色)-->
<color name="status_item_background_read">#E5F2F7</color>
<!-- 未読時の背景色(白色) -->
<color name="status_item_background_unread">#FFFFFF</color>
</resources>
2-1. res / drawable / status_item_background_read.xml ・・・ 既読用セレクタ定義
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:color/transparent"
android:state_selected="true"
android:state_window_focused="false"/>
<item android:drawable="@android:color/transparent"
android:state_selected="true"/>
<item android:drawable="@android:color/transparent"
android:state_pressed="true"
android:state_selected="false"/>
<!-- 既読用 -->
<item android:drawable="@color/status_item_background_read"
android:state_selected="false"/>
</selector>
2-2. res / drawable / status_item_background_unread.xml ・・・ 未読用セレクタ定義
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:color/transparent"
android:state_selected="true"
android:state_window_focused="false"/>
<item android:drawable="@android:color/transparent"
android:state_selected="true"/>
<item android:drawable="@android:color/transparent"
android:state_pressed="true"
android:state_selected="false"/>
<!-- 未読用 -->
<item android:drawable="@color/status_item_background_unread"
android:state_selected="false"/>
</selector>
3. src / 任意の BaseAdapter などを継承したクラス(javaファイル)
public class StatusItemAdapter extends BaseAdapter {
class ViewHolder {
ImageView image;
TextView header;
TextView body;
TextView footer;
}
// ... 省略...
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder vh;
if (convertView == null) {
convertView = mLayoutInflater.inflate(R.layout.list_item_status, null);
vh = new ViewHolder();
vh.image = (ImageView) convertView.findViewById(R.id.image);
vh.header = (TextView) convertView.findViewById(R.id.header);
vh.body = (TextView) convertView.findViewById(R.id.body);
vh.footer = (TextView) convertView.findViewById(R.id.footer);
convertView.setTag(vh);
} else {
vh = (ViewHolder) convertView.getTag();
}
// リストアイテム取得
StatusItem statusItem = (StatusItem) getItem(position);
// ... 省略...
// ここからが本エントリのポイント ----->
// 背景色設定
{
// 条件によってリストアイテムの背景色を変更
int backgroundDrawable;
if (statusItem.isRead()) { // ここでの条件は true or false
// 既読
backgroundDrawable = R.drawable.status_item_background_read;
} else {
// 未読
backgroundDrawable = R.drawable.status_item_background_unread;
}
convertView.setBackgroundDrawable(mContext.getResources()
.getDrawable(backgroundDrawable));
}
// ここまでが本エントリのポイント ----->
// View設定
{
vh.header.setText(statusItem.getHeader());
vh.body.setText(statusItem.getBody());
vh.footer.setText(statusItem.getFooter());
}
return convertView;
}
※ちなみに冒頭の画面キャプチャは、一向に完成しないオレオレ Twitter クライアント。。。