Kotlin安卓開發：Tablayout元件與Viewpage關聯

由于android新的api放棄了actionbar的tab模式。

就用了Tablayout元件和viewpage元件一起開發了。（起碼不用監聽手勢）

//tablayout元件：XML檔案

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:background="@color/colorPrimary"
android:layout_width="match_parent"
android:textAlignment="center"
app:tabTextColor="#fff"
android:scrollIndicators="bottom"
android:layout_height="50dp"
android:id="@+id/tab">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:layout_marginTop="2dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/viewPage">

</android.support.v4.view.ViewPager>
</LinearLayout>
           

很詳細的注釋： 

tablayout元件：kotlin

val list_fg = arrayListOf<Fragment>()
//初始一個fglist存放即将加入的fg
val fg_left = iwh_fg_left()//fragment自定的
val fg_center = iwh_fg_center()
val fg_right = iwh_fg_right()

list_fg.add(fg_left)
list_fg.add(fg_center)
list_fg.add(fg_right)
//list_fg數組，添加進viewpage擴充卡
val iwh_tab = findViewById<TabLayout>(R.id.tab)
//tab元件
val iwh_viewPage = findViewById<ViewPager>(R.id.viewPage)
//viewpage元件
//這裡的viewpageAdapter下面有具體的代碼
var iwh_view_page_adapter = iwh_view_page_adapter(supportFragmentManager,list_fg)
//viewpage需要一個adapter，參數一：fragmentM管理，參數二：fg集合
iwh_viewPage.adapter = iwh_view_page_adapter//設定viewpage的adapter
//為viewpage設定adapter
iwh_tab.setSelectedTabIndicatorColor(Color.parseColor("#185639"))
//tab下劃線顔色
iwh_tab.setTabTextColors(Color.WHITE,Color.WHITE)
//tab标題文字顔色
iwh_tab.addTab(iwh_tab.newTab().setText("知識體系"))
//添加tab面闆
iwh_tab.addTab(iwh_tab.newTab().setText("習題冊"))
iwh_tab.addTab(iwh_tab.newTab().setText("知識導圖"))
//iwh_tab.setupWithViewPager(iwh_viewPage)//這個使用不可以再使用tababselect監聽器
//将viewpage與tablayout綁定一起
iwh_tab.addOnTabSelectedListener(object :TabLayout.OnTabSelectedListener{
    override fun onTabSelected(tab: TabLayout.Tab) {
        iwh_tab.getTabAt(tab.position)?.select()
        //當tab被選中，改變tab
        iwh_viewPage.setCurrentItem(tab.position,true)}
        //當tab被選中，改變viewpage實作同步
    override fun onTabReselected(tab: TabLayout.Tab) {}
    override fun onTabUnselected(tab: TabLayout.Tab?) {})

    //viewpage事件監聽器
        iwh_viewPage.addOnPageChangeListener(object :ViewPager.OnPageChangeListener{
            override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {}
            override fun onPageScrollStateChanged(state: Int) {}
            override fun onPageSelected(position: Int) {
                //黨viewpage改變時候，改變對應tab，實作同步
                iwh_tab.getTabAt(position)?.select()
        }
    })
           

viewpage元件的adapter

//繼承fragmentPageAdapter，實作兩個方法
class iwh_view_page_adapter(fm:FragmentManager,fg_list:ArrayList<Fragment>):FragmentPagerAdapter(fm){
private var listFg = arrayListOf<Fragment>()
init {listFg = fg_list}
    override fun getCount(): Int {
        return listFg.size
        //傳回viewpage頁面個數
    }

    override fun getItem(position: Int): Fragment {
        //傳回目前頁面的fragment頁面
        return listFg[position]
    }
}
           

 這裡有兩個注意點：

一個就是fragment的包，有的是v4有的是android預設的！一定要統一。

另一個就是viewpage和tablayout可以直接用：

//iwh_tab.setupWithViewPager(iwh_viewPage)//這個使用不可以再使用tababselect監聽器

//這個方法，直接實作，vpg與tab綁定，滑動與點選一緻，缺點是沒有直接用監聽器強大。

這句代碼和tabselected監聽器不可以同時使用（内部一樣的原理）

kotlin加油。