AndroidでListViewに複数行テキスト配置+α

ListViewに複数行の文字を表示してある程度カスタムできたらと思い、調べた内容を備忘録がてら残します。
↓こんな風に
img1

まず、アクティビティへListViewを配置します。
※テーマはHoloです。
・layout/activity_main.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/listView" />

</RelativeLayout>

次に、ListViewの各アイテムに適用するレイアウトを作成します。
・layout/two_line_list_item.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:gravity="center_vertical">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/item_main"
            android:text="main_item"
            android:textAppearance="?android:textAppearanceLarge" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/item_sub"
            android:text="sub_item"
            android:textAppearance="?android:textAppearanceSmall"
            android:layout_marginLeft="5dp" />
    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="right_item"
            android:id="@+id/item_right" />
    </LinearLayout>
</LinearLayout>

このレイアウトをプレビューすると、こんな感じになります。
img2

このListViewのレイアウトをSimpleAdapterを使って、先ほどアクティビティに配置したListViewへと適用します。

・MainActivity.java

package com.yourdomain.yourappname;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import java.util.ArrayList;
import java.util.HashMap;

public class MainActivity extends Activity {

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

        ArrayList<HashMap<String, String>> list_data = new ArrayList<HashMap<String, String>>();
        HashMap<String, String> hashTmp = new HashMap<String, String>();

        hashTmp.put("main", "定規");
        hashTmp.put("sub", "Ruler");
        hashTmp.put("right", "長さを測るもの");
        list_data.add(new HashMap<String, String>(hashTmp));

        hashTmp.clear();
        hashTmp.put("main", "ストップウォッチ");
        hashTmp.put("sub", "StopWatch");
        hashTmp.put("right", "時間を計るもの");
        list_data.add(new HashMap<String, String>(hashTmp));

        hashTmp.clear();
        hashTmp.put("main", "体重計");
        hashTmp.put("sub", "WeightScale");
        hashTmp.put("right", "体重を量るもの");
        list_data.add(new HashMap<String, String>(hashTmp));

        SimpleAdapter simp = new SimpleAdapter(getApplicationContext(), list_data, R.layout.two_line_list_item,
                new String[]{"right", "main", "sub"}, new int[]{R.id.item_right, R.id.item_main, R.id.item_sub});

        ((ListView)findViewById(R.id.listView)).setAdapter(simp);
    }
}

処理の流れとしてはまず、データ格納用連想配列リストと、リスト追加用連想配列の作成します。
連想配列リストの1要素がListViewの行に対応しています。

ArrayList<HashMap<String, String>> list_data = new ArrayList<HashMap<String, String>>();
HashMap<String, String> hashTmp = new HashMap<String, String>();

ここで、各ItemのTextViewに対応した値を連想配列にセットして・・・

        hashTmp.put("main", "定規");
        hashTmp.put("sub", "Ruler");
        hashTmp.put("right", "長さを測るもの");
        list_data.add(new HashMap<String, String>(hashTmp));

        hashTmp.clear();
        hashTmp.put("main", "ストップウォッチ");
        hashTmp.put("sub", "StopWatch");
        hashTmp.put("right", "時間を計るもの");
        list_data.add(new HashMap<String, String>(hashTmp));

        hashTmp.clear();
        hashTmp.put("main", "体重計");
        hashTmp.put("sub", "WeightScale");
        hashTmp.put("right", "体重を量るもの");
        list_data.add(new HashMap<String, String>(hashTmp));

この部分で、ListViewのItem用レイアウトを持ったSimpleAdapterを作成しています。
第2引数にデータ用配列リストを渡し、第3引数にListViewのItem用レイアウト、第4と第5引数にデータ用配列リストのキーとItem用レイアウト内TextViewのID対応付けてます。
この例ならばキー:rightなら値をID:item_rightに、キー:mainならID:item_mainに、キー:subならID:item_subへという具合に対応付けています。

        SimpleAdapter simp = new SimpleAdapter(getApplicationContext(), list_data, R.layout.two_line_list_item,
                new String[]{"right", "main", "sub"}, new int[]{R.id.item_right, R.id.item_main, R.id.item_sub});

最後に、ListViewへ作成したアダプタを登録します。

((ListView)findViewById(R.id.listView)).setAdapter(simp);

以上の手順どおりにやると、こんなのができます。
img3

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする