iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Mobile Development

Android 口罩地圖入門實戰 30 天 (使用 Kotlin 程式語言)系列 第 13

Day 13:RecyclerView 基本資料列表顯示

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

程式碼範例

範例名稱: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 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,追蹤喔!也歡迎大家將這篇文章分享給更多人喔。

我們明天再見囉!!!掰掰~


上一篇
Day 12:封裝 OkHttp
下一篇
Day 14:RecyclerView 進階項目佈局
系列文
Android 口罩地圖入門實戰 30 天 (使用 Kotlin 程式語言)30

尚未有邦友留言

立即登入留言