iT邦幫忙

2024 iThome 鐵人賽

DAY 23
0

當我們上一篇學完Fragment後,來進階一點的東西,當我們Fragment碰上ViewPager2會是怎樣呢?
它能使我們用滑動的方式來切換Fragment(水平翻頁),且還需要借助Fragment+ViewPager2

基本可以將上次範例拿出來用,如果想新增一個專案也行~


新增

  • 跟之前的做法一樣,新增三個Fragment(Blank),在自己的com.example.檔名 右鍵 > New > Fragment > 點擊 Fragment(Blank)
    https://ithelp.ithome.com.tw/upload/images/20241001/20168454oXjgCUNgcw.png

  • 之後還需要新增一個 Java Class,在自己的com.example.檔名 右鍵 > New > 點擊 Java Class
    https://ithelp.ithome.com.tw/upload/images/20241001/20168454lqXNTRuZN0.png

  • 都用用好後長這樣
    https://ithelp.ithome.com.tw/upload/images/20241001/20168454TXBYulp7Wb.png

Fragment+ViewPager2

  • 佈局是一樣的,利用LinearLayout去調整,但我們上方會上著 viewpager2 (activity_main.xml)
    https://ithelp.ithome.com.tw/upload/images/20241001/20168454kY4mHxqjQX.png
    記得加上id!!

  • MainActivity
    https://ithelp.ithome.com.tw/upload/images/20241001/20168454Fwt5k4RTUi.png
    宣告並綁定viewpager2
    https://ithelp.ithome.com.tw/upload/images/20241001/20168454KBaSOqrjIT.png
    setCurrentItem => 預設顯示哪個Fragment

  • ViewPagerAdapter 第一行打上
    https://ithelp.ithome.com.tw/upload/images/20241001/20168454782QULJ8Un.png

  • 使用我們最喜歡的 快捷鍵Alt + Enter
    (選擇第一個)
    https://ithelp.ithome.com.tw/upload/images/20241001/201684547zZqYlAVig.png
    (選擇OK)
    https://ithelp.ithome.com.tw/upload/images/20241001/20168454FmLHEI1QhN.png

  • 再一次 快捷鍵Alt + Enter
    https://ithelp.ithome.com.tw/upload/images/20241001/20168454UmDG0y6I62.png
    (選擇第一個)
    https://ithelp.ithome.com.tw/upload/images/20241001/20168454lscQZrV60L.png
    (選擇OK)
    https://ithelp.ithome.com.tw/upload/images/20241001/20168454be3KzwlpLM.png

  • 基本ViewPagerAdapter架構大概長這樣
    https://ithelp.ithome.com.tw/upload/images/20241001/201684547JilKd5Afa.png

  • ViewPagerAdapter
    https://ithelp.ithome.com.tw/upload/images/20241001/20168454gRchRVOBuo.png
    createFragment => 根據position去創建Fragment
    https://ithelp.ithome.com.tw/upload/images/20241001/201684542OaOshzp6g.png
    getItemCount => 回傳有多少個Fragment

  • Fragment(三個Fragment跟之前一樣,裡面程式碼也介紹過了,想了解的可以去上一篇看看~)
    https://ithelp.ithome.com.tw/upload/images/20241001/20168454Lnl2z7Bn8m.png

實行畫面

(剛開始)
https://ithelp.ithome.com.tw/upload/images/20241001/20168454rya8kCoMFk.png

(滑動ing)
https://ithelp.ithome.com.tw/upload/images/20241001/20168454Nhh1yxFasz.png

(滑動完)
https://ithelp.ithome.com.tw/upload/images/20241001/20168454ORg0teezEX.png

下即預告一下~ 下一章我們來認識TabLayout,看看它是如何運用在Fragment+ViewPager2上的,今天先這樣下次見(*^-^)


上一篇
元件篇-Fragment Day22
下一篇
元件篇-TabLayout Day24
系列文
Android 元件總動員 - 運用與實踐元件指南30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言