TabLayout使用自定义的图文布局，每个Tab设置不同的背景

最新推荐文章于 2023-01-13 12:10:09 发布

原创

最新推荐文章于 2023-01-13 12:10:09 发布 · 5.3k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#TabLayout.Tab #TabLayout

本文介绍如何在Android应用中使用TabLayout组件，并通过setCustomView实现带图标的tab，同时为每个Tab设置不同的背景。包括页面布局设计、自定义Tab布局、详细代码实现及效果展示。

效果

在这里插入图片描述

特点：
1、TabLayout使用setCustomView 实现带图标的tab；
2、每个Tab设置不同的背景；

1、页面布局：activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 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/cl_f4f1f4">

       <android.support.design.widget.TabLayout
           android:id="@+id/tablayout"
           android:layout_width="match_parent"
           android:layout_height="48dp"
           android:layout_marginStart="16dp"
           android:layout_marginTop="12dp"
           android:layout_marginEnd="16dp"
           android:layout_below="@id/cl_check_statistic"
           app:tabRippleColor="@color/bg_transparent"
           app:tabIndicatorHeight="0dp" />

       <View
           android:id="@+id/divider_line"
           android:layout_width="match_parent"
           android:layout_height="0.33dp"
           android:layout_below="@id/tablayout"
           android:layout_marginStart="16dp"
           android:layout_marginEnd="16dp"
           android:background="@color/cl_ccc" />

       <android.support.v4.view.ViewPager
           android:id="@+id/viewpager"
           android:layout_width="match_parent"
           android:layout_height="match_parent"