UI設(shè)計了下面這種樣式的tablayout
1554972694(1).png
基于# FlycoTabLayout #的SlidingTabLayout實現(xiàn)，項目依賴一下啊馋吗，（不依賴的話焕盟，要復(fù)制很多東西進項目），完事復(fù)制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文件下復(fù)制屬性并添加開始和結(jié)束顏色灼卢，不加也可以，在你復(fù)制的tablayout中指定顏色 -->
<attr name="indicator_start_color" format="color"/>
<attr name="indicator_end_color" format="color"/>
截圖說明白一些
圖片.png
2来农、繪制
@SuppressLint("DrawAllocation")
//主要就是這個了鞋真，第一個參數(shù)指定漸變顏色，第二個漸變顏色沃于，int數(shù)組可以加很多顏色涩咖，隨便變顏色
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);
看圖紅線標(biāo)的有位置。在哪一行繁莹。這里就是繪制漸變色了檩互，核心就是 new GradientDrawable（參數(shù)1：漸變方向， 參數(shù)2：漸變的色值數(shù)組）咨演。
圖片.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" />
