欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

仿今日头条TabLayout文字的滑动效果

程序员文章站 2022-03-12 19:20:02
这里主要还是关于自定义View相关的知识,特别是在自定义TextView的方面,文字的绘制的方面;我们需要在tab栏中随着手的滑动,文字的颜色能跟着变化;效果图如下图;说明:就是view的一半减去文字大小的一半;关于baseLine的值的算法如下:可能稍微比x的起点算法要复杂一些,但是按照我们上面,文字文字位置参数的说明那个图来说明,会简单一些,首先明确android中的Y是越来越大的,所以这里是文字高度的一半加上View高度的一半,注意不是减;这里文字高度为(descent-......

这里主要还是关于自定义View相关的知识,特别是在自定义TextView的方面,文字的绘制的方面;我们需要在tab栏中随着手的滑动,文字的颜色能跟着变化;效果图如下图;

仿今日头条TabLayout文字的滑动效果

 

当我们滑动的时候,TextView的颜色会跟着变化;

  • 文字在android中的一些位置的放置:

在进行编码之前,先了解一些textView的一些文字绘制的知识;

仿今日头条TabLayout文字的滑动效果

 

这里面有一条BaseLine的线,这条线是虚拟的,在实际中这个线是不存在的,这个BaseLine自如其名,是文字的基准线,有点像我们以前使用英语作业本中的基准线,在这个基准线之上的一些参数,如Ascent这参数,是为负值的,在BaseLine以下的值是为正数的,这里我们需要注意一下;

以上就是关于文字的一些参数说明;

  • 文字的绘制

关于的文字的绘制,主要是利用canvas的drawText这个API进行文字的绘制:

仿今日头条TabLayout文字的滑动效果

我们可以看看这个API的一些参数说明,其中x是文字左边的起点,Y就是我们上面说的BaseLine这个参数,关于这个参数我们上面已经做了介绍,这里就不多做介绍了;如果现在有这么一个需求,我们需要把文字绘制在View的中心点位置,该如何做:解析如下:

X的中心坐标点还是很好求的如下:

仿今日头条TabLayout文字的滑动效果

说明:就是view的一半减去文字大小的一半;

关于baseLine的值的算法如下:

仿今日头条TabLayout文字的滑动效果

可能稍微比x的起点算法要复杂一些,但是按照我们上面,文字文字位置参数的说明那个图来说明,会简单一些,首先明确android中的Y是越来越大的,所以这里是文字高度的一半加上View高度的一半,注意不是减;这里文字高度为(descent-ascent),由于这里的ascent是一个负值,所以是减去ascent,这得到了文字的中间线,但是文字绘制是以baseLine为基准的,所以我们需要减去descent,如上如所示,最后得到的值baseline,可以将文字绘制在view的中心;

  • canvas-画布的裁剪

画布的裁剪,调用的API如下:

仿今日头条TabLayout文字的滑动效果

我们平时使用的是第一个API,其实这几个性质都是一样的,只是参数差异;

为什么要说到画布的裁剪?我们可以使用画布的裁剪,见使得在文字绘制的是时候,在裁剪的区域显示另一种颜色的文字,而没有裁剪的区域显示正常的文字,如下图所示:

仿今日头条TabLayout文字的滑动效果

可以看到,上面的图中,以中间的线划分,其实canvas分为了两个区域,首先是红色的区域,然后是黑色的区域,可以看成我们使用了一块纸用红色的笔写上了铁头娃A这几个字然后把这个纸蒙在黑色的字体纸之上,我们俯视的去看这几个字的时候就是浑然一体的了;

整体的思路:

说完了以上的一些基础概念以后,我们的脑中应该有一些好的想法了,如何实现如上今日头条中的tab栏中滑动的效果呢?现在我们可以这么设想一下,如果使用属性动画,不停的改变红色区域右边的边界,那么就可以实现类似文字动态变化的效果了;

本文地址:https://blog.csdn.net/weixin_39967542/article/details/107469865