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

2016/12/5 Android, Java, XML, プログラミング, 備忘録, 開発


Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700

Warning: Invalid argument supplied for foreach() in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700

Warning: Invalid argument supplied for foreach() in /home/neginium/www/amimilab/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

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);
    }
}

処理の流れとしてはまず、データ格納用連想配列リストと、リスト追加用連想配列の作成します。
連想配列リストの１要素が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を作成しています。
第２引数にデータ用配列リストを渡し、第３引数にListViewのItem用レイアウト、第４と第５引数にデータ用配列リストのキーと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

スポンサーリンク

シェアする

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

フォローする

negi