【Android 入門開發實戰：口罩地圖】RecyclerView 基本資料列表顯示

 

【Android 入門開發實戰：口罩地圖】線上免費講義課程目錄

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

添加 RecyclerView 依賴庫 (dependencies)

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

implementation 'androidx.recyclerview:recyclerview:1.1.0'

自定義 MainAdapter

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].property.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)

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

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

參考資料

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

程式碼範例

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