Kotlin笔记(53) — ViewPager+Fragmen

前言

在Android开发过程中，我们经常会遇到ViewPager+Fragment的模式，那么今天就让我们来学习下Kotlin中ViewPager+Fragment的简单使用吧。

今天涉及知识点有：

1. Fragment简介
2. ViewPager+Fragment的使用
3. 效果图和项目结构图
4. 适配器FragmentAdapter源码

先来波效果图

效果图.gif

一. Fragment简介

Fragment简称碎片，隶属于Activity下面的一个单元，拥有自己的生命周期。关于Fragment自身更多细节的东西，之前也讲过，这里就大致说些需要注意的点吧。

• 要加载Fragment的话，一般情况下我们用FragmentActivity加载，其实AppCompatActivity加载也是可以的
• kotlin虽然对Activity及适配器中的控件初始化做了优化，但是在Fragment中的控件初始化还是得用findViewById
• ViewPager+Fragment在Activity中使用的时候，需要用到适配器，而这个自定义的适配器需要继承自FragmentStatePagerAdapter

需要注意的是 FragmentActivity是Activity的子类,而AppCompatActivity 又是 FragmentActivity的子类。

二.ViewPager+Fragment的使用

先是写一个MainActivity继承自AppCompatActivity，然后在其对应的布局文件activity_main.xml中加上ViewPager控件，下面贴出activity_main.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/color_f2f2f2"
    tools:context=".ui.MainActivity">

    <TextView
        android:id="@+id/mTvTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:gravity="center"
        android:text="测试"
        android:textColor="@color/black"
        android:textSize="16sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/mBtnTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAllCaps="false"
        android:layout_marginTop="10dp"
        android:text="kotlin显示dialog"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mTvTest"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/mViewPager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mBtnTest"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginTop="10dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>

然后写两个Fragment:FragmentOne和FragmentTwo,为了展示效果，两个Fragment其实是一样的，下面以FragmentOne为例进行讲解。
下面贴出FragmentOne代码：

open class FragmentOne : Fragment() {

    private var mContext: Context?=null
    private var mLayoutView:View?=null

    private var mTitle: TextView?=null

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        mContext=activity
        mLayoutView=inflater.inflate(R.layout.recycler_item,container,false)

        //初始化控件
        initView()

        return mLayoutView
    }

    /**初始化控件**/
    private fun initView(){
        mTitle=mLayoutView!!.findViewById(R.id.mTitle)

        //fragment通过arguments获取参数
        if(arguments!=null){
            var message: String = arguments!!.getString("message", "无数据")
            mTitle!!.text="FragmentOne$message"
        }
    }

    //伴生对象获取碎片实例
    companion object{
       fun newIncstance(message:String): FragmentOne {
           var fragment:FragmentOne=FragmentOne()
           var bundle:Bundle= Bundle()
           bundle.putString("message",message)
           fragment.arguments=bundle
           return fragment
       }
    }
   
}

这里需要注意的是，我们会用伴生对象来生成一个帮助跳转的fragment,然后fragment中控件初始化的时候是要用findViewById的。fragment中接收上传值的时候，是用arguments参数梳理的，类似如下：

        //fragment通过arguments获取参数
        if(arguments!=null){
            var message: String = arguments!!.getString("message", "无数据")
            mTitle!!.text="FragmentOne$message"
        }

接着贴出FragmentOne对应的布局文件recycler_item.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:id="@+id/mContentView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/mTitle"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:layout_marginBottom="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:gravity="center"
        android:textSize="20dp"
        android:textColor="#434343"
        tools:text="测试一下"/>
</androidx.constraintlayout.widget.ConstraintLayout>

一切准备就绪后，下面看看Fragment+viewPager在MainActivity中使用的代码：

open class MainActivity : AppCompatActivity(), View.OnClickListener {

    private var mTitles:MutableList<String> = arrayListOf("好人","坏人")
    private var mFragmentList:MutableList<Fragment> = arrayListOf()
    private var mFragmentAdapter: FragmentAdapter?=null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        initData()
        setListener()
    }

    private fun initData() {
        var fragmentOne:FragmentOne = FragmentOne.newIncstance(mTitles[0])
        var fragmentTwo:FragmentTwo = FragmentTwo.newIncstance(mTitles[1])
        mFragmentList.add(fragmentOne)
        mFragmentList.add(fragmentTwo)

        mFragmentAdapter= FragmentAdapter(supportFragmentManager,mFragmentList)
        mViewPager.currentItem=0
        mViewPager.adapter=mFragmentAdapter
    }

    private fun setListener(){
        mBtnTest.setOnClickListener(this@MainActivity)
    }

    override fun onClick(v: View) {
        when (v.id) {
            R.id.mBtnTest -> {

            }
        }
    }
}

三. 效果图和项目结构图

效果图.gif 项目结构图.png

四. 适配器FragmentAdapter源码

下面贴出适配器FragmentAdapter源码：