Androidアプリを開発するための基礎をまとめてあります。

リストビューとは編集する

最終更新： t_yokky2002 t_yokky2002 2011年10月16日(日) 22:31:26履歴


リストビューの基礎

  1. android.widget.ListViewというクラスのオブジェクト
  2. 任意のクラスのオブジェクトから構成されるリストを、画面表示することが可能
  3. リストの行をタップすることによって、それに対応する動作を行う事が可能
  4. リストビューに表示される項目は、そのオブジェクトがもっている、toString()というメソッドが返した文字列を表示

アダプター(Adapter)について 

リスト内に表示するデータをリストビューに設定するには、アダプタクラスを使用します。
アダプターとは、リストの項目とリストビューとの間を橋渡しするオブジェクトです。
アダプターは、android.widget.BaseAdapterというクラスのオブジェクトです。

アダプタの種類

クラス名用途
BaseAdapterAdapterの基底クラス
ArrayAdapter配列やリストデータをセット
SimpleAdapterマップのリストデータをセット
CursorAdapterデータベースのカーソルクラスでアクセスするデータをセット

レイアウトについて 

<?xml version="1.0" encoding="utf-8"?>
<!-- mainアクティビティ用 -->
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical"
	android:layout_height="fill_parent"
	android:layout_width="wrap_content">
	<!-- リストビュー -->
	<ListView
		android:id="@android:id/list"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content" />
	<!-- リストが空のときに表示 -->
	<TextView
		android:id="@android:id/empty"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content" />
</LinearLayout>
  • ListViewのidの属性値は、「@android:id/list」です
  • リストが空（表示する要素がひとつもない）の場合、idの属性値が「@android:id/empty」であるTextViewを表示します

アクティビティについて 

ここでは「ArrayAdapter」を用いて説明します。

public class MainActivity extends ListActivity {
	/** Called when the activity is first created. */
	private ArrayAdapter<String> mAdapter;
	private static final String[] VIEW_LIST_ITEMS = { "北海道", "青森県", "岩手県", "宮城県", "秋田県", "山形県",
            "福島県", "茨城県", "栃木県", "群馬県", "埼玉県", "千葉県", "東京都", "神奈川県", "新潟県",
            "富山県", "石川県", "福井県", "山梨県", "長野県", "岐阜県", "静岡県", "愛知県", "三重県",
            "滋賀県", "京都府", "大阪府", "兵庫県", "奈良県", "和歌山県", "鳥取県", "島根県", "岡山県",
            "広島県", "山口県", "徳島県", "香川県", "愛媛県", "高知県", "福岡県", "佐賀県", "長崎県",
            "熊本県", "大分県", "宮崎県", "鹿児島県", "沖縄県" };

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
                // アダプタ生成
		mAdapter = new ArrayAdapter<String>(
　　　　　　　　　　　　　　　　getApplicationContext(),
				android.R.layout.simple_list_item_1,
　　　　　　　　　　　　　　　　VIEW_LIST_ITEMS);
                // リストビューにアダプタをセット
		setListAdapter(mAdapter);
	}

	@Override
        // リストの行がクリックされた時の処理
	protected void onListItemClick(ListView list, View view, int position, long id) {
                //　クリックされた項目を取得し、トーストにて表示     
		String v = (String) list.getItemAtPosition(position);
		Toast.makeText(getApplicationContext(), v, Toast.LENGTH_SHORT).show();
	}
}
  • ListActivityを継承して作成します
  • onCreateでは、Stringクラスを保持するArrayアダプタを生成しています
  • 「android.R.layout.simple_list_item_1」は、androidがもつ標準レイアウトのひとつです
<!-- android.R.layout.simple_list_item_1 -->
<?xml version="1.0" encoding="UTF-8"?>  
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/message"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:minHeight="?android:attr/listPreferredItemHeight"
    android:gravity="center_vertical"
    android:paddingLeft="6dip"
    android:background="@android:color/white"
    android:textColor="@android:color/black"
    android:singleLine="true" />

これらのレイアウト、アクティビティを使用すると、次のようなリストビューを作成することができます



リスト行を表示するための標準レイアウトは、これ以外に、以下のようなものが準備されています
android.R.layout.simple_list_item_2 
<?xml version="1.0" encoding="utf-8"?>
<TwoLineListItem xmlns:android="http://schemas.android.com/apk/res/android" 
    android:paddingTop="2dip"
    android:paddingBottom="2dip"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/listPreferredItemHeight"
    android:mode="twoLine">
    <TextView android:id="@android:id/text1"
        android:layout_width="match_parent"
	android:layout_height="wrap_content"
        android:layout_marginLeft="6dip"
        android:layout_marginTop="6dip"
	android:textAppearance="?android:attr/textAppearanceLarge" />
    <TextView android:id="@android:id/text2"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_below="@android:id/text1"
        android:layout_alignLeft="@android:id/text1"
	android:textAppearance="?android:attr/textAppearanceSmall" />
