【正社員】還元率83%【フリーランス】マージン一律5万円で案件をご紹介させていただきます。 詳細はこちら

【Android】Kotlinで一覧表示をする方法!ListViewやRecyclerViewの使い方を徹底解説

【Android】Kotlinで一覧表示をする方法!ListViewやRecyclerViewの使い方を徹底解説
すだ

みなさまこんにちは〜!
メモリアインクのすだです。

本日は、
KotlinでListViewやRecyclerViewを使ってデータを一覧表示する方法について、実際のコードを用いて解説していきます!

この記事を読んでわかること…
・ListViewとは?
・RecyclerViewとは?
・ListViewやRecyclerViewを使ってデータを一覧表示する方法

ListやArrayなどの配列の使用方法につきましては、以下の記事でご紹介しています!
こちらもぜひご覧ください!

目次

環境

  • Kotlin (ver 1.9.0)
  • Android Studio (Giraffe | 2022.3.1 Patch 3)

ListViewとは?

ListView(リストビュー)は、項目が縦に並んだスクロール可能なリストを表示するためのウィジェットです。

各項目は一定のデータモデルから取得され、通常、テキストや画像などを含むことができます。

ListViewを使ってデータを一覧表示する方法

① まず、ListViewを含むレイアウトを定義します。
res/layout/activity_main.xmlとして以下の内容を作成または編集します。

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

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

</RelativeLayout>

② 次に、ListViewにデータをバインドするためのコードをMainActivityに追加します。
MainActivity.ktファイルを以下のように編集または作成します。

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

        // ListViewのインスタンスを取得
        val listView: ListView = findViewById(R.id.shoppingListView)
        
        // 表示するデータのリスト
        val shoppingItems = listOf("にんじん", "たまねぎ", "じゃがいも", "にく", "カレールー")
        
        // ArrayAdapterを使用してListViewにデータをセット
        val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, shoppingItems)
        listView.adapter = adapter
    }
}

これだけでOKです!

ArrayAdapterとは?

リスト形式のデータ(例えば文字列のリスト)を画面上のリストビュー(ListView)などに簡単に表示するために使用されるヘルパークラスです。

簡単に言うと、「リストデータとビューをつなぐ橋渡し」の役割をしてくれます。

・第一引数には、コンテキスト(アプリケーションやアクティビティの現在の状態に関する情報を含むオブジェクト)
・第二引数には、リストの各アイテムに使用するレイアウトのリソースID
・第三引数には、リスト表示したいデータ


をそれぞれセットしていきます。

android.R.layout.simple_list_item_1というのは、標準で用意されているレイアウトファイルです。

たとえばリスト表示のレイアウト(デザイン)を変更したい場合は、
自作のカスタムファイルを作成して適用させるとよいでしょう!

それでは実際に画面を表示してみましょう!

RecyclerViewとは?

RecyclerView(リサイクラービュー)は、ListViewの進化版とも言えるウィジェットで、より柔軟で効率的な一覧表示が可能です。

特に、大量のデータや複雑なデータ構造を持つリスト、または動的に変更されるリストの表示に適しています。

RecyclerViewを使ってデータを一覧表示する方法

①まずは、プロジェクトのbuild.gradle(Module: app)ファイルに
RecyclerViewライブラリの依存関係を追加します。

dependencies {
    // 他の依存関係と一緒に記述
    implementation 'androidx.recyclerview:recyclerview:1.2.1'
}

res/layout/activity_main.xmlRecyclerViewを配置します。

<?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">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/toDoList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:listitem="@layout/custom_list_layout" />
</androidx.constraintlayout.widget.ConstraintLayout>

tools:listitem="@layout/custom_list_layout"の部分は、リスト表示に適用させるレイアウトファイルを指定してください!

③ ↑で指定したレイアウトファイルをres/layout/custom_list_layout.xmlのように作成します。
これで一覧の各項目に自由にレイアウトを適用させることができます。

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toDoItemText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:textSize="18sp" />

↑他にも、ImageViewを使って画像を配置できるようにしたり などなど使い方は様々です!

④ そして、MyAdapter.ktを作成し、RecyclerViewのためのAdapterとViewHolderを定義します。

class MyAdapter(private val dataSet: List<String>) :
    RecyclerView.Adapter<MyAdapter.ViewHolder>() {

    // 1. ViewHolderクラスの定義
    class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val textView: TextView = view.findViewById(R.id.toDoItemText)
    }

    // 2. 新しいビューを作成
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val shoppingListView = LayoutInflater.from(parent.context).inflate(R.layout.item_view, parent, false)
        return ViewHolder(shoppingListView)
    }

    // 3. ビューの内容を交換(データのバインド)
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.textView.text = dataSet[position]
    }

    // 4. データセットのサイズを返す
    override fun getItemCount() = dataSet.size
}

ViewHolderとは?

アイテムビュー内の各サブビュー(例えばテキストビュー、イメージビューなど)への参照をキャッシュ(保持)してくれるものです。

スクロール中に新しいアイテムが画面に表示されるたびに、そのアイテムのビューをゼロから作成するのは非効率的で、パフォーマンスに悪影響を与えます。

ViewHolderを使用することで、一度作成したビューを再利用し、表示するデータだけを更新することができるのです。

⑤ 最後に、MainActivity.ktRecyclerViewを設定し、データを一覧表示します。

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

        val recyclerView: RecyclerView = findViewById(R.id.toDoList)
        recyclerView.layoutManager = LinearLayoutManager(this)
        recyclerView.adapter = MyAdapter(listOf("そうじ", "せんたく", "かいもの", "ひるね"))
    }
}

recyclerView.layoutManager = LinearLayoutManager(this)について
layoutManagerは、RecyclerView内のアイテムがどのように配置されるかを管理します。LinearLayoutManager(this)を設定することで、アイテムが垂直方向に一列で並ぶリスト形式で表示されるようになります。

recyclerView.adapter = MyAdapter(listOf(...について
Adapterにリストデータを流し込んで、viewに表示できるようにしています。

ListViewよりステップが多いですが、慣れると便利に使えるようになります!
それでは画面に表示してみましょう〜!

まとめ

おつかれさまでした!

一覧表示は、アプリ画面において大変多く採用されるレイアウトですので
ぜひぜひマスターしてくださいね!

すだ

技術者としてのキャリアパスを次のレベルへと進めたい皆様、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
を通じて、
自分の市場価値をさらに向上させてみませんか?

それではまた次の記事でお会いしましょう!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

弊社テックブログをご愛読いただきありがとうございます。
当テックブログを運用している株式会社メモリアインクは、
【正社員】還元率83%
【フリーランス】マージン一律5万円で案件のご紹介
と、エンジニアの皆様に分かりやすい形で稼げる仕組みを構築し提供させていただいております。詳しくは弊社お問い合わせページ、プロフィールのQRコードを読み取り、LINEメッセージでお問い合わせいただけますと幸いです。

コメント

コメント一覧 (1件)

コメントする

目次