Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器

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

然后在我们的ColorTrackView的构造方法中进行获取这些个渣渣属性:

可以看到我同时贴出了成员变量,大家简单看下就行了,都比较简单。

获取了属性,初始化完成一些成员变量以后,那么应该走向我们的measure之旅了~~

2、onMeasure

关于测量,也是比较传统的写法,根据传入的widthMeasureSpec、heightMeasureSpec,利用MeasureSpec分别获取模式和值,如何是EXACTLY万事大吉,如果是AT_MOST、UNSPECIFIED那么就进行自己测量需要的空间,当然了,最好注意如果是AT_MOST不应该大于父类传入的值。

这里提一下,如果偷懒的话,可以选择继承TextView,然后测量就不需要写了,TextView默认帮你实现了,还能利用TextView的一些属性,不过咱们这个例子比较简单,我最终还是选择了继承View,继承View有种everything under control 的感觉。

测量完成以后,不用说都是绘制了。

3、onDraw

绘制的核心就在于利用mProgress和方向去计算应该clip的范围,具体的参考代码,没什么难点。有了范围以后,无非就是drawText~~~

该View的完整代码:ColorTrackView

主要的方法介绍完毕,我们就该测试了。

5、测试

1、简单测试

布局文件

注意我们的自定义属性的命名空间,该布局就一个ColorTrackView,然后两个按钮来控制进度。

SimpleUseActivity:

这里拿属性动画进行的测试,没有导入3.0以下兼容包,有需要自己导入。

效果图,见上效果图1。

2、结合ViewPager

布局文件:

3个ColorTrackView代表Tab,下面是ViewPager

ViewPagerUseActivity:

TabFragment

效果图见上效果图2。

2 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部