本篇文章同步發表在 HKT 線上教室 部落格，線上影音教學課程已上架至 Udemy 和 Youtube 頻道。另外，想追蹤更多相關技術資訊，歡迎到 臉書粉絲專頁 按讚追蹤喔～

程式碼範例

範例名稱：RecyclerView 基本資料列表顯示
開發人員：HKT (侯光燦)
程式語言：Kotlin
開發環境：Android Studio 4.1.1 & Android 11 & Kotlin 1.4.21
授權範圍：使用時必須註明出處且不得為商業目的之使用
範例下載點：點我下載

前幾天在 Part 2 介紹當中，我們陸續學習了如何使用主流 OkHttp 與 GSON 處理網路資料，並且串接實際口罩即時庫存公開資料 API，接下來幾天，將要來跟大家介紹，如何使用 RecyclerView 搭配 Adapter 呈現出藥局捲軸滾動式列表資料，大致上規劃，如下：

Day 13：RecyclerView 基本資料列表顯示
Day 14：RecyclerView 進階項目佈局
Day 15：RecyclerView 卡片式項目佈局
Day 16：RecyclerView 跳頁&資料傳遞(1)
Day 17：RecyclerView 跳頁&資料傳遞(2)

當我們要顯示大量多筆項目資料的時候，普遍都是使用 RecyclerView 列表元件。RecyclerView 是傳統 ListView 改善版，除了提高效能，使用上也更加便利與靈活。今天，我們將來介紹，如何使用 RecyclerView 列表元件。

藥局名稱列表頁 Wireframe

一開始，我們只先簡單在列表上，顯示每間藥局名稱。

添加 RecyclerView 依賴庫 (dependencies)

在 GRADLE (Module) 層級 dependencies 內加入：

implementation 'androidx.recyclerview:recyclerview:1.1.0'

自定義 MainAdapter

Adapter 需實作出主要三個方法，分別是 onCreateViewHolder、onBindViewHolder 和 getItemCount ，剛開始學很陌生，可以善用 IDE 提示程式碼功能，當我們繼承 RecyclerView.Adapter ，即可透過 IDE 智慧化提示，迅速補上這三個方法。而其中：

• onCreateViewHolder： 建立我們每個項目的樣式。
• onBindViewHolder： 將資料綁定到我們指定的元件上顯示。
• getItemCount：決定我們這個列表，要顯示幾筆項目。

而我們透過 Kotlin 的 Setter 概念，將我們要顯示的資料指定進來。完整程式碼，可以參考今天範例中的： MainAdapter.kt。

package com.thishkt.pharmacydemo

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.thishkt.pharmacydemo.data.Feature
import com.thishkt.pharmacydemo.databinding.ItemViewBinding


class MainAdapter :
    RecyclerView.Adapter<MainAdapter.MyViewHolder>() {

    var pharmacyList: List<Feature> = emptyList()
        set(value) {
            field = value
            notifyDataSetChanged()
        }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val itemViewBinding =
            ItemViewBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        return MyViewHolder(itemViewBinding)
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        holder.itemViewBinding.tvName.text = pharmacyList[position].properties.name
    }

    override fun getItemCount(): Int {
        return pharmacyList.size
    }

    class MyViewHolder(val itemViewBinding: ItemViewBinding) :
        RecyclerView.ViewHolder(itemViewBinding.root)

}

項目佈局

完整程式碼，可以參考今天範例中的： layout/item_view.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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:text="TextView"
        android:textColor="#424242"
        android:textSize="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

將 RecyclerView 元件添加到佈局中

activity_main.xml 內，移除之前課程介紹的 TextView、ScrollView 元件，加入 RecyclerView 元件。

...
...
...
 <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
...
...
...

設定 RecyclerView

在 MainActivity.kt，設定 RecyclerView 的 manager 和 adapter。

class MainActivity : AppCompatActivity() {

//定義全域變數
private lateinit var viewAdapter: MainAdapter
private lateinit var viewManager: RecyclerView.LayoutManager
private lateinit var binding: ActivityMainBinding


...
...
...

 private fun initView() {
        // 定義 LayoutManager 為 LinearLayoutManager
        viewManager = LinearLayoutManager(this)

        // 自定義 Adapte 為 MainAdapter，稍後再定義 MainAdapter 這個類別
        viewAdapter = MainAdapter()

        // 定義從佈局當中，拿到 recycler_view 元件，
        binding.recyclerView.apply {
            // 透過 kotlin 的 apply 語法糖，設定 LayoutManager 和 Adapter
            layoutManager = viewManager
            adapter = viewAdapter
        }
    }
...
...
...

private fun getPharmacyData() {
...
        runOnUiThread {
            //將下載的口罩資料，指定給 MainAdapter
            viewAdapter.pharmacyList = pharmacyInfo.features

            //關閉忙碌圈圈
            binding.progressBar.visibility = View.GONE
        }
}

...
...
...

輸出結果

RecyleView 更多設定

設定項目固定寬度、高度

設定每個項目寬度、高度固定，可以提高效能，不用每條項目，都要讓系統重新去計算 size。

setHasFixedSize(true)

設定項目分隔線 (divider)

每個項目，加入分隔線，讓每筆資料，視覺感看起來更清楚。

 recycler_view.apply {
 ...
 ...
 ...
    addItemDecoration(
        DividerItemDecoration(
            this@MainActivity,
            DividerItemDecoration.VERTICAL
        )
    )
}

輸出結果

點擊漣漪效果(Ripple Effect)

若想要點擊每個項目，出漣漪波紋效果，需要在項目佈局裡設定 background (背景)。

android:clickable="true"
android:focusable="true"
android:background="?android:attr/selectableItemBackground"

輸出結果

RecyclerView 官方介紹與使用教學

Create a List with RecyclerView
https://developer.android.com/guide/topics/ui/layout/recyclerview

RecyclerView Reference
https://developer.android.com/reference/androidx/recyclerview/widget/RecyclerView

參考資料

HKT 線上教室
https://tw-hkt.blogspot.com/

Freepik
https://www.freepik.com/

Create a List with RecyclerView
https://developer.android.com/guide/topics/ui/layout/recyclerview

RecyclerView Reference
https://developer.android.com/reference/androidx/recyclerview/widget/RecyclerView

Android RecyclerView Sample (Kotlin)
https://github.com/android/views-widgets-samples/tree/master/RecyclerViewKotlin

那今天【iThome 鐵人賽】就介紹到這邊囉～

順帶一提，KT 線上教室，臉書粉絲團，會不定期發佈相關資訊，不想錯過最新資訊，不要忘記來按讚，追蹤喔！也歡迎大家將這篇文章分享給更多人喔。

我們明天再見囉！！！掰掰～