《Android》『TabLayout、ViewPager』- 利用 TabLayout 搭配 ViewPager 實作 Fragment 之頁籤切換

《Android Developers 參考文獻》

➥ViewPager

➥TabLayout

 

《簡單介紹》

在之前我們已經介紹過如何使用 ViewPager 來實作使用者導覽頁面,在這邊,我們同樣要利用 ViewPager 可以儲存多個 View 的特性,搭配一個新的元件叫做 TabLayout,來實作頁籤的點擊與左右滑動切換,其中每個頁籤都代表一個 Fragment,看起來很難,但其實實作起來意外的簡單!

《實作方法》

這邊直接來說明實作方式,首先我們必須在介面佈局檔中加入 ViewPager 以及 TabLayout。

activity_main.xml

接著,我們建立兩個簡單的 Fragment,分別取名為 ViewFragment1 與 ViewFragment2,用來當作我們要放入 ViewPager 中的 Fragment。

ViewFragment1.java

ViewFragment2.java

這邊為了方便,我們將兩個 Fragment 用了相同的介面佈局檔,取名為 fragment_main.xml。

fragment_main.xml

定義好所需的 Fragment 以後,就可以在 MainActivity 中實作啦,程式碼如下 –

MainActivity.java

在 MainActivity 中,我們宣告了名為 mViewPager 與 mTabLaout 的兩個物件,並透過  mViewPager.addOnPageChangeListener() 的方式定義頁面滑動時會觸發的事件,並在其中儲存 lastPosition 的位置(這參數在此範例中沒有作用,但在 Fragment 導向別的頁面時,可以記錄目前頁籤所在位置)。接著,我們宣告了一個繼承 FragmentPagerAdapter 的 Apapter,取名為 ViewPagerAdapter,在這個 Adapter 中自訂了一個 addFragment 方法,用來加入所需的 Fragment 以及頁籤標題資訊,最後再將此 Adapter 設定給 viewPager。

當 viewPager 設定完畢以後,我們才可以將 TabLayout 與 ViewPager 作連動,連動的方式很簡單,直接執行 tabLayout.setupWithViewPager(viewPager) 方法即可。

介面顯示如下 –

device-2016-08-19-115327

賽肥膩膩

我們是低調到不行的肥膩夫妻檔,一路上一邊吵鬧一邊記錄著生活大小事,偶爾一起暴飲暴食再偶爾一起節食減肥,最沒恆心與毅力但一路走來也持續減肥了好幾次,我們重量不重質,所以完全沒有效果也是理所當然的事。

上 / 下一篇文章

臉書留言

一般留言

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *