仿今日头条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