iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Mobile Development

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

Day 16:RecyclerView 跳頁&資料傳遞(1)

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

程式碼範例

範例名稱:基本跳頁和資料傳遞
開發人員:HKT (侯光燦)
程式語言:Kotlin
開發環境:Android Studio 4.1.2 & Android 11 & Kotlin 1.4.21
授權範圍:使用時必須註明出處且不得為商業目的之使用
範例下載點:點我下載

今天我們將要來學習,如何建立當點擊列表中的項目事件時,將資料傳遞到下一頁「藥局詳細資訊頁」。

列表項目設定id值

當點我們想要操作 UI 元件,我們需要將此元件設定 id 值,如此一來,我們等一下就可以透過這個 id 來控制處理此 UI 元件。

    ...
    ...
    ...
  <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/layout_item"
      ...
      >
    ...
    ...
    ...

新建空白 Activity

在專案總管上,按右鍵點選,選擇「New」->「Activity」->「Empty Activity」,檔名為:PharmacyDetailActivity。此 Activity 頁面,將設定為「藥局詳細資訊頁」。

加入 CallBack 介面

在 MainAdapter.kt,定義 CallBack 介面

 interface IItemClickListener {
        fun onItemClickListener(data: Feature)
    }

然後繼續在 MainAdapter.kt,卡片 UI 上加入監聽點擊事件,並在事件中加入CallBack 回傳當下項目資料。

...
...
...

override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
...
...
...

 holder.itemViewBinding.layoutItem.setOnClickListener {
            itemClickListener.onItemClickListener(pharmacyList[position])
        }
}

...
...
...

接著 MainAdapter 加入 CallBack 參數

class MainAdapter(private val itemClickListener: IItemClickListener) :
   ... {
...
...
...
    }

所以 MainActivity 會去實作這個 CallBack,並在收到回呼時,透過 Intent 執行跳頁並傳遞該筆藥局資料,到下一頁,藥局詳細資訊頁。

class MainActivity : AppCompatActivity(), MainAdapter.IItemClickListener {
...
...
...
viewAdapter = MainAdapter(this)
...
...
...
 override fun onItemClickListener(data: Feature) {
        val intent = Intent(this, PharmacyDetailActivity::class.java)
        intent.putExtra("data",data)
        startActivity(intent)
    }
}

這時 data 會報錯,所以我們需要將要傳遞過的資料類別 PharmacyInfo.kt,宣告為序列化(Serializable)即可。

data class PharmacyInfo(
    ...
):Serializable

data class Feature(
    ...
):Serializable

data class Geometry(
    ...
):Serializable

data class Properties(
    ...
):Serializable

藥局詳細資訊頁

PharmacyDetailActivity.kt ,今天「藥局詳細資訊頁」,我們只是先簡單,去接收解析前一頁,傳遞過來的資料,當收到時,使用 Log 方式,在 IDE 下方的 Loacat 輸出資訊視窗,即可以看到印出該間藥局名稱。

//獲取
private val data by lazy { intent.getSerializableExtra("data") as Feature }
...
...
...
//印出資料
Log.d("HKT", "藥局名稱:${data.property.name}")

輸出結果

看點到哪一張卡片,就會印出該間藥局的名稱。

藥局名稱:黃藥局

萬惡錯誤 NullPointerException

但假設資料,沒有正確傳遞過來,將會引起 Caused by: java.lang.NullPointerException 造成 APP 不可預期閃退,所以需要再修改一下,確保資料為空時,仍可以正常顯示。

private val data by lazy { intent.getSerializableExtra("data") as? Feature }
...
...
...
val name = data?.property?.name
Log.d("HKT", "藥局名稱:${name ?: "資料錯誤"}")

其中 「as Feature」,是指強行將資料轉換成 Feature。「as? Feature」,as 後面多一個問號,是確保資料不為空才進行轉換。

參考資料

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

Freepik
https://www.freepik.com/


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

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

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


上一篇
Day 15:RecyclerView 卡片式項目佈局
下一篇
Day 17:RecyclerView 跳頁&資料傳遞(2)
系列文
Android 口罩地圖入門實戰 30 天 (使用 Kotlin 程式語言)30

尚未有邦友留言

立即登入留言