1、概述
本篇博客的产生呢,是因为,群里的哥们暖暖给我发了个效果图,然后问我该如何实现顶部ViewPager指示器的字体变色,该效果图是这样的:
大概是今天头条的app,神奇的地方就在于,切换ViewPager页面的时候,顶部指示器改成了字体颜色的变化,个人觉得还是不错的。
那么核心的地方就是做一个支持字体这样逐渐染色就可以了,我大概想了32s,扫描了一些可能实现的方案,最终定位了一个靠谱的,下面我就带大家开始实现的征程。
实现之前贴一下我们的效果图:
2、效果图
1、简单使用
效果如上图了,关于颜失色的改变我添加了两个方向,一个是左方向,一个是有方向。
单纯的使用,可能觉得没什么意思,下面看结合ViewPager使用的一个例子。
2、结合ViewPager使用
可以看到我们切换页面的时候,上面的指示器的效果,棒棒哒~~~
当然了,学会了原理,你可以扩展,可以做个性的进度条,可以将字体变色改为背景色变色,可以把方向改为上下,太多了,自己去抠脚想把。
3、原理
看完效果图,有木有什么思路~~~花几分钟想想,因为原理很简单~~
我大致想了下,目测绘制半个字估计不行,那么就在绘制范围上下功夫,你可以全部绘制,但是我控制显示的范围,所以上述效果:
其实是绘制了两遍字体,但是呢,分别控制了绘制的显示范围,实现了逐渐变色的效果,那么对于范围的控制,有什么方便的API么,显然是有的
canvas有个clipRect的方法~~~ok,原理分析完毕~~
4、实现
说到实现,那第一步肯定又是自定义属性,我们这里的属性,需要text,textSize,textOriginColor,textChangeColor,progress,大致看一下,应该都能看出来作用吧,看不出来没事,结合下面的代码。tip:我们的View叫做ColorTrackView,感谢小七的命名。
1、自定义属性和获取
attr.xml
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
- <attr name="text" format="string" />
- <attr name="text_size" format="dimension" />
- <attr name="text_origin_color" format="color|reference" />
- <attr name="text_change_color" format="color|reference" />
- <attr name="progress" format="float" />
- <attr name="direction">
- <enum name="left" value="0" />
- <enum name="right" value="1" />
- </attr>
- <declare-styleable name="ColorTrackView">
- <attr name="text" />
- <attr name="text_size" />
- <attr name="text_origin_color" />
- <attr name="text_change_color" />
- <attr name="progress" />
- <attr name="direction" />
- </declare-styleable>
- </resources>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="text" format="string" />
<attr name="text_size" format="dimension" />
<attr name="text_origin_color" format="color|reference" />
<attr name="text_change_color" format="color|reference" />
<attr name="progress" format="float" />
<attr name="direction">
<enum name="left" value="0" />
<enum name="right" value="1" />
</attr>
<declare-styleable name="ColorTrackView">
<attr name="text" />
<attr name="text_size" />
<attr name="text_origin_color" />
<attr name="text_change_color" />
<attr name="progress" />
<attr name="direction" />
</declare-styleable>
</resources>
然后在我们的ColorTrackView的构造方法中进行获取这些个渣渣属性:
- /**
- *
- * @author zhy
- *
- */
- public class ColorTrackView extends View
- {
- private int mTextStartX;
- public enum Direction
- {
- LEFT , RIGHT ;
- }
- private int mDirection = DIRECTION_LEFT;
- private static final int DIRECTION_LEFT = 0 ;
- private static final int DIRECTION_RIGHT= 1 ;
- public void setDirection(int direction)
- {
- mDirection = direction;
- }
- private String mText = "张鸿洋";
- private Paint mPaint;
- private int mTextSize = sp2px(30);
- private int mTextOriginColor = 0xff000000;
- private int mTextChangeColor = 0xffff0000;
- private Rect mTextBound = new