Android中的LinearGradient

用来实现线性渐变效果

此类是Shader的子类
通过paint.setShader来设置渐变。

有两个构造方法分别如下:

  1. LinearGradient(float x0, float y0, float x1, float y1, int colors[], float positions[], TileMode tile)
    注:Android中计算x,y坐标都是以屏幕左上角为原点,向右为x+,向下为y+
    第一个参数为线性起点的x坐标
    第二个参数为线性起点的y坐标
    第三个参数为线性终点的x坐标
    第四个参数为线性终点的y坐标
    第五个参数为实现渐变效果的颜色的组合
    第六个参数为前面的颜色组合中的各颜色在渐变中占据的位置(比重),如果为空,则表示上述颜色的集合在渐变中均匀出现
    第七个参数为渲染器平铺的模式,一共有三种

-CLAMP
边缘拉伸
-REPEAT
在水平和垂直两个方向上重复,相邻图像没有间隙
-MIRROR
以镜像的方式在水平和垂直两个方向上重复,相邻图像有间隙

  1. public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, TileMode tile)
    其他参数同上
    int color0表示渐变起始颜色
    int color1表示渐变终止颜色

下面主要来演示一下第一种构造方法下的实现效果:
首先是
LinearGradient mLinearGradient = new LinearGradient(0,0,getMeasuredWidth(),0,new int[]{Color.WHITE,Color.BLACK,Color.YELLOW},new float[]{0,0.5f,1.0f}, Shader.TileMode.CLAMP);
即实现白黑黄三色渐变。

Paste_Image.png

然后通过改变float数组中的中间值为0.8f:

Paste_Image.png

然后将中间值在设为0.5f,方便后面测试。
将x坐标改为从0到0
将y坐标改为从0到getMeasuredHeight();

Paste_Image.png

效果很显然,变成纵向的渐变了
然后将将x坐标改为从0到getMeasuredWidth();
将y坐标改为从0到getMeasuredHeight();

Paste_Image.png

果然,变成斜线渐变了。
如果我将x改为从getMeasuredWidth到0呢?

Paste_Image.png

果然不出所料,渐变反过来了。
接下来测试下渲染平铺模式
前面一直用的是CLAMP
尝试将x改为0到getMeasuredWidth()/2;

Paste_Image.png

只有左边的一部分进行了渲染,右边半部分则是使用渲染最后的颜色进行了填充。
将模式改为REPEAT

Paste_Image.png

再将模式改为MIRROR

Paste_Image.png

可以明显看到两者的区别
或者,
我们再将y设为0到getMeasuredHeight()/4
x设为0到getMeasuredWidth()/4

REPEAT

Paste_Image.png

MIRROR

Paste_Image.png

这样一来就显示的更清楚了

REPEAT指的是单纯的重复
白黑黄-白黑黄-白黑黄-白黑黄

MIRROR则是镜像
白黑黄-黄黑白-白黑黄-黄黑白

至于前面说的两者重复中间是否有间隔
从图上好像确实看不出来
我感觉应该是因为镜像的话中间部分的颜色是一样的,因此看起来中间并没有间隔,而重复的话一般而言重复连接部分的颜色是有差别的,这样就会导致看起来在衔接部分是有间隔的。

第二个构造方法简单也试一下:

Paste_Image.png

比较简单,就是两色渐变。

使用LinearGradient配合Matrix实现文字闪动效果:

首先需要设置渐变(在onSizeChaged方法中实现)
mLinearGradient = new LinearGradient(0,0,mViewWidth,0,new int[]{Color.BLUE,0xffffffff,Color.BLUE},null, Shader.TileMode.CLAMP);
然后,在onDra()方法中,调用如下代码:
if(mGradientMatrix != null){ //从0开始,每次递增mViewWidth / 5,即从最左侧开始每次向前平移1/5个长度 mTransLate += (mViewWidth / 5); if(mTransLate > mViewWidth){ //渐变平移走到头,需要重新从头开始 mTransLate = -mViewWidth; } mGradientMatrix.setTranslate(mTransLate,0); mLinearGradient.setLocalMatrix(mGradientMatrix); postInvalidateDelayed(1000); }
Matrix表示变换矩阵
其中的setTranslate表示平移,两个参数分别为x和y方向平移量
setLocalMatrix方法是Shader类的方法
表示 设置shader的本地矩阵

上述代码意思就是,设置一个偏移量,每次递增1/5View的长度,进行平移,当该长度递增超过了View的长度时就将其平移回最左侧,再从头开始。
其中的setLocalMatrix设置了渐变的平移矩阵
postInvalidateDelayed表示延迟重绘

如图所示:

Paste_Image.png

蓝色为起点,绿色为最右侧,橙色为最左侧,白框为手机。

解释:
上面设置了渐变的长度是0到getMeasuredWidth(),那么按照我们上面的测试来看的话,应该是一个长度为getMeasuredWidth()这样的静态的渐变方案,渐变部分主要在中间,两侧的颜色依旧是设置的颜色,然后,对这个的容器整体上进行平移,即将这个渐变看做一个长方形,对这个长方形进行平移,那么就可以实现对整个渐变进行平移,上述代码在最开始运行的时候,渐变应该是从屏幕正中间开始的,然后一直将该长方形整个平移至屏幕右侧外,然后再将其平移至屏幕左侧外,再向右进行。就能实现视觉效果上的文字闪动效果。
主要就是对渐变进行了平移。

注:所有的平移的参考点都是初始点。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,802评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,109评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,683评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,458评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,452评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,505评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,901评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,550评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,763评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,556评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,629评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,330评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,898评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,897评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,140评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,807评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,339评论 2 342

推荐阅读更多精彩内容

  • 系列文章之 Android中自定义View(一)系列文章之 Android中自定义View(二)系列文章之 And...
    YoungerDev阅读 2,156评论 0 4
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,369评论 25 707
  • 我家是H国A市一个偏远的山村里的,那一年中秋刚过,我的出生,一家人有喜有愁,喜是母子平安,愁的是生活在农村...
    花合上阅读 425评论 0 1
  • 有些时候,并不是图片会加载不出来,在图片展示的地方会出现叉叉或者alt内容,像我这种差不多先生都看不下去了,更别说...
    孤屿孤行阅读 2,620评论 0 0
  • 悦感朱滔救助,欲推为盟主。滔判官李子牟、武俊判官郑儒等议曰:”古有战国,连衡誓约以抗秦,请依周末七雄故事,并建国号...
    aalouie阅读 345评论 0 0