android TabLayout与ViewPager的结合使用（类似今日头条的首页滑动）

两者结合使用的效果

上边的分类块滑动的时候，下面的viewpager 也跟着切换，下面的viewPager滑动，上面的分类也随着变。

下面代码的实现效果

实现

这里就简单的实现相应功能。

1. 写布局

对应的布局文件：activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

   <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        app:tabMode="scrollable"
        app:tabBackground="@color/orange"
         />
<!--app:tabMode="scrollable"；当活动块过多的时候可以滑动
app:tabBackground="@color/orange":设置tab背景颜色-->

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/purple_500" />
</LinearLayout>

2、进行绑定
MainActivity.kt

package edu.swpu.se2018.ylq.tablayoutwithviewpagerdemo

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.viewpager.widget.ViewPager
import com.google.android.material.tabs.TabLayout

class MainActivity : AppCompatActivity() {
    private var mTabLayout: TabLayout? = null
    private var mViewPager: ViewPager? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        mTabLayout = findViewById(R.id.tabLayout)
        mViewPager = findViewById(R.id.viewPager)
        //展示的数据
        val fruitList = listOf("苹果","云莓","山楂","梨橘子","砂糖桔",
            "橙子","柠檬","青柠","黑莓","草莓")
        //1、将TabLayout 和 ViewPager 进行关联
        mTabLayout!!.setupWithViewPager(mViewPager)
        //2、为viewpager设置适配器
        val testViewPagerAdapter = TestViewPagerAdapter(supportFragmentManager)
        //设置数据
        testViewPagerAdapter.setData(fruitList)
        mViewPager!!.adapter = testViewPagerAdapter
    }
}

3、创建viewPager适配器
TestViewPagerAdapter.kt

class TestViewPagerAdapter(fm:FragmentManager): FragmentPagerAdapter(fm,BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT){

    val titleList = ArrayList<String>()

    //返回viewpager的页面个数：这里每一个字符串对应一个页面
    override fun getCount(): Int {
        return titleList.size
    }

    //设置页面的标题，这里会显示到tabLayout中
    override fun getPageTitle(position: Int): CharSequence? {
        return titleList[position]
    }

    //返回一个fragment用于展示
    override fun getItem(position: Int): Fragment {
        return  TestFragment(titleList[position])
    }

    //自己创建的一个方法：设置数据
    fun setData(list: List<String>) {
        titleList.clear()
        titleList.addAll(list)
        notifyDataSetChanged()
    }
}

这里使用的适配器是继承与FragmentPagerAdapter的，因此需要在getItem方法返回一个Fragment。
4、创建要展示的fragment
TestFragemnt.kt

class TestFragment(private val title: String) :Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val titleTv = TextView(requireContext())
        titleTv.text = title
        titleTv.gravity = Gravity.CENTER
        titleTv.textSize = 30f
        return titleTv
    }
}

因为只是展示这里就做的很简单，创建fragment时直接传入String就展示了。

这就要我们就完成了。

注意

因为这里主要是演示他们两的使用，还有其他东西可以拓展的。简单记录一下。
不喜勿喷。。。。