</TwoLineListItem>

public class MainActivity extends ListActivity {
	private SimpleAdapter mSAdapter;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		// mAdapter = new ArrayAdapter<String>(this.getApplicationContext(),
		// android.R.layout.simple_list_item_1, VIEW_LIST_ITEMS);

		mSAdapter = new SimpleAdapter(
                                this,
                                createData(),
				android.R.layout.simple_list_item_2,
                                new String[] { "title", "comment" },
                                new int[] { android.R.id.text1, android.R.id.text2 }
                );
		setListAdapter(mSAdapter);
	}

	private List<Map<String, String>> createData() {
		List<Map<String, String>> retDataList = new ArrayList<Map<String, String>>();
		for (int n = 0; n < 5; n++) {
			Map<String, String> data = new HashMap<String, String>();
			data.put("title", "タイトル" + n);
			data.put("comment", "コメント" + n);
			retDataList.add(data);
		}

		return retDataList;
	}
}
android.R.layout.simple_list_item_checked 
<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:gravity="center_vertical"
    android:checkMark="?android:attr/textCheckMark"
    android:paddingLeft="6dip"
    android:paddingRight="6dip" />
android.R.layout.simple_list_item_multiple_choice 
<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:gravity="center_vertical"
    android:checkMark="?android:attr/listChoiceIndicatorMultiple"
    android:paddingLeft="6dip"
    android:paddingRight="6dip" />
android.R.layout.simple_list_item_single_choice 
<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:gravity="center_vertical"
    android:checkMark="?android:attr/listChoiceIndicatorSingle"
    android:paddingLeft="6dip"
    android:paddingRight="6dip" />
android.R.layout.two_line_list_item 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <TextView android:id="@android:id/text1"
        android:textSize="16sp"
        android:textStyle="bold"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <TextView android:id="@android:id/text2"
        android:textSize="16sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

リスト行のカスタマイズ方法について

大きく分けて、以下の２つの方法があります。
Twitterのようなレイアウトを実現するためには、Adaperをカスタマイズして実現する必要があります。

行のビューレイアウトをカスタマイズ

Androidの標準レイアウトを使用せずに、単にレイアウトXMLを差し替えるのみです。
res/layout/list_row.xml

<?xml version="1.0" encoding="UTF-8"?>  
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/message"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:minHeight="?android:attr/listPreferredItemHeight"
    android:gravity="center_vertical"
    android:paddingLeft="6dip"
    android:background="@android:color/white"
    android:textColor="@android:color/black"
    android:singleLine="true" />

Activityを、以下のように修正する。（ArrayAdapterの引数を変更）

public class MainActivity extends ListActivity {
        /** Called when the activity is first created. */
        private ArrayAdapter<String> mAdapter;
        private static final String[] VIEW_LIST_ITEMS = { "北海道", "青森県", "岩手県", "宮城県", "秋田県", "山形県",
            "福島県", "茨城県", "栃木県", "群馬県", "埼玉県", "千葉県", "東京都", "神奈川県", "新潟県",
            "富山県", "石川県", "福井県", "山梨県", "長野県", "岐阜県", "静岡県", "愛知県", "三重県",
            "滋賀県", "京都府", "大阪府", "兵庫県", "奈良県", "和歌山県", "鳥取県", "島根県", "岡山県",
            "広島県", "山口県", "徳島県", "香川県", "愛媛県", "高知県", "福岡県", "佐賀県", "長崎県",
            "熊本県", "大分県", "宮崎県", "鹿児島県", "沖縄県" };

        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.main);
                // アダプタ生成
                mAdapter = new ArrayAdapter<String>(
　　　　　　　　　　　　　　　　getApplicationContext(),
                                R.layout.list_row,   // この部分を変更
　　　　　　　　　　　　　　　　VIEW_LIST_ITEMS);
                // リストビューにアダプタをセット
                setListAdapter(mAdapter);
        }
}

レイアウトXMLとAdapterのカスタマイズ

  • リスト行を表すレイアウトXMLを作成
  • このXMLレイアウト用の独自のAdapterクラスを作成（ArrayAdapterをクラスを継承したクラスの作成）
  • １行のレイアウトに紐付けるデータ用のクラスの作成
この部分は、次回の講義でやります。
こんなレイアウトが作れるようになるかも。
リストビューとは - Androidアプリ開発講座 先頭へ

このページへのコメント

pH6O0B <a href="http://tkdxeatqlsbn.com/">tkdxeatqlsbn</a>, [url=http://dysbweolbopb.com/]dysbweolbopb[/url], [link=http://tksrmxuhkuhq.com/]tksrmxuhkuhq[/link], http://nnkveknawnpl.com/

0
Posted by wzllra 2013年11月14日(木) 12:44:36 返信

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい
 

最近更新したページ

最新コメント

QRコード

アクセス解析中

管理人/副管理人のみ編集できます