android仿今日头条黑夜间切换,可切换颜色的tab(仿今日头条tablayout)

前段时间看见了今日头条的tablayout,感觉相当新鲜,也比较感兴趣,效果就是下边这个

gif5新文件.gif

像这种效果应该是需要自定义的View来实现的，可以看到在滑动过程中,两个相邻的tab是有局部颜色的变换的,前一个tab部分恢复成黑色,后一个tab会部分变为红色,这取决于滑动的距离.

首先每一个tab应该都是自定义的View,因为这涉及到了局部文字变色,所以应该先定制一个能够局部文字变色的View,普通的View当然不支持啦~

先来说下思路~主要用的方法是canvas的clipRect方法,先来看下这个方法啥子意思哟..

/**

* Intersect the current clip with the specified rectangle, which is

* expressed in local coordinates.

*

* @param left The left side of the rectangle to intersect with the

* current clip

* @param top The top of the rectangle to intersect with the current clip

* @param right The right side of the rectangle to intersect with the

* current clip

* @param bottom The bottom of the rectangle to intersect with the current

* clip

* @return true if the resulting clip is non-empty

*/

public boolean clipRect(int left, int top, int right, int bottom) {

return nClipRect(mNativeCanvasWrapper, left, top, right, bottom,

Region.Op.INTERSECT.nativeInt);

}

解释一下，里边的四个参数裁剪范围的左上右下的位置,比较好理解,需要注意的是,使用完这个方法后需要及时的恢复绘制范围，所以完整代码如下

canvas.save();

canvas.clipRect(left, top, right, bottom);

//再做绘制操作例如本片要用到的drawText()

canvas.restore();

知道了这个方法,那么就想想怎么绘制出两种颜色的文本了,先上个图

图中的1部分为黑色,2部分为红色,那么再绘制过程中我们只需要利用clipRect这个方法,分别裁剪出1部分的范围以及2部分的范围,分别使用不同颜色绘制就OK啦~但是总体的绘制起点以及文本都是一样的,这样就看起来是一个文本两种颜色,其实我们是绘制了两边,还是比较好理解的

话不多说,直接上代码

public class ColorClipView extends View {

private Paint paint;//画笔

private String text = "我是不哦车网";//绘制的文本

private int textSize = sp2px(18);//文本字体大小

private int textWidth;//文本的宽度

private int textHeight;//文本的高度

private int textUnselectColor = R.color.colorPrimary;//文本未选中字体颜色

private int textSelectedColor = R.color.colorAccent;//文本选中颜色

private static final int DIRECTION_LEFT = 0;

private static final int DIRECTION_RIGHT = 1;

private static final int DIRECTION_TOP = 2;

private static final int DIRECTION_BOTTOM = 3;

private int mDirection = DIRECTION_LEFT;

private Rect textRect = new Rect();//文本显示区域

private int startX;//X轴开始绘制的坐标

private int startY;//y轴开始绘制的坐标

private int baseLineY;//基线的位置

private float progress;

public ColorClipView(Context context) {

this(context, null);

}

public ColorClipView(Context context, AttributeSet attrs) {

super(context, attrs);

//初始化各个属性包括画笔

paint = new Paint(Paint.ANTI_ALIAS_FLAG);

TypedArray ta = context.obtainStyledAttributes(attrs,

R.styleable.ColorClipView);

text = ta.getString(R.styleable.ColorClipView_text);

textSize = ta.getDimensionPixelSize(R.styleable.ColorClipView_text_size, textSize);

// textUnselectColor = ta.getColor(R.styleable.ColorClipView_text_unselected_color, textUnselectColor);

// textSelectedColor = ta.getColor(R.styleable.ColorClipView_text_selected_color, textSelectedColor);

mDirection = ta.getInt(R.styleable.ColorClipView_direction, mDirection);

progress = ta.getFloat(R.styleable.ColorClipView_progress, 0);

ta.recycle();//用完就得收！

paint.setTextSize(textSize);

}

private int sp2px(float dpVal) {

return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,