TabLayout实现自定义标题栏目功能

最新推荐文章于 2024-04-29 09:48:42 发布

原创最新推荐文章于 2024-04-29 09:48:42 发布 · 992 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#TabLayout

Android 专栏收录该内容

76 篇文章

订阅专栏

本文介绍如何在TabLayout中实现自定义标题，包括图文展示。通过代码示例展示了自定义布局文件和Java代码的实现过程。

TabLayout实现自定义标题栏目功能

1、前提

在平时的工作中，大家都会使用到TabLayout，默认情况下TabLayout支持文字的，需要支持图文或者自定义就需要自己来写了。
先上一张图：

2、直接上代码

布局文件

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="0pt"
        android:layout_height="150pt"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view_linear_bill"
        android:background="@color/color_ffffff"
        app:tabContentStart="20pt"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/color_333333"
        app:tabIndicatorFullWidth="false"
        app:tabIndicatorHeight="5pt"
        app:tabUnboundedRipple="true"
        app:tabMode="scrollable"
        app:tabPaddingBottom="20pt"
        app:tabPaddingTop="20pt"
        app:tabSelectedTextColor="@color/color_333333"
        app:tabTextAppearance="@style/tab_style"
        app:tabTextColor="@color/color_333333" />

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="0pt"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tab_layout"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_height="0pt" />

你自定义的布局文件

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@drawable/shape_order_choose"
        android:textSize="43pt"
        tools:text="测试" />

    <com.base.util.baseui.widget.view.RTextView
        android:id="@+id/tv_num"
        android:layout_width="60pt"
        android:layout_height="60pt"
        android:ellipsize="end"
        android:visibility="gone"
        android:gravity="center"
        android:maxLength="3"
        android:textColor="@color/color_d80c18"
        android:textSize="35pt"
        app:background_normal="#FFCBCE"
        app:corner_radius="90pt"
        tools:text="2222" />

</LinearLayout>

java代码

@Override
    protected void initData() {
        // data
        List<String> titleList = new ArrayList<>();
        titleList.add("全部");
        titleList.add("结算收入");
        titleList.add("提现支出");
        titleList.add("退款支出");
        List<Fragment> fragmentList = new ArrayList<>();
        fragmentList.add(FinanceBottomFragment.getInstance(Const.FinanceClass.FinanceClass_0));
        fragmentList.add(FinanceBottomFragment.getInstance(Const.FinanceClass.FinanceClass_1));
        fragmentList.add(FinanceBottomFragment.getInstance(Const.FinanceClass.FinanceClass_2));
        fragmentList.add(FinanceBottomFragment.getInstance(Const.FinanceClass.FinanceClass_3));
        MyFragmentPagerAdapter myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList);
        viewPager.setAdapter(myFragmentPagerAdapter);
        viewPager.setOffscreenPageLimit(3);
        tabLayout.setupWithViewPager(viewPager);
        for (int i = 0; i < titleList.size(); i++) {
            tabLayout.getTabAt(i).setCustomView(getTabView(i, titleList.get(i)));
        }
    }

    /**
     * 自定义的TabLayout
     *
     * @param position
     * @param value
     * @return
     */
    public View getTabView(int position, String value) {
        View view = LayoutInflater.from(this).inflate(R.layout.view_tablayout_num, null);
        TextView tv = view.findViewById(R.id.tv_title);
        RTextView num = view.findViewById(R.id.tv_num);
        tv.setText(value);
        num.setText("20");
        num.setVisibility(View.VISIBLE);
        return view;
    }