# TabLayoutDemo

**Repository Path**: cbfg5210/TabLayoutDemo

## Basic Information

- **Project Name**: TabLayoutDemo
- **Description**: 基于 TabLayout 的 indicator 自定义样式 demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-12-01
- **Last Updated**: 2021-03-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TabLayoutDemo

使用控件 <com.google.android.material.tabs.TabLayout> 的时候往往要自定义 indicator 的效果，本 demo 通过 xml drawable 的方式来自定义 indicator 的样式，以供后续使用作为参考。  

先来看下项目的运行截图（Android 4.4 模拟器）：

![screeshot.png](https://gitee.com/cbfg5210/TabLayoutDemo/raw/master/arts/screeshot.png)

其中，  
第一个 TabLayout 是默认的效果；  
第二个 TabLayout 的 tabIndicator 传入了一个 shape 定义的 drawable（[shape_indicator.xml](https://gitee.com/cbfg5210/TabLayoutDemo/blob/master/app/src/main/res/drawable/shape_indicator.xml)）；  
第三个 TabLayout 的 tabIndicator 传入了一个 layer-list 定义的 drawable（[ll_indicator.xml](https://gitee.com/cbfg5210/TabLayoutDemo/blob/master/app/src/main/res/drawable/ll_indicator.xml)）；  
第四个 TabLayout 的 tabIndicator 传入了一个 inset 定义的 drawable（[inset_indicator.xml](https://gitee.com/cbfg5210/TabLayoutDemo/blob/master/app/src/main/res/drawable/inset_indicator.xml)）；  

最后两个用的是从 TabLayout 源码 copy 出来，注释了其中 selectedIndicatorPaint 的一段代码实现的 FixedTabLayout，其中：  
第五个 FixedTabLayout 的 tabIndicator 传入了一个 inset 定义的 drawable（[inset_indicator.xml](https://gitee.com/cbfg5210/TabLayoutDemo/blob/master/app/src/main/res/drawable/inset_indicator.xml)）；  
第六个 FixedTabLayout 的 tabIndicator 传入了一个 shape 定义的渐变 drawable（[shape_gradient_indicator.xml](https://gitee.com/cbfg5210/TabLayoutDemo/blob/master/app/src/main/res/drawable/shape_gradient_indicator.xml)）；  

[点这里前往页面布局](https://gitee.com/cbfg5210/TabLayoutDemo/blob/master/app/src/main/res/layout/activity_main.xml)

FixedTabLayout 中注释的代码片段见下图：  

![code.png](https://gitee.com/cbfg5210/TabLayoutDemo/raw/master/arts/code.png)