自定义 Android TabLayout

TabLayout是Android提供的一个常用控件，可用于实现选项卡切换功能，常用于底部导航栏或顶部选项卡等。但是默认的TabLayout可能无法满足我们的需求，可能需要实现自定义TabLayout。

实现步骤

1. 自定义TabLayoutItem的布局。

我们可以通过自定义布局文件，来实现自己所需要的TabLayoutItem。在这个布局文件中，我们可以设置字体颜色、字体大小、图标等。

2. 创建自定义TabLayout类。

在这个类中，我们可以通过继承TabLayout类，实现我们所需要的功能。比如改变TabLayoutItem的布局样式、添加自定义字体等。

3. 应用自定义TabLayout类。

在需要使用TabLayout的Activity中，我们可以通过将自定义TabLayout类的实例对象应用到XML文件中，来替代原有的TabLayout控件。同时我们还需要将每个TabLayoutItem的布局文件设置为自定义的布局。

代码示例

自定义TabLayoutItem的布局

我们可以创建一个自定义XML布局文件，来代替原有TabLayoutItem的布局文件。

<!-- custom_tab_item.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tab"
        android:textColor="@drawable/tab_title_color"
        android:textSize="12sp" />

</LinearLayout>

创建自定义TabLayout类

我们可以继承TabLayout类，并在其基础上添加自己的逻辑。

public class CustomTabLayout extends TabLayout {

    public CustomTabLayout(Context context) {
        super(context);
    }

    public CustomTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void addTab(Tab tab) {
        super.addTab(tab);
        // 设置自定义样式
        View view = LayoutInflater.from(getContext()).inflate(R.layout.custom_tab_item, null);
        ImageView icon = view.findViewById(R.id.tab_icon);
        TextView title = view.findViewById(R.id.tab_title);
        icon.setImageResource(tab.getIcon());
        title.setText(tab.getText());
        tab.setCustomView(view);
    }

}

应用自定义TabLayout类

我们可以在XML文件中，将原TabLayout控件的实例对象，改为我们自定义的控件实例。

<!-- 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"
    android:orientation="vertical">

    <com.example.myproject.CustomTabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="@drawable/tab_background"
        android:elevation="8dp" />

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

</LinearLayout>

同时，还需要在Activity中，设置TabLayout的各种样式属性以及相关的逻辑。

public class MainActivity extends AppCompatActivity {

    private CustomTabLayout mTabLayout;
    private ViewPager mViewPager;

    private List<Fragment> mFragments = new ArrayList<>();
    private String[] mTitles = {"首页", "消息", "我的"};
    private int[] mIcons = {R.drawable.ic_home, R.drawable.ic_message, R.drawable.ic_account};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 初始化Fragment列表
        mFragments.add(new HomeFragment());
        mFragments.add(new MessageFragment());
        mFragments.add(new AccountFragment());

        // 初始化ViewPager
        mViewPager = findViewById(R.id.view_pager);
        mViewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager(), mFragments, mTitles));

        // 初始化TabLayout
        mTabLayout = findViewById(R.id.tab_layout);
        mTabLayout.setupWithViewPager(mViewPager);
        mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);
        mTabLayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.colorAccent));
        mTabLayout.setTabTextColors(getResources().getColor(R.color.tab_normal), getResources().getColor(R.color.colorAccent));
        for (int i = 0; i < mTabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = mTabLayout.getTabAt(i);
            if (tab != null) {
                tab.setIcon(mIcons[i]);
            }
        }
    }

}

总结

通过自定义TabLayout，我们可以更好地控制选项卡的样式与逻辑，达到更好的用户体验。自定义的难度较大，但是只要掌握了它的实现方法，便很容易上手，并能应用于实际项目中。