2012年05月07日

ListViewの簡単なカスタマイズ(アイコンの追加)


ArrayAdapterの第2引数で指定しているレイアウトファイルには
独自に作成したレイアウトファイルを指定する事ができました
レイアウトファイルを独自設定する
今回はそれの簡単なカスタマイズとしてアイコンの追加を行いたいとおもいます
まずは前回とすこし変えてmain.xmlの編集から行います
main.xmlにはリニアレイアウトとリストビューのみ配置します
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="vertical" >

    <ListView
        android:id="@+id/listView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
    </ListView>
    
</LinearLayout>
次にListView の行毎の表示方法を変えるためには
独自に作成したレイアウトファイルを用意します
res/layout/list.xmlを新規作成します
また同時に追加するアイコンを設定したいと思います
アイコンは以下の画像を使用しました
101.png
アイコンはresフォルダに新規にdrawableフォルダを作り
その中にpngファイルとして保存します
device100.png
保存方法はdrawableフォルダを作ったらコピー&ペーストでOKです

次に1行分のレイアウト、list.xmlです
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="horizontal"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
>
<TextView 
  android:id="@+id/list_textview1"
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:textSize="20sp"
  android:padding="10dip"
/>
<ImageView
  android:src="@drawable/icon"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center_vertical"
/>

</LinearLayout>
horizontalのLiniarLayoutにTextViewとImageViewを配置しています
ImageViewにより先ほど配置したdrawable/iconを指定しています

最後にMainActivity.javaを以下のように編集します
package blog.test;
  
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
  
public class MainActivity extends Activity {
 
    private String[] mStrings ={ "test1", "test2", "test3", "test4" };
    ListView listView1;
  
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //リストビューを作成
        setContentView(R.layout.main);
        listView1 = (ListView)findViewById(R.id.listView1);
 
        ArrayAdapter adapter = new ArrayAdapter(this,
                R.layout.list,R.id.list_textview1, mStrings);
        listView1.setAdapter(adapter);
  
        //クリックイベントを検出
        listView1.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            public void onItemClick(AdapterView parent, View view,
                    int position, long id) {
                //listViewを指定
                ListView listView = (ListView) parent;
                //クリックされたものを取得
                String item = (String) listView.getItemAtPosition(position);
                //Log出力
                Log.v("tag", String.format("onItemClick: %s", item));
            }
        });
         
        //セレクトされたときに実行される
        listView1.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            public void onItemSelected(AdapterView parent, View view,
                    int position, long id) {
                //listViewを指定
                ListView listView = (ListView) parent;
                //クリックされたものを取得
                String item = (String) listView.getSelectedItem();
                Log.v("tag", String.format("onItemSelected: %s", item));
            }
            //何も選択さてないときに実行
            public void onNothingSelected(AdapterView parent) {
                Log.v("tag", "onNothingSelected");
            }
        });
    }
}
ArrayAdapter adapterの部分での第二引数に行毎のレイアウト
第三引数には文字列をセットするためのTextView ウィジェットの ID を指定しています
(この場合はR.layout.listとR.id.list_textview1)
これによりmStringをlist_textview1に入れることができます

実行結果は以下のようになります
device99.png
iconが追加されているのがわかります
スポンサードリンク

この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/268875369
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。