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

  |   0 评论   |   0 浏览

由于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>

null

很详细的注释:

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

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加油。


标题:Kotlin安卓开发:Tablayout组件与Viewpage联动
作者:yf_d
地址:看看我的CSDN