【Kotlin基礎】ListViewで項目を一覧表示させる方法を解説

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <ListView
       android:id="@+id/list_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />
</LinearLayout>

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   // 配列の生成
   val array = arrayOf("リスト１", "リスト２", "リスト３", "リスト４", "リスト５")

   // xmlにて実装したListViewの取得
   val listView = findViewById<ListView>(R.id.list_view)

   // ArrayAdapterの生成
   val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, array)

   // ListViewに、生成したAdapterを設定
   listView.adapter = adapter
}

/**
* Constructor. This constructor will result in the underlying data collection being
* immutable, so methods such as {@link #clear()} will throw an exception.
*
* @param context The current context.
* @param resource The resource ID for a layout file containing a TextView to use when
*                 instantiating views.
* @param objects The objects to represent in the ListView.
*/
public ArrayAdapter(@NonNull Context context, @LayoutRes int resource, @NonNull T[] objects) {
   this(context, resource, 0, Arrays.asList(objects));
}

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   val array = arrayOf("リスト１", "リスト２", "リスト３", "リスト４", "リスト５")

   val listView = findViewById<ListView>(R.id.list_view)
   val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, array)
   listView.adapter = adapter

   // OnItemClickListenerを実装
   listView.setOnItemClickListener { parent, view, position, id ->
       Toast.makeText(this, array[position], Toast.LENGTH_SHORT).show()
   }
}

data class Animal(
   val name: String,
   val age: Int,
   val imageId: Int
)

class CustomAdapter(context: Context, var mAnimalList: List<Animal>) : ArrayAdapter<Animal>(context, 0, mAnimalList) {

   private val layoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

   override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
       // Animalの取得
       val animal = mAnimalList[position]

       // レイアウトの設定
       var view = convertView
       if (convertView == null) {
           view = layoutInflater.inflate(R.layout.list_item, parent, false)
       }

       // 各Viewの設定
       val imageView = view?.findViewById<ImageView>(R.id.image)
       imageView?.setImageResource(animal.imageId)

       val name = view?.findViewById<TextView>(R.id.name)
       name?.text = animal.name

       val age = view?.findViewById<TextView>(R.id.age)
       age?.text = "${animal.age} 才"

       return view!!
   }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:padding="12dp">

   <ImageView
       android:id="@+id/image"
       android:layout_width="60dp"
       android:layout_height="match_parent" />

   <LinearLayout
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_weight="1"
       android:orientation="vertical"
       android:layout_marginStart="16dp">

       <TextView
           android:id="@+id/name"
           android:textColor="#000000"
           android:textSize="18sp"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_marginBottom="4dp" />

       <TextView
           android:id="@+id/age"
           android:textColor="#000000"
           android:textSize="18sp"
           android:layout_width="match_parent"
           android:layout_height="wrap_content" />

   </LinearLayout>

   <Button
       android:id="@+id/button"
       android:text="追加"
       android:layout_width="60dp"
       android:layout_height="wrap_content" />
</LinearLayout>

class MainActivity : AppCompatActivity() {

   lateinit var mCustomAdapter: CustomAdapter
   lateinit var mAnimalList: ArrayList<Animal>

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)

       // データ一覧の実装
       val dog = Animal("イヌ", 3, R.drawable.dog)
       val cat = Animal("ネコ", 2, R.drawable.cat)
       val elephant = Animal("ゾウ", 10, R.drawable.elephant)
       val horse = Animal("ウマ", 4, R.drawable.horse)
       val lion = Animal("ライオン", 6, R.drawable.lion)
       mAnimalList = arrayListOf(dog, cat, elephant, horse, lion)

       val listView = findViewById<ListView>(R.id.list_view)

       // CustomAdapterの生成と設定
       mCustomAdapter = CustomAdapter(this, mAnimalList)
       listView.adapter = mCustomAdapter
   }
}

// interfaceの実装
interface CustomAdapterListener {
   fun clicked(animal: Animal)
}

class CustomAdapter(context: Context, var mAnimalList: List<Animal>, val listener: CustomAdapterListener) : ArrayAdapter<Animal>(context, 0, mAnimalList) {

   (省略)

   override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
       (省略)

       val button = view?.findViewById<Button>(R.id.button)
       button?.setOnClickListener {
           listener.clicked(animal)
       }

       return view!!
   }

   // リスト更新用の関数を実装
   fun updateAnimalList(animalList: List<Animal>) {
       mAnimalList = animalList
       // 再描画
       notifyDataSetChanged()
   }
}

// CustomAdapterListenerをimplementする
class MainActivity : AppCompatActivity(), CustomAdapterListener {

   (省略)

   override fun onCreate(savedInstanceState: Bundle?) {
       (省略)

       val listView = findViewById<ListView>(R.id.list_view)
       // MainActivity自身をListenerとして渡す
       mCustomAdapter = CustomAdapter(this, mAnimalList, this)
       listView.adapter = mCustomAdapter
   }

   // 追加ボタンがタップされたら呼ばれる
   override fun clicked(animal: Animal) {
       mAnimalList.add(animal)

       // CustomAdapterに実装したリスト更新用の関数を呼ぶ
       mCustomAdapter.updateAnimalList(mAnimalList)
   }
}