前回のmapという「複数のデータを格納する仕組み」を使って
今回は、「simple_list_item_2」で、2行ごとにListViewを表示してみたいと思います。

主な学習のテーマは

■simple_list_item_2
■SimpleAdapter

動画

動画で紹介のSimpleAdapterのAndroidデベロッパーはこちら

コード

▼activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <ListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="1dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

▼MainActivity.kt

package com.example.simplelist2

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ListView
import android.widget.SimpleAdapter

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val lv:ListView =findViewById(R.id.lv)

        //１）データを用意(mapで)
        val data = mutableListOf(
            mapOf("main" to "メイン１" ,"sub" to "サブ１"),
            mapOf("main" to "メイン２" ,"sub" to "サブ２"),
            mapOf("main" to "メイン３" ,"sub" to "サブ３"),
            mapOf("main" to "メイン４" ,"sub" to "サブ４"),
            mapOf("main" to "メイン５" ,"sub" to "サブ５")
        )

        //２）アダプターにセット
        val adapter =SimpleAdapter(
            this,
            data,
            android.R.layout.simple_list_item_2,
            arrayOf("main","sub"),//第2引数のmapのキー(配列)
            intArrayOf(android.R.id.text1,android.R.id.text2)//第3引数のレイアウトのビューのid(int配列)
        )

        //３）リストにセットして表示
        lv.adapter =adapter

    }
}

テキスト

で、コードを書いていく前に
大まかな概念を軽く説明しておきます。
これが前回の1行だけのリスト表示の図です。前々回か。

XMLでListView、
レイアウトは、android先生で用意された1行だけのテンプレート。
list item 1ってやつですね。

で、データを1行ごとに用意して
それをアダプターにまとめると表示される、というものでした。

で、これを踏まえた上で、
今回、同じところと、変更点を整理していきます。

まず１つめの、リストビューは同じなのでそのままでOK.
xmlにListViewって追加するだけです。

②のレイアウトは、前回の1行だけ表示されるlist item1ではなくって
androidStudio先生が用意してくれているlist item 2っていうのを使っていきます。
２を使うと、こういう上下二行のレイアウトを使えます。

で、③ですよ。今回のいわば本丸。
このように１つずつの要素を格納ではなくって、ここで前回のmapを使います。
具体的にはこのように書きます。
（表示）

ちょっと字が小さいんですが、
mapOfでメインのペアと、サブのペアを1セット。
キーto値、キーto値。
これが1セット。

それをどんどん増やしていきますと。
中をもう少しみていくと、
キーの名前は、全部統一。
値を変えていきます。

今回でいうと、
１つめのキーは全てmain、２つめのキーは全てsubで統一します。
キーto値、キーto値。

で、値が１、２、３と変わっていく。
ということです。まあ値は何でもいいんですが、わかりやすくするために数字だけ変更してます。

で、上の行で表示されるのがメインキーの方で、
下の行をサブキーで指定してあげることで
それに関連付けされている値が表示される、という仕組みになっています。

で、これら３つがそろったら
最後の仕上げでアダプターにまとめるわけですが
ここも少し変更があります。

前回、1行だけの時はArrayAdapterというのを使いました

レイアウトやデータが違うと、アダプターもそれに応じて変更してあげる必要があるんですが
今回はSimpleAdapterというアダプターを使います。

前回のArrayAdapterは簡単なTextView のリストを表示するのに適しているんですけれども
SimpleAdapterはmapが使えるので、今回の2行のようなレイアウトを作ることができます。
ちなみにもっとオリジナルにレイアウトを作りたい場合は
ここのアダプターも、独自のカスタムアダプターを作る必要があったりするんですが
まあ今はとりあえず、1行のレイアウトの時にはarrayAdapter。
2行の時にはSimpleAdapter、何故ならmapが使えるから、という理解でOKです。

 

XML

ListViewを追加。詳細は割愛

 

1.mapでデータを用意

データを用意して、アダプターにセットしていきいきましょう。
main ktを開いてください。

書いていくのは、この宣言の続きに書いていきます。

//１）データを用意(mapで)
//２）アダプターにセット

まずはデータの方ですね。
名前をdataとかにしてあげて、
先ほど説明のとおり
mutableListOf()
でリストを用意します。

val data = mutableListOf()

この中にmapで要素を格納していきます。
mapOf()

ここにキーto値、の1ペア、
そしてもう１つ、キーto値、のサブの1ペアを追加していきます。

話を単純にしたいのでこのように書いていきます。
mapOf(“main” to “メイン１” , “sub” to “サブ１”),

mainというキーに対して、値を「メイン１」
もう１つ、subというキーに対して、値を「サブ１」。

あとは、キーは一定で、値だけ変更していきます。

mapOf(“main” to “メイン１” , “sub” to “サブ１”),
mapOf(“main” to “メイン２” , “sub” to “サブ２”),
mapOf(“main” to “メイン３” , “sub” to “サブ３”),
mapOf(“main” to “メイン４” , “sub” to “サブ４”),
mapOf(“main” to “メイン５” , “sub” to “サブ５”),

これでデータが用意できました。

あとは、最後の仕上げ。
アダプターにセットしていきましょう。
今回はSimpleAdapterを使います。

 

２．アダプターにセット

それではアダプターにセットしていきましょう。

まずはvalでadapterという名前を用意してあげて、
SimpleAdapter()
この中にセットしていきます。

で先ほど、デベロッパーのところでチラっと言いましたけど、
今回、引数が５つあります。

これももう、理屈というより、そういう決まりなので
１つ１つ覚えるというより、使いたい時に検索して
同じようなテンプレートがいくつか出てきますので、それを参考に書き換えればOKだと思います。

丸暗記は挫折のもとなんでね。
覚えるんだったら、
「SimpleAdapterはたしか５つくらいあったなー」くらいでOKです。

しかも前半３つはArrayAdapterと一緒です。

  • 第１引数は、この画面、というか、自分自身という意味でthis
  • 第２引数は、Listの入ったデータ名　この場合はdata
  • 第3引数は、レイアウトなので、今回はandroid.R.layout.simple_list_item_2,
  • 第4引数は、第2引数のmapのキーの配列。今回でいうとmainとsubなので
    arrayOf()とかいてあげて、この中に”main” と “sub”
  • 第5引数は、第3引数のレイアウトのビューのidをint配列で用意します。
    //第3引数のレイアウトのビューのid(int配列)
    intArrayOf(android.R.id.text1,android.R.id.text2)

このtext1とかtext2つーのはどっから出てきたんやっつーのを
余談までに紹介しておくと
ctrlを押しながらlist_item_2をクリックするとxmlファイルが確認できます。

でcodeを見てみると、ここにレイアウトが作られていると。
でTextViewが2段用意されてあって、これがレイアウトなんですね。

で、よくよく見ると、idがtext1とtext2で設定されとると。
なのでここには

android.R.id.text1,と
android.R.id.text2を

指定してあげた、という訳になります。

 

あとはListViewにセットして、
ちゃんと2行のレイアウトが表示されるか確認してみましょう。

//３）リストにセットして表示
lv.adapter = adapter

エミュレータを起動します。

 

 

 

    カテゴリー
    プログラミング

    コメントを残す

    前の記事
    【はじめてのKotlinプログラミング(19)】mapOf（２つの情報をセットで管理）
    2021年8月27日
    次の記事
    【はじめてのKotlinプログラミング(21)】ListViewを使った簡単なToDoアプリを作ってみよう
    2021年9月6日