TabLayout 的指示器（indicator）修改宽度

作者: 穿越平行宇宙 | 来源:发表于2019-07-18 16:27 被阅读114次

TabLayout 的指示器（indicator）修改宽度
修改TabLayout Indicator的宽度
Tablayout 指示器宽度调整
TabLayout Indicator的自定义效果
Android修改TabLayout中indicator的宽度
ReflexUtil
定制TabLayout指示器样式
TabLayout设置指示器宽度
简单的可以设定宽度的自定义TabLayout指示器
android蓝牙手柄、仿QQ看房、仿慕课网、数据库二维码框架等

别费劲了，用第三方库! SmartTabLayout

使用支持更多自定义的SmartTabLayout.有我们想要的自定义下划线宽度属性。

属性	描述
stl_indicatorAlwaysInCenter	如果设置为true，选中的标签总是显示在中心（如报刊亭的谷歌应用程序），默认为false
stl_indicatorWithoutPadding	如果设置为真，画出没有填充标签的指标，默认为假
stl_indicatorInFront	在前面的下划线，默认的假画
stl_indicatorInterpolation	指标的行为：: ‘linear’ or ‘smart’
stl_indicatorGravity	指示器的位置: ‘bottom’ or ‘top’ or ‘center’, default ‘bottom’
stl_indicatorColor	指示剂颜色
stl_indicatorColors	该指标的多个颜色，可以设置每个标签的颜色
stl_indicatorThickness	指标的厚度
stl_indicatorWidth	指标的宽度(width), default ‘auto’
stl_indicatorCornerRadius	圆角半径的指示器
stl_overlineColor	顶线的颜色
stl_overlineThickness	顶线厚度
stl_underlineColor	底线的颜色
stl_underlineThickness	底线的厚度
stl_dividerColor	标签的颜色之间的分隔
stl_dividerColors	制表符分隔的多个颜色，可以设置每个标签的颜色
stl_dividerThickness	间隔(divider)的厚度
stl_defaultTabBackground	背景中每个选项卡。一般来说，设置statelistdrawable
stl_defaultTabTextAllCaps	如果设置为真，所有标签的标题将是大写的，default true
stl_defaultTabTextColor	默认的选项卡的文本颜色
stl_defaultTabTextSize	默认的选项卡的文本大小
stl_defaultTabTextHorizontalPadding	默认情况下包含的选项卡的文本布局填充
stl_defaultTabTextMinWidth	tab最小宽度
stl_customTabTextLayoutId	布局标识自定义选项卡。如果不指定布局，使用默认选项卡
stl_customTabTextViewId	自定义选项卡布局中的文本视图标识。如果你不确定customtabtextlayoutid，不工作
stl_distributeEvenly	如果设置为真，每个标签都有相同的权重, default false
stl_clickable	如果设置为假，请禁用选项卡的选择, default true
stl_titleOffset	如果设置为“auto_center，滑块位置的标签中会不断向中心。如果指定一个维度将它从左边偏移，默认24dp
stl_drawDecorationAfterTab	Draw the decoration(indicator and lines) after drawing of tab, default false 绘制标签后的装饰（指标和线）

1. 添加依赖

    // smarttablayout
    implementation 'com.ogaclejapan.smarttablayout:library:1.6.1@aar'

2. 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".modifyTablayoutIndicator.MondifyActivity">


    <com.ogaclejapan.smarttablayout.SmartTabLayout
        android:id="@+id/smart_tablayout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@color/colorPrimary"
        app:stl_clickable="true"
        app:stl_customTabTextLayoutId="@layout/view_tab_text"
        app:stl_distributeEvenly="true"
        app:stl_dividerThickness="0dp"
        app:stl_indicatorColor="@color/colorAccent"
        app:stl_indicatorGravity="bottom"
        app:stl_indicatorInterpolation="linear"
        app:stl_indicatorThickness="2dp"
        app:stl_indicatorWidth="20dp"
        app:stl_overlineThickness="0dp"
        app:stl_titleOffset="auto_center"
        app:stl_underlineThickness="0dp">

    </com.ogaclejapan.smarttablayout.SmartTabLayout>

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


</LinearLayout>

3. SmartTabLayout中并没有设置文本选中和未选中Tab时的效果，我们可以通过app:stl_customTabTextLayoutId属性引入自定义设置。

view_tab_text.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab_text"
    style="@style/Tabtext"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:paddingLeft="20dp"
    android:paddingRight="20dp">
</TextView>

styles.xml

    <style name="Tabtext">
        <item name="android:textColor">@color/selector_tab_text</item>
        <item name="android:textSize">20dp</item>
    </style>

selector_tab_text.xml
在这里设置选中tab的字体颜色，和未选中tab的字体颜色。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/holo_blue_light" android:state_selected="true" />
    <item android:color="@android:color/holo_gray_light" />
</selector>

4. 因为引用了自定义Tab布局，所以原生布局带有的Tab点击效果消失（类似于水波纹）。

我们可以在 view_tab_text.xml 文件中添加想要的水波纹效果。

 android:foreground="@drawable/ripple_app_color"

ripple_app_color.xml: 水波纹效果

<?xml version="1.0" encoding="utf-8" ?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#292421">
</ripple>

Activity

public class MondifyActivity extends AppCompatActivity {

    private SmartTabLayout mSmartTablayout;
    private ViewPager mViewPager;
    private List<String> titles = new ArrayList<>();
    private List<Fragment> fragments = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_mondify);
        initView();
        initSet();
    }

    private void initView() {
        mSmartTablayout = (SmartTabLayout) findViewById(R.id.smart_tablayout);
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
    }

    private void initSet() {

        titles.add("aaaa");
        titles.add("bbbb");
        titles.add("cccc");
        titles.add("dddd");
        titles.add("eeee");
        titles.add("ffff");

        for (int i = 0; i < titles.size(); i++) {
            fragments.add(new BlankFragment());
        }

        MyAdapter adapter = new MyAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(adapter);
        mSmartTablayout.setViewPager(mViewPager);


    }

    class MyAdapter extends FragmentPagerAdapter {

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);
        }

        @Override
        public int getCount() {
            return fragments.size();
        }

        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return titles.get(position);
        }
    }

}

6. 完成效果图

自定义smartTabLayout.gif

7. 简单的SmartTabLayout布局

但是选项卡没有定义选中后的颜色，必须自定义选项卡才可以

<?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="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".modifyTablayoutIndicator.SmartActivity">

    <com.ogaclejapan.smarttablayout.SmartTabLayout
        android:id="@+id/smartTabLayout"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        app:stl_indicatorGravity="bottom"
        app:stl_indicatorInterpolation="smart"
        app:stl_indicatorThickness="2dp"
        app:stl_distributeEvenly="true"
        app:stl_dividerThickness="0dp"
        app:stl_indicatorColor="@color/colorPrimary"
        app:stl_indicatorWidth="20dp">


    </com.ogaclejapan.smarttablayout.SmartTabLayout>

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

    </android.support.v4.view.ViewPager>


</LinearLayout>

效果图

简单smartTabLayout.gif