iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
自我挑戰組

Android Studio 初學者的30天筆記系列 第 13

DAY13:Fragment片段之實作

  • 分享至 

  • xImage
  •  

今天,要來產生Fragment。
首先按File再點選 Kotlin Class/File
https://ithelp.ithome.com.tw/upload/images/20210928/20140488SwsmasOCLI.png
接著取名Fragment的名稱,我是命名為Fragment1並點選Class。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488MUKYdilyaE.png
按下Enter後,則建立完畢。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488Fmw3PmSRZS.png
接著介紹滑頁,它是一種佈局管理元件,透過手勢左右滑動切換頁面,搭配對應的PagerAdapter,來完成滑頁的功能。並且也滑頁這個滑頁,觀察生命週期。
開始吧!
首先,先建立三個fragment的xml檔。
這是第一個activity的xml檔,基本上就是不用用到元件。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488FQqUgFRTqY.png
接著要用fragment1、fragment2、fragment3的畫面,這三個大同小異,用的元件也相對簡單。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488PdmT1Y10Jl.png
那下圖是第二頁,因為處在中間,因此會有向坐或向右兩種選項。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488FNYyUG2WAy.png
https://ithelp.ithome.com.tw/upload/images/20210928/20140488Tl9vh9mKFf.png
第三頁大致與第一頁相同差別在於向左向右的元件擺放。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488bYLbh8YCrR.png
接著我們寫MainActivity、FirstFragment、SecondFragment、ThirdFragment四個主程式碼,並加入log,以利觀察生命週期
首先,MainActivity建立 FragmentPagerAdapter 物件,並且連接 Adapter,使畫面與 ViewPager 建立關聯。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488S4WVR1JWAX.png
https://ithelp.ithome.com.tw/upload/images/20210928/201404885gV6rxNxVK.png
再來是有關FirstFragment、SecondFragment、ThirdFragment這三個,他們的主程式碼幾乎相同,而差別在於需要定義像是FirstFragment的對應畫面為fragment_first關於對應畫面位置的差別而已,包括觀察生命週期也都雷同。
就先放上FirstFragment的主程式碼。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488QSJRYgqdvl.png
https://ithelp.ithome.com.tw/upload/images/20210928/20140488ROa9AeWtMr.png
這麼一來實作便完成了。
下圖為我的第一頁。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488EQAqnD7qJv.png
下圖為從第一頁翻頁到第二頁的過程。
https://ithelp.ithome.com.tw/upload/images/20210928/20140488PoazZsYPzY.png
最後這就是第二頁及第三頁的畫面
https://ithelp.ithome.com.tw/upload/images/20210928/20140488bVUvJjmjpK.png
https://ithelp.ithome.com.tw/upload/images/20210928/20140488QD8UsYPrwz.png
觀察生命週期的部分,我們可以透過開啟下方的工具Locat來觀察。當我們操作程式讓他翻頁時,底下就會出現應用程式詳細的步驟,這樣就能觀察到生命週期囉!
https://ithelp.ithome.com.tw/upload/images/20210928/201404880EJKJXeP5f.png


上一篇
DAY12:Fragment(片段之簡介)
下一篇
DAY14:Toast顯示訊息之簡介
系列文
Android Studio 初學者的30天筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言