Andorid之TabLayout+ViewPager

前言

TabLayout+ViewPager功能需求已经是常见功能了，我就不多解释了，需要的自取。

一、效果图

二、使用步骤

1.主xml布局

代码如下（示例）：

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

    <include layout="@layout/title_hslayout" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="44dp"
        android:background="#ffFFE7CB"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:src="@mipmap/ico_xlb" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:text="请勿恶意提交订单，被举报核实将面临封号封设备处罚！"
            android:textColor="#ff981c"
            android:textSize="13dp" />
    </LinearLayout>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:overScrollMode="never"
        app:tabIndicator="@mipmap/ico_jdt"
        app:tabIndicatorColor="#02C7AB"
        app:tabIndicatorFullWidth="false"
        app:tabMode="fixed"
        app:tabIndicatorHeight="4dp"
        app:tabRippleColor="@null"
        app:tabSelectedTextColor="#02C7AB"
        app:tabTextAppearance="@style/TabLayoutTextStyleys"
        app:tabTextColor="#66061C1A"></com.google.android.material.tabs.TabLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:overScrollMode="never" />
</LinearLayout>

2.activity代码

这里需要注意的是继承FragmentActivity()。

class MyTask : FragmentActivity(), View.OnClickListener {
    private lateinit var imag_fh: ImageView
    private lateinit var text_title: TextView
    private lateinit var tablayout: TabLayout
    private lateinit var viewpager: ViewPager
    private lateinit var titlelist: List<String>
    private lateinit var fragments: MutableList<Fragment>
    private lateinit var adapter: MyTaskAdapter
    private lateinit var message: String

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //去掉状态栏
        if (Build.VERSION.SDK_INT >= 21) {
            val decorView = window.decorView
            val option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
            decorView.systemUiVisibility = option
            window.statusBarColor = Color.parseColor("#00000000")
        }
        setContentView(R.layout.mytask)
        initView()
    }

    fun initView() {
        fragments = mutableListOf()
        imag_fh = findViewById(R.id.imag_fh)
        text_title = findViewById(R.id.text_title)
        text_title.text = "我的任务"
        tablayout = findViewById(R.id.tablayout)
        viewpager = findViewById(R.id.viewpager)
        titlelist = listOf(
            "待提交",
            "审核中",
            "已通过",
            "未通过",
            "复审中"
        )
        for (i in titlelist.indices) {
            val fragment = MyTaskFragment()
            fragments.add(fragment)
        }
        adapter =
            MyTaskAdapter(
                fragments,
                titlelist,
                supportFragmentManager,
                this@MyTask
            )
        viewpager.adapter = adapter
        tablayout.setupWithViewPager(viewpager)
        tablayout.setSelectedTabIndicatorFixWidth(60f)
        tablayout.setSelectedTabIndicatorFixWidth(60f)
        //让tab充满屏幕
//        tablayout.tabMode = TabLayout.MODE_FIXED;
//        tablayout.tabGravity = TabLayout.GRAVITY_FILL;
        tablayout.addOnTabSelectedListener(object :
            TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab?) {
                handlerTabLayoutBold(tab, true)
            }

            override fun onTabUnselected(tab: TabLayout.Tab?) {
                handlerTabLayoutBold(tab, false)
            }

            override fun onTabReselected(tab: TabLayout.Tab?) {
            }
        })
        for (i in 0 until tablayout.tabCount) {
            val tab: TabLayout.Tab? = tablayout.getTabAt(i)
            if (tab != null) {
                tab.view.isLongClickable = false
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
                    tab.view.tooltipText = null // 或者设置空字符串 ""
                }
            }
        }
        imag_fh.setOnClickListener(this)
    }

    override fun onClick(v: View?) {
        when (v?.id) {
            R.id.imag_fh -> finish()
        }
    }

    /**
     * 设置指示符固定宽度
     */
    fun TabLayout.setSelectedTabIndicatorFixWidth(width: Float) {
        setSelectedTabIndicator(object : DrawableWrapper(tabSelectedIndicator) {
            override fun setBounds(left: Int, top: Int, right: Int, bottom: Int) {
                var realLeft = left
                var realRight = right
                if ((right - left).toFloat() != width) {
                    val center = left + (right - left).toFloat() / 2
                    realLeft = (center - width / 2).toInt()
                    realRight = (center + width / 2).toInt()
                }
                super.setBounds(realLeft, top, realRight, bottom)
            }
        })
    }

    /** 修改单独某一个的粗细*/
    fun handlerTabLayoutBold(tab: TabLayout.Tab?, isBold: Boolean) {
        tab?.view?.forEach { view ->
            if (view is TextView) {
                if (isBold) {
                    view.typeface = Typeface.DEFAULT_BOLD
                } else {
                    view.typeface = Typeface.DEFAULT
                }
            }
        }
    }
}

