仿今日头条TabLayout文字的滑动效果
这里主要还是关于自定义View相关的知识,特别是在自定义TextView的方面,文字的绘制的方面;我们需要在tab栏中随着手的滑动,文字的颜色能跟着变化;效果图如下图;
当我们滑动的时候,TextView的颜色会跟着变化;
- 文字在android中的一些位置的放置:
在进行编码之前,先了解一些textView的一些文字绘制的知识;
这里面有一条BaseLine的线,这条线是虚拟的,在实际中这个线是不存在的,这个BaseLine自如其名,是文字的基准线,有点像我们以前使用英语作业本中的基准线,在这个基准线之上的一些参数,如Ascent这参数,是为负值的,在BaseLine以下的值是为正数的,这里我们需要注意一下;
以上就是关于文字的一些参数说明;
- 文字的绘制
关于的文字的绘制,主要是利用canvas的drawText这个API进行文字的绘制:
我们可以看看这个API的一些参数说明,其中x是文字左边的起点,Y就是我们上面说的BaseLine这个参数,关于这个参数我们上面已经做了介绍,这里就不多做介绍了;如果现在有这么一个需求,我们需要把文字绘制在View的中心点位置,该如何做:解析如下:
X的中心坐标点还是很好求的如下:
说明:就是view的一半减去文字大小的一半;
关于baseLine的值的算法如下:
可能稍微比x的起点算法要复杂一些,但是按照我们上面,文字文字位置参数的说明那个图来说明,会简单一些,首先明确android中的Y是越来越大的,所以这里是文字高度的一半加上View高度的一半,注意不是减;这里文字高度为(descent-ascent),由于这里的ascent是一个负值,所以是减去ascent,这得到了文字的中间线,但是文字绘制是以baseLine为基准的,所以我们需要减去descent,如上如所示,最后得到的值baseline,可以将文字绘制在view的中心;
- canvas-画布的裁剪
画布的裁剪,调用的API如下:
我们平时使用的是第一个API,其实这几个性质都是一样的,只是参数差异;
为什么要说到画布的裁剪?我们可以使用画布的裁剪,见使得在文字绘制的是时候,在裁剪的区域显示另一种颜色的文字,而没有裁剪的区域显示正常的文字,如下图所示:
可以看到,上面的图中,以中间的线划分,其实canvas分为了两个区域,首先是红色的区域,然后是黑色的区域,可以看成我们使用了一块纸用红色的笔写上了铁头娃A这几个字然后把这个纸蒙在黑色的字体纸之上,我们俯视的去看这几个字的时候就是浑然一体的了;
整体的思路:
说完了以上的一些基础概念以后,我们的脑中应该有一些好的想法了,如何实现如上今日头条中的tab栏中滑动的效果呢?现在我们可以这么设想一下,如果使用属性动画,不停的改变红色区域右边的边界,那么就可以实现类似文字动态变化的效果了;
本文地址:https://blog.csdn.net/weixin_39967542/article/details/107469865
上一篇: Android实现状态栏沉浸
下一篇: php curl 获取数据不完整怎么办