[Android Studio] ListViewで自作レイアウトを使用する

どうも、tatsuです!

今日は、ListViewで自作レイアウトを使用する方法を説明します。

※この記事で使用しているAndroid Studioのバージョンは2.3.3です。

ListViewで自作レイアウトを使用する

今回は、以下のようなレイアウトを作っていきます。

自作レイアウトの作成

画面左のプロジェクトウィンドウからlayoutフォルダを右クリックして、[New]→[Layout resource file]を選択して、次のようなファイルを作成します。

custom_list_layout.xmlは以下のようにします。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/mainText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="メインテキスト"
            android:textSize="30sp"/>

        <TextView
            android:id="@+id/subText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="サブテキスト"
            android:textSize="20sp"
            android:paddingLeft="20dp"/>
    </LinearLayout>

    <TextView
        android:id="@+id/description"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="説明がここに表示される~~~~~"/>

</LinearLayout>

activity_main.xml

activity_main.xmlは以下のようにします。

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

MainActivity.java

MainActivity.javaは以下のようにします。

public class MainActivity extends AppCompatActivity {

    // newNoodleの1-30が追加されたかどうかのフラグ true:追加された false:まだ追加されてない
    boolean newNoodleAddFlag = false;

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

        // ListViewに表示する項目を生成
        ArrayList<HashMap<String, String>> listData = new ArrayList<>();
        for(int i = 1; i <=  5; i++){
            HashMap<String,String> data = new HashMap<>();
            // 引数には、(名前,実際の値)という組合せで指定します 名前はSimpleAdapterの引数で使用します
            data.put("main","メイン"+i);
            data.put("sub","サブサブサブ"+i);
            data.put("des","説明説明説明説明説明説明説明"+i);
            listData.add(data);
        }

        /**
         * Adapterを生成
         * R.layout.custom_list_layout : リストビュー自身のレイアウト。今回は自作。
         * new String[]{"main","sub","des"} : 受け渡し元項目名
         * new int[]{R.id.mainText, R.id.subText, R.id.description} : 受け渡し先ID
         */
        SimpleAdapter simpleAdapter = new SimpleAdapter(this,
                listData, // 使用するデータ
                R.layout.custom_list_layout, // 自作したレイアウト
                new String[]{"main","sub","des"}, // どの項目を
                new int[]{R.id.mainText, R.id.subText, R.id.description} // どのidの項目に入れるか
        );

        // idがlistのListViewを取得
        ListView listView = (ListView) findViewById(R.id.list);
        listView.setAdapter(simpleAdapter);
    }

}

結果

補足
今回のようにテキストだけを使用する場合はsimpleAdapterを使用するだけでよいのですが、以下のような場合はレイアウトの他にAdapterも自作する必要があります。

  • 画像を入れたい場合
  • Mapではなく独自のクラスを使用したい

その方法はこちらの記事を参照してください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です