Kotlin ViewPager与Fragment实现一页多状态效果？

一、效果图

二、实现步骤

1.Build中添加引用

//viewpager2
implementation "androidx.viewpager2:viewpager2:1.0.0"
//tab
implementation 'com.google.android.material:material:1.2.1'

2.布局activity_main.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/color_white"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#0361CE"
        android:minHeight="160px">

        <ImageView
            android:id="@+id/img_zhxz_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="20px"
            android:src="@mipmap/img_back"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我负责的"
            android:textSize="20sp"
            android:textColor="@color/color_white"
            android:layout_centerInParent="true"
            android:textStyle="bold"/>

    </RelativeLayout>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/chargeTab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/color_white"
        app:tabSelectedTextColor="@color/colorAccent" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPagerCharge"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:saveEnabled="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


</LinearLayout>

3.加载Fragment的adapter

package com.zdmtech.viewpagerfragmentdemo

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter

class MineChargeAdapter : FragmentStateAdapter {

    private var fragments: List<Fragment>

    constructor(fragmentActivity: FragmentActivity, fragments: List<Fragment>) : super(fragmentActivity) {
        this.fragments = fragments
    }

    constructor(fragment: Fragment, fragments: List<Fragment>) : super(fragment) {
        this.fragments = fragments
    }

    override fun getItemCount(): Int {
        return fragments.size
    }

    override fun createFragment(position: Int): Fragment {
        return fragments[position]
    }
}

4.主Activity

package com.zdmtech.viewpagerfragmentdemo

import android.content.Context
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import com.google.android.material.tabs.TabLayoutMediator
import com.june.wt.charge.CompletedAppointmentFragment
import com.june.wt.charge.CompletedRegisterFragment
import com.zdmtech.viewpagerfragmentdemo.fragment.NoAppointmentFragment
import kotlinx.android.synthetic.main.activity_main.*

/**
 * 主页
 * */
class MainActivity : AppCompatActivity() {
    lateinit var mContext:Context
    val titles = arrayOf("未预约", "已预约", "已登记")
    val fragments = arrayListOf(
        NoAppointmentFragment.instance,
        CompletedAppointmentFragment.instance,
        CompletedRegisterFragment.instance
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        mContext = this
        initView()
        iniDate()
    }

    private fun initView() {

        viewPagerCharge.isSaveEnabled = false
        viewPagerCharge.offscreenPageLimit = 3
        viewPagerCharge.adapter = MineChargeAdapter(this, fragments)
        //创建Fragment上标题
        TabLayoutMediator(
            chargeTab,
            viewPagerCharge,
            TabLayoutMediator.TabConfigurationStrategy { tab, position ->
                tab.text = titles[position]
            }).attach()
    }

    private fun iniDate() {
        img_zhxz_back.setOnClickListener {
            Toast.makeText(mContext ,"返回 " , Toast.LENGTH_SHORT).show()
        }
    }

}

5.其中Fragment其他两种自己定义，我只写一个参考（NoAppointmentFragment）

package com.zdmtech.viewpagerfragmentdemo.fragment

import android.content.Context
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Toast
import androidx.fragment.app.Fragment
import com.zdmtech.viewpagerfragmentdemo.R
import com.zdmtech.viewpagerfragmentdemo.adapter.ChargeListAdapter
import com.zdmtech.viewpagerfragmentdemo.bean.Charge
import kotlinx.android.synthetic.main.fragment_base_charge_list.*

/**
 * 未预约
 * */
class NoAppointmentFragment: Fragment(){

    companion object {
        val instance: NoAppointmentFragment by lazy(mode = LazyThreadSafetyMode.SYNCHRONIZED) {
            NoAppointmentFragment()
        }
    }

    lateinit var chargeListAdapter: ChargeListAdapter
    lateinit var mContext:Context
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        mContext = activity!!
        return inflater.inflate(R.layout.fragment_base_charge_list, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        initView()
        initData()
    }

     fun initView() {
        chargeListAdapter = ChargeListAdapter(mContext)
        rvChargeList.adapter = chargeListAdapter
         chargeListAdapter.contracts = getDates()
    }

     fun initData() {

        chargeListAdapter.setChangeItemClickLisitenner(object :
            ChargeListAdapter.ChargeItemClickLisitenner {
            override fun changeItemLisitenner(position: Int) {
                Toast.makeText(context ,"点击位置position = "+position , Toast.LENGTH_SHORT).show()
            }
        })

    }

    /**
     * 添加测试数据
     * */
    lateinit var chargeList:MutableList<Charge>
    fun getDates():MutableList<Charge>{
        chargeList = mutableListOf()
        var charge = Charge()
        charge.id = 1
        charge.status = 0
        chargeList.add(charge)

        charge = Charge()
        charge.id = 2
        charge.status = 1
        chargeList.add(charge)

        charge = Charge()
        charge.id = 3
        charge.status = 2
        chargeList.add(charge)

        charge = Charge()
        charge.id = 4
        charge.status = 1
        chargeList.add(charge)

        charge = Charge()
        charge.id = 5
        charge.status = 0
        chargeList.add(charge)

        return chargeList
    }

}

其中ChargeListAdapter是Fragment内容Adapter，就先不展示，这个可以根据自己的业务来写

6.自定义内容

<com.google.android.material.tabs.TabLayout
    android:id="@+id/chargeTab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/color_white"
    app:tabSelectedTextColor="@color/colorAccent" />

app:tabSelectedTextColor来定义选中时字体显示的颜色，其他还有一些这样的属性，大家可以逐一试试

Demo