Kotlin安卓开发：Tablayout组件与Viewpage联动

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

就用了Tablayout组件和viewpage组件一起开发了。（起码不用监听手势）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//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>

null

很详细的注释： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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()
        }
    })

null

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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]
    }
}

null

这里有两个注意点：

一个就是fragment的包，有的是v4有的是android默认的！一定要统一。

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

//iwh_tab.setupWithViewPager(iwh_viewPage)//这个使用不可以再使用tababselect监听器

//这个方法，直接实现，vpg与tab绑定，滑动与点选一致，缺点是没有直接用监听器强大。

这句代码和tabselected监听器不可以同时使用（内部一样的原理）

kotlin加油。