AndroidのListViewをカスタマイズしたい、データによって背景の色を変えたいと思っていろいろ調べたので分かった範囲でメモ。
やりたいこと
・ListViewの1行ごとの内容(オブジェクト)を取得
・取得したオブジェクト内のフラグによって背景色を塗り分ける
・1行内のレイアウトを自由に行う
・ListViewは1行ごとにレイアウトを指定できる。
例)twitterみたいに、画像を左、アカウント名を右上、テキストを右下など
で、こんな感じにできた。
手順
1.ListViewの1行のレイアウトを作成
レイアウトをxmlで作る
idとかを指定しておく
【past_order_item.xml】
1 2 3 4 5 6 7 8 9 10 11 12 13 |
< linearlayout android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:orientation = "vertical" >
< textview android:id = "@+id/pastOrderName" android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:text = "test" android:textsize = "30sp" android:textstyle = "bold" >
< textview android:id = "@+id/pastOrderNum" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:textsize = "20sp" android:layout_gravity = "right" >
< textview android:id = "@+id/pastOrderDate" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:textsize = "20sp" android:text = "date" android:layout_gravity = "right" >
</ textview ></ textview ></ textview ></ linearlayout >
</ linearlayout >
|
2.ListView自体のレイアウトの作成
説明することは特になし
(Activityに貼付けるレイアウトのこと)
【past_order.xml】
ここのTextViewはListViewに表示するリストが無い場合だけ表示される
1 2 3 4 5 | < listview android:id = "@+id/android:list" android:layout_width = "fill_parent" android:layout_height = "0dip" android:layout_weight = "1" android:drawselectorontop = "false" >
< textview android:id = "@+id/android:empty" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:text = "@string/no_data" >
</ textview ></ listview ></ linearlayout >
|
3.ListViewの1行に貼付けたい情報やフラグをもったオブジェクトのクラスの宣言
ここは自分で好きなようなクラスを作ってください。
(※不必要なフィールドも書いてたりします)
【PastOrder.java】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | public class PastOrder {
private String order;
private String num;
private Long dateLong;
private Date date;
private String dateString;
public PastOrder(String order, String num, String dateString) {
super ();
this .order = order;
this .num = num;
this .dateString = dateString;
}
public String getOrder() {
return order;
}
public void setOrder(String order) {
this .order = order;
}
public String getNum() {
return num;
}
public void setNum(String num) {
this .num = num;
}
public String getFormatDate(){
Date date = new Date(dateLong);
SimpleDateFormat sdf = new SimpleDateFormat( "yyyy/MM/dd HH:mm:ss" , Locale.JAPAN);
return sdf.format(date);
}
public boolean isCompleted() {
return isCompleted;
}
public void setCompleted( boolean isCompleted) {
this .isCompleted = isCompleted;
}
public String getDateString() {
return dateString;
}
public void setDateString(String dateString) {
this .dateString = dateString;
}
}
|
4.アダプターの作成(ここがメイン!!)
アダプターとはListViewに貼付けたいデータとレイアウトへの貼付けを行うもの(であってる?)
アダプターの拡張をして、ここで背景の判定とかを行う
ArrayAdapter
の拡張をおこなう
(ここでTは先ほど作ったPastOrderクラスとしている)
コンストラクタ
LayoutInflaterオブジェクトの生成
1行ごとのレイアウトを指定して、データを貼付けたりできる
getView()・・・1行ごとに実行されるメソッド
convertView==nullならinflate
ポジションからT itemの取得
あとはitemオブジェクトを好きなように煮て食う
(今回はオーダー情報から調理完了かどうかをみて背景色を変更する処理を行っている)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | public class OrderArrayAdapter extends ArrayAdapter<pastorder>{
private Context myContext;
private LayoutInflater li;
public OrderArrayAdapter(Context context, List<pastorder> objects) {
super (context, 0 , objects);
myContext = context;
li = (LayoutInflater)myContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
@Override
public View getView( int position, View convertView, ViewGroup parent) {
int UNCOMPLETE_COLOR = myContext.getResources().getColor(R.color.status_item_background_complete);
int COMPLETE_COLOR = myContext.getResources().getColor(R.color.status_item_background_uncomplete);
if (convertView == null ){
convertView = li.inflate(R.layout.past_order_item, null );
}
PastOrder pastOrder = (PastOrder) this .getItem(position);
if (pastOrder != null ){
TextView pastOrderName = (TextView)convertView.findViewById(R.id.pastOrderName);
TextView pastOrderNum = (TextView)convertView.findViewById(R.id.pastOrderNum);
TextView pastOrderDate = (TextView)convertView.findViewById(R.id.pastOrderDate);
if (pastOrderName != null ){
pastOrderName.setText(pastOrder.getOrder());
}
if (pastOrderNum != null ){
pastOrderNum.setText(pastOrder.getNum());
}
if (pastOrderDate != null ){
pastOrderDate.setText(pastOrder.getDateString());
}
if (pastOrder.isCompleted()){
convertView.setBackgroundColor(COMPLETE_COLOR);
Log.v( "Adapter" , position+ "\t" + "comp" + "\t" +pastOrder.getOrder());
} else {
convertView.setBackgroundColor(UNCOMPLETE_COLOR);
Log.v( "Adapter" , position+ "\tuncomp" + "\t" +pastOrder.getOrder());
}
}
return convertView;
}
}
</pastorder></pastorder>
|
5.ListViewActivity
ListViewに貼付けるデータの生成
アダプターのセット
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.past_order);
List<pastorder> pastOrderList = createPastData2(result);
setPastOrderToView3(pastOrderList);
}
private List<pastorder> createPastData2(JSONArray jArr){
List<pastorder> pastOrderList = new ArrayList<pastorder>();
JSONObject jObj;
for ( int i = 0 ; i < jArr.length(); i++){
try {
jObj = jArr.getJSONObject(i);
String order = jObj.getString( "order" );
String num = jObj.getString( "num" );
Long dateLong = jObj.getLong( "date" );
Date date = new Date(dateLong);
boolean completed = jObj.getBoolean( "completed" );
SimpleDateFormat sdf = new SimpleDateFormat( "yyyy/MM/dd HH:mm:ss" , Locale.JAPAN);
PastOrder pastOrder = new PastOrder(order, num, sdf.format(date), completed);
pastOrderList.add(pastOrder);
} catch (JSONException e) {
e.printStackTrace();
}
}
return pastOrderList;
}
private void setPastOrderToView3(List<pastorder> pastOrderList){
Log.v( "Adapter" , pastOrderList.size()+ "-------" );
mOrderArrayAdapter = new OrderArrayAdapter( this ,pastOrderList);
setListAdapter(mOrderArrayAdapter);
}
</pastorder></pastorder></pastorder></pastorder></pastorder>
|
ほぼ、この流れで「オブジェクトをListViewに貼付けて、オブジェクトごとに背景色を塗り分ける」という処理が実装できるはず。
何かコメントなどあればお願いします。
(※いろいろ消してるのでたぶんこのままでは動きません)