3.MyTaskFragment代码

/**
 * @Author : CaoLiulang
 * @Time : 2025/5/10 11:27
 * @Description :待提交fragment
 */
class MyTaskFragment() : Fragment(), OnClickListener {

    private var rootView: View? = null
    private var firstLoad = false
    private var isKeyboardVisible = false
    private lateinit var fbrefresh: SmartRefreshLayout//刷新
    private lateinit var clssheader: ClassicsHeader//刷新头
    private lateinit var classicsfooter: ClassicsFooter//加载
    private var pageNum = 1
    private lateinit var list_view: RecyclerView
    private lateinit var adapter: MyYSAdapter1
    private lateinit var list: MutableList<String>

    @Nullable
    override fun onCreateView(
        inflater: LayoutInflater,
        @Nullable container: ViewGroup?,
        @Nullable savedInstanceState: Bundle?
    ): View? {
        firstLoad = true//视图创建完成，将变量置为true
        rootView = inflater.inflate(R.layout.mytaskfragment, container, false)
        return rootView
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        list = mutableListOf()
        for (i in 1..10) {
            list.add("任务名称$i")
        }
        clssheader = ClassicsHeader(requireActivity())
        classicsfooter = ClassicsFooter(requireActivity())
        fbrefresh = rootView!!.findViewById(R.id.fbrefresh)
        fbrefresh.isEnableRefresh = true //是否启用下拉刷新
        fbrefresh.isEnableLoadMore = true //是否启用上拉加载功能
        //刷新
        fbrefresh.setOnRefreshListener {
            pageNum = 1
        }
        //加载
        fbrefresh.setOnLoadMoreListener {
            pageNum++
        }
        list_view = rootView!!.findViewById(R.id.list_view)
        list_view.layoutManager = LinearLayoutManager(
            requireActivity(),
            LinearLayoutManager.VERTICAL,
            false
        ) //竖向显示
        adapter = MyYSAdapter1(list, requireActivity())
        list_view.adapter = adapter
        if (userVisibleHint) {//判断Fragment是否可见
            firstLoad = false//将变量置为false
        }
    }

    override fun onDestroyView() {
        super.onDestroyView()
        firstLoad = false //视图销毁将变量置为false
    }

    override fun setUserVisibleHint(isVisibleToUser: Boolean) {
        super.setUserVisibleHint(isVisibleToUser)
        if (firstLoad && isVisibleToUser) { //视图变为可见并且是第一次加载
            firstLoad = false
        }
    }

    override fun onDestroy() {
        super.onDestroy()
    }

    override fun onClick(v: View?) {
        when (v?.id) {
        }
    }

}

4.MyTaskFragment的xml布局

这里我加了分页刷新，自己看是否需要。

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

    <com.scwang.smartrefresh.layout.SmartRefreshLayout
        android:id="@+id/fbrefresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="12dp"
        android:layout_marginRight="5dp"
        android:layout_marginBottom="12dp"
        app:srlEnableLoadMoreWhenContentNotFull="false">

        <com.hzwl.aidigital.utils.ClassicsHeader
            android:id="@+id/clssheader"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/list_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:overScrollMode="never" />


        <com.hzwl.aidigital.utils.ClassicsFooter
            android:id="@+id/classicsfooter"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </com.scwang.smartrefresh.layout.SmartRefreshLayout>

</LinearLayout>

5.Adapter代码

public class MyYSAdapter1 extends RecyclerView.Adapter<MyYSAdapter1.ViewHolder> {
    private List<String> list;
    private Context context;


    public MyYSAdapter1(List<String> list, Context context) {
        this.list = list;
        this.context = context;
    }

