Android开发tablayout指示线indicator渐变

UI设计了下面这种样式的tablayout

1554972694(1).png
基于# FlycoTabLayout #的SlidingTabLayout实现，项目依赖一下啊，（不依赖的话，要复制很多东西进项目），完事复制FlycoTabLayout的SlidingTabLayout，

1、添加渐变颜色

mIndicatorStartColor = ta.getColor(R.styleable.GradientTabLayout_indicator_start_color, Color.parseColor(mIndicatorStyle == STYLE_BLOCK ? "#4B6A87" : "#ffffff"));
mIndicatorEndColor = ta.getColor(R.styleable.GradientTabLayout_indicator_end_color, Color.parseColor(mIndicatorStyle == STYLE_BLOCK ? "#4B6A87" : "#ffffff"));

<!-- indicator  attr文件下复制属性并添加开始和结束颜色，不加也可以，在你复制的tablayout中指定颜色 -->
        <attr name="indicator_start_color" format="color"/>
        <attr name="indicator_end_color" format="color"/>

截图说明白一些

图片.png

2、绘制

@SuppressLint("DrawAllocation")
//主要就是这个了，第一个参数指定渐变颜色，第二个渐变颜色，int数组可以加很多颜色，随便变颜色
GradientDrawable drawable = new GradientDrawable(Orientation.LEFT_RIGHT, new int[]{mIndicatorStartColor, mIndicatorEndColor});

if (mIndicatorGravity == Gravity.BOTTOM) {
    drawable.setBounds(paddingLeft + (int) mIndicatorMarginLeft + mIndicatorRect.left,
        height - (int) mIndicatorHeight - (int) mIndicatorMarginBottom,
        paddingLeft + mIndicatorRect.right - (int) mIndicatorMarginRight,
        height - (int) mIndicatorMarginBottom);
 } else {
     drawable.setBounds(paddingLeft + (int) mIndicatorMarginLeft + mIndicatorRect.left,
        (int) mIndicatorMarginTop,
        paddingLeft + mIndicatorRect.right - (int) mIndicatorMarginRight,
        (int) mIndicatorHeight + (int) mIndicatorMarginTop);
 }
drawable.setCornerRadius(mIndicatorCornerRadius);
drawable.draw(canvas);

看图红线标的有位置。在哪一行。这里就是绘制渐变色了，核心就是 new GradientDrawable（参数1：渐变方向， 参数2：渐变的色值数组）。

图片.png

用法和原生框架一样的

        <com.xxx.xxx.view.GradientTabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                <!--下面两个就是渐变色-->
                app:indicator_start_color="@color/gradual_start_color"
                app:indicator_end_color="@color/gradual_end_color"
                app:indicator_corner_radius="3dp"
                app:indicator_height="3dp"
                app:indicator_width_equal_title="true"
                app:tab_space_equal="true"
                app:textSelectColor="@color/user_black_33"
                app:textUnselectColor="@color/user_black_99"
                app:textsize="@dimen/text_size_15" />

有问题邮箱：limengbig@163.com