viewPage+tablyout+fragment+kotlin实现首页界面

安卓 viewPage+tablyout+fragment+kotlin实现首页界面（主打一个简单好用）

1.添加依赖

//viewPage2
    implementation("androidx.viewpager2:viewpager2:1.0.0")

2.新建BaseFragment实现懒加载

package com.example.aimo.base

/**
 * @Author: sen.liu
 * @Date: 2023/07/19 19:11
 * @Description:fragment懒加载基类
 */
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import androidx.viewbinding.ViewBinding

abstract class BaseFragment<VB : ViewBinding> : Fragment() {
    private var _binding: VB? = null
    protected val binding: VB
        get() = _binding!!

    private var isViewCreated = false
    private var isDataLoaded = false

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        _binding = getViewBinding(inflater, container)
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        isViewCreated = true
        initView()
        initData()
    }

    override fun onResume() {
        super.onResume()
        if (isViewCreated && !isDataLoaded) {
            loadData()
            isDataLoaded = true
        }
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
        isViewCreated = false
        isDataLoaded = false
    }

    /**
     * 创建并返回ViewBinding实例
     */
    abstract fun getViewBinding(inflater: LayoutInflater, container: ViewGroup?): VB

    /**
     * 初始化View
     *  访问试图元素
     */
    abstract fun initView()

    /**
     * 初始化数据
     */
    abstract fun initData()

    /**
     * 懒加载数据，仅在第一次显示Fragment时调用
     */
    abstract fun loadData()
}

3.新建3个对应的继承BaseFragment的Fragment

。。。。

4.新建ViewPagerAdapter适配器

package com.example.aimo.ui.fragment.adapter

/**
 * @Author: sen.liu
 * @Date: 2023/07/20 10:22
 * @Description:viewPage适配器
 */
import androidx.annotation.DrawableRes
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter

class ViewPagerAdapter(fragmentActivity: FragmentActivity) :
    FragmentStateAdapter(fragmentActivity) {
    private val fragmentList = arrayListOf<Fragment>()
    private val fragmentTitleList = arrayListOf<String>()
    private val fragmentIconList = arrayListOf<Int>()


    fun addFragment(fragment: Fragment, title: String, @DrawableRes icon: Int) {
        fragmentList.add(fragment)
        fragmentTitleList.add(title)
        fragmentIconList.add(icon)
    }

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

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

    fun getFragmentTitle(position: Int): String {
        return fragmentTitleList[position]
    }

    @DrawableRes
    fun getFragmentIcon(position: Int): Int {
        return fragmentIconList[position]
    }
}

在mainActivity中使用

val adapter = ViewPagerAdapter(this)
        adapter.addFragment(MineFragment(), "我的", R.mipmap.main_mine)
        adapter.addFragment(DeviceFragment(), "设备", R.mipmap.main_device)
        adapter.addFragment(MessageFragment(), "消息", R.mipmap.main_message)

        binding.viewpager.adapter = adapter

        //将Viewpage2与TabLayout绑定
        TabLayoutMediator(binding.tabLayout, binding.viewpager) { tab, position ->
            tab.text = adapter.getFragmentTitle(position)
            tab.setIcon(adapter.getFragmentIcon(position))
        }.attach()

activity布局

<?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"
    tools:context=".ui.MainHomeActivity1">
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"/>
    
</androidx.constraintlayout.widget.ConstraintLayout>