    /**
     * 加载更多
     *
     * @param mPageList
     */
    public void setData(List<String> mPageList) {
        try {
            if (mPageList != null) {
                int previousSize = 0;
                try {
                    previousSize = list.size();
                } catch (Exception e) {
                    previousSize = 0;
                }
                int sizez = previousSize + 2;
                list.addAll(mPageList);
                notifyItemRangeInserted(sizez, mPageList.size());
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.mytaskfragment_item, parent, false);
        ViewHolder viewHolder = new ViewHolder(view);
        return viewHolder;
    }

    /**
     * 类似GetView
     *
     * @param holder
     * @param position
     */
    @Override
    public void onBindViewHolder(final ViewHolder holder, @SuppressLint("RecyclerView") final int position) {
        holder.text_name.setText(list.get(position));
    }

    //添加元素,需要告诉UI线程布局的变动
    public void update() {
        notifyDataSetChanged();
    }

    /**
     * 长度
     *
     * @return
     */
    @Override
    public int getItemCount() {
        return list.size();
    }

    /**
     * 初始化组件
     */
    class ViewHolder extends RecyclerView.ViewHolder {
        TextView text_name;

        public ViewHolder(final View itemView) {
            super(itemView);
            text_name = itemView.findViewById(R.id.text_name);
        }
    }
}

6.item布局

<?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="wrap_content"
    android:background="@color/backColor"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="5dp"
        android:background="@drawable/bzhs_fff_10">

        <RelativeLayout
            android:id="@+id/relative_top"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp">

            <ImageView
                android:id="@+id/iamg_tp"
                android:layout_width="56dp"
                android:layout_height="56dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="15dp"
                android:src="@mipmap/ico_hometb" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="11dp"
                android:layout_marginRight="11dp"
                android:layout_toRightOf="@+id/iamg_tp"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/text_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="任务名称任务名..."
                    android:textColor="#061C1A"
                    android:textSize="16dp"
                    android:textStyle="bold" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="6dp"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="审核编号:"
                        android:textColor="#66061C1A"
                        android:textSize="12dp" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="23435"
                        android:textColor="#232323"
                        android:textSize="12dp" />

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="5dp"
                        android:src="@mipmap/ico_fzal" />
                </LinearLayout>

            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="20dp"
                android:gravity="right"
                android:orientation="vertical">

                <LinearLayout
                    android:id="@+id/linear_yb"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="+"
                        android:textColor="#FA5151"
                        android:textSize="14dp" />

                    <TextView
                        android:id="@+id/text_num"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="20"
                        android:textColor="#FA5151"
                        android:textSize="24dp"
                        android:textStyle="bold" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="元"
                        android:textColor="#FA5151"
                        android:textSize="14dp" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="提交限时："
                        android:textColor="#66061c1a"
                        android:textSize="12dp" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="00:59:59"
                        android:textColor="#02C7AB"
                        android:textSize="12dp" />
                </LinearLayout>
            </LinearLayout>

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/relative_top"
            android:layout_marginLeft="15dp"
            android:layout_marginBottom="15dp"
            android:layout_marginRight="10dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="接单时间："
                    android:textColor="#66061c1a"
                    android:textSize="12dp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="2025-05-08 15:01:08"
                    android:textColor="#232323"
                    android:textSize="12dp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_marginRight="5dp"
                    android:background="@drawable/bzhs_red_20"
                    android:gravity="center"
                    android:paddingLeft="15dp"
                    android:paddingTop="5dp"
                    android:paddingRight="15dp"
                    android:paddingBottom="5dp"
                    android:text="放弃任务"
                    android:textColor="#ffffff"
                    android:textSize="12dp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:background="@drawable/bzhs_lvse_20"
                    android:gravity="center"
                    android:paddingLeft="15dp"
                    android:paddingTop="5dp"
                    android:paddingRight="15dp"
                    android:paddingBottom="5dp"
                    android:text="提交任务"
                    android:textColor="#ffffff"
                    android:textSize="12dp" />
            </LinearLayout>
        </RelativeLayout>

        <ImageView
            android:id="@+id/iamg_bq"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:src="@mipmap/ico_tuijian" />
    </RelativeLayout>

</LinearLayout>

总结

总之来说TabLayout+ViewPager没有什么技术难点，需要注意的是TabLayout的item是否铺满屏幕需要xml控制或者代码动态控制，代码都附上了。