【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
授權範圍：使用時必須註明出處且不得為商業目的之使用
範例下載點：點我下載
