Android 颜色渲染 LinearGradient线性渲染
转载地址
LinearGradient我们可以将之译为线型渐变、线型渲染等，译成什么不重要，重要的是它的显示效果是什么样子，今天我们就一起来看看。
先来看看LinearGradient的构造方法：
- /** Create a shader that draws a linear gradient along a line.
- @param x0 The x-coordinate for the start of the gradient line
- @param y0 The y-coordinate for the start of the gradient line
- @param x1 The x-coordinate for the end of the gradient line
- @param y1 The y-coordinate for the end of the gradient line
- @param colors The colors to be distributed along the gradient line
- @param positions May be null. The relative positions [0..1] of
- each corresponding color in the colors array. If this is null,
- the the colors are distributed evenly along the gradient line.
- @param tile The Shader tiling mode
- */
- public LinearGradient(float x0, float y0, float x1, float y1, int colors[], float positions[],
- TileMode tile) {
- .........
- .....
- ......
- }
LinearGradient的构造方法共有七个参数，分别表示：
x0表示渲染起始位置的x坐标，y0表示渲染起始位置的y坐标，x1表示渲染结束位置的x坐标，y1表示渲染结束位置的y坐标，colors表示渲染的颜色，它是一个颜色数组，数组长度必须大于等于2，positions表示colors数组中几个颜色的相对位置，是一个float类型的数组，该数组的长度必须与colors数组的长度相同。如果这个参数使用null也可以，这时系统会按照梯度线来均匀分配colors数组中的颜色，最后一个参数则表示平铺方式，有三种，我们分别来看：
为了给大家演示不同平铺方式下使用着色器的不同效果，我自定义了一个View，叫做AboutShaderView，我重写了该View中的两个方法，分别是onMeasure以及onDraw，在onMeasure方法中，我把该控件的宽高固定为256dp，代码如下：
- @Override
- protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
- super.onMeasure(widthMeasureSpec, heightMeasureSpec);
- setMeasuredDimension((int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 256, getResources().getDisplayMetrics()), (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 256, getResources().getDisplayMetrics()));
- }
然后在onDraw方法中通过使用着色器的不同模式，来让它显示不同的效果，最后，我在布局文件中引用自定义View：
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout
- xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical"
- tools:context="lenve.customtextview.MainActivity">
- <lenve.customtextview.AboutShaderView
- android:layout_width="256dp"
- android:layout_height="256dp"/>
- </LinearLayout>
OK，下面我们一起来看看这几种不同模式的显示效果：
1.LinearGradient.TileMode.CLAMP
这种模式表示重复最后一种颜色直到该View结束的地方，如果我设置着色器开始的位置为（0，0），结束位置为（getMeasuredWidth(), 0）表示我的着色器要给整个View在水平方向上渲染不同的颜色，代码如下：
- @Override
- protected void onDraw(Canvas canvas) {
- super.onDraw(canvas);
- Paint paint = new Paint();
- paint.setColor(Color.GREEN);
- LinearGradient linearGradient = new LinearGradient(0, 0, getMeasuredWidth(), 0,new int[]{Color.RED, Color.WHITE, Color.BLUE}, null, LinearGradient.TileMode.CLAMP);
- paint.setShader(linearGradient);
- canvas.drawRect(0,0,getMeasuredWidth(),getMeasuredHeight(),paint);
- }
显示效果如下：
水平方向上依次是红白蓝，没问题，那我如果变换一下需求，我想把渲染的方向修改为从左上角到右下角，那么该怎么办？很简单，只需要修改渲染结束的位置为getMeasuredHeight()即可，代码如下：
- @Override
- protected void onDraw(Canvas canvas) {
- super.onDraw(canvas);
- Paint paint = new Paint();
- paint.setColor(Color.GREEN);
- LinearGradient linearGradient = new LinearGradient(0, 0, getMeasuredWidth(), getMeasuredHeight(),new int[]{Color.RED, Color.WHITE, Color.BLUE}, null, LinearGradient.TileMode.CLAMP);
- paint.setShader(linearGradient);
- canvas.drawRect(0,0,getMeasuredWidth(),getMeasuredHeight(),paint);
- }
显示效果如下：
OK，两个小Demo让大家先感受下Shader，下面我继续变换的我的需求，如果我希望我的着色器的渲染位置变为从（0，0）到（getMeasuredWidth()/2, 0），那么这时候的渲染区域是什么呢？如下图：
OK，也就是说控件只有一半会被渲染，那么剩下的一半怎么办呢？这时候就得看我们的最后一个参数了，我们已经说过，LinearGradient.TileMode.CLAMP模式表示重复最后一种颜色直到该View结束的地方，也就是说从View宽度的1/2处直到View结束的地方都将是蓝色（因为View1/2处的颜色是蓝色），那么究竟是不是呢，我们看代码：
- @Override
- protected void onDraw(Canvas canvas) {
- super.onDraw(canvas);
- Paint paint = new Paint();
- paint.setColor(Color.GREEN);
- LinearGradient linearGradient = new LinearGradient(0, 0, getMeasuredWidth()/2, 0,new int[]{Color.RED, Color.WHITE, Color.BLUE}, null, LinearGradient.TileMode.CLAMP);
- paint.setShader(linearGradient);
- canvas.drawRect(0,0,getMeasuredWidth(),getMeasuredHeight(),paint);
- }
再看效果图：
和我们想的一样，这就是LinearGradient.TileMode.CLAMP模式的特点。
2.LinearGradient.TileMode.REPEAT
LinearGradient.TileMode.REPEAT表示着色器在水平或者垂直方向上对控件进行重复着色，类似于windows系统桌面背景中的“平铺”，那么接下来我们来看看着色器对这种模式的处理方式，假如我希望着色器开始渲染的位置为（0，0），结束渲染的位置为（getMeasuredWidth()/2, getMeasuredHeight()/2），但与之前不同的是这次的平铺方式变为LinearGradient.TileMode.REPEAT，我们来看看代码：
- @Override
- protected void onDraw(Canvas canvas) {
- super.onDraw(canvas);
- Paint paint = new Paint();
- paint.setColor(Color.GREEN);
- LinearGradient linearGradient = new LinearGradient(0, 0, getMeasuredWidth()/2, getMeasuredHeight()/2,new int[]{Color.RED, Color.WHITE, Color.BLUE}, null, LinearGradient.TileMode.REPEAT);
- paint.setShader(linearGradient);
- canvas.drawRect(0,0,getMeasuredWidth(),getMeasuredHeight(),paint);
- }
效果图如下：
OK，沿着举行对角线，着色器对View进行了重复渲染，为了大家更好的理解LinearGradient.TileMode.REPEAT模式，这次我把我的需求该一下，我希望从（0，0）处开始渲染，到（0, getMeasuredHeight()/2）处结束，这时系统会在垂直方向上重复渲染，代码如下：
- @Override
- protected void onDraw(Canvas canvas) {
- super.onDraw(canvas);
- Paint paint = new Paint();
- paint.setColor(Color.GREEN);
- LinearGradient linearGradient = new LinearGradient(0, 0, 0, getMeasuredHeight()/2,new int[]{Color.RED, Color.WHITE, Color.BLUE}, null, LinearGradient.TileMode.REPEAT);
- paint.setShader(linearGradient);
- canvas.drawRect(0,0,getMeasuredWidth(),getMeasuredHeight(),paint);
- }
效果图如下：
OK，没问题，如我们所预料的那样。
3.LinearGradient.TileMode.MIRROR
LinearGradient.TileMode.MIRROR模式会在水平方向或者垂直方向上以镜像的方式进行渲染，这种渲染方式的一个特征就是具有翻转的效果，比如我希望我的着色器开始渲染的位置为（0，0），结束渲染的位置为（getMeasuredWidth()/2, 0），那么效果图是什么样子呢？我们先来看看代码：
- @Override
- protected void onDraw(Canvas canvas) {
- super.onDraw(canvas);
- Paint paint = new Paint();
- paint.setColor(Color.GREEN);
- LinearGradient linearGradient = new LinearGradient(0, 0, getMeasuredWidth()/2, 0,new int[]{Color.RED, Color.WHITE, Color.BLUE}, null, LinearGradient.TileMode.MIRROR);
- paint.setShader(linearGradient);
- canvas.drawRect(0,0,getMeasuredWidth(),getMeasuredHeight(),paint);
- }
效果图如下：
OK，剩下的一部分依然被渲染，但是渲染的前后两部分是对称的，这就是LinearGradient.TileMode.MIRROR模式，很简单吧！
OK，以上就是LinearGradient的用法，有问题欢迎讨论。
Android 颜色渲染 LinearGradient线性渲染相关推荐
- Android 颜色渲染(五) LinearGradient线性渲染
版权声明:本文为博主原创文章,未经博主允许不得转载. Android 颜色处理(五) LinearGradient线性渲染 相信很多人都看过歌词同步的效果, 一是竖直方向的滚动,另一方面是水平方面的歌 ...
- Android绘图之LinearGradient线性渐变（9）
Android 绘图学习 android绘图之Paint(1) android绘图之Canvas基础(2) Android绘图之Path(3) Android绘图之drawText绘制文本相关(4) ...
- 【Android UI】Paint Gradient 渐变渲染 ① ( LinearGradient 线性渐变渲染 | 设置渲染方向 | 设置渲染颜色 | 设置渲染模式 | MIRROR )
文章目录 一.LinearGradient 线性渐变渲染 1.设置 2 个颜色的渐变 3.设置多个颜色的渐变 二.LinearGradient 线性渐变渲染重要参数分析 1.正常渲染 2.设置多个渐变 ...
- LinearGradient线性渲染
import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; impor ...
- Android开发 之 线性渲染 LinearGradient
线性渲染LinearGradient LinearGradient有两个构造函数 第一个: public LinearGradient(float x0, float y0, float x1, fl ...
- Android 颜色渲染(二) 颜色区域划分原理与实现思路
在前面的系列我已经将Android中颜色渲染的原理及使用做了一个整体上概述. 现在开始根据一个比较复杂的实现进行具体的分析,这就是PhotoShop中的调色板应用 首先还是看一下最终的实现效果: ...
- Android 颜色渲染(九) PorterDuff及Xfermode详解
Android 颜色渲染(九) PorterDuff及Xfermode详解 之前已经讲过了除ComposeShader之外Shader的全部子类, 在讲ComposeShader(组合渲染)之前, ...
- Android 颜色渲染(六) RadialGradient 环形渲染
Android 颜色处理(六) RadialGradient 环形渲染 public RadialGradient(float x, float y, float radius, int[] colo ...
- 【Android 性能优化】布局渲染优化 ( 过渡绘制 | 背景设置产生的过度绘制 | Android 系统的渲染优化 | 自定义布局渲染优化 )
文章目录 一. 背景设置产生的过度绘制 二. Android 系统的渲染优化 1. 透明组件数据传递 2. GPU 存储机制 3. Android 7.0 之后的优化机制 三. 自定义布局渲染优化 一 ...
最新文章
- vectorbool不是容器
- Linux负载均衡实现
- Wireshark非标准分析port无流量
- Ubuntu下安装Docker
- 【UIKit】UITableView.02
- “李宏毅老师对不起，我要去追这门美女老师的课了” ，台大陈蕴侬深度学习课程最新资料下载...
- 《PHP对象、模式与实践》之对象
- Java-File-文件操作
- SPSS详细操作：生存资料的Cox回归分析
- 5个相见恨晚的设计资源网站，记得收藏。
- 模拟登陆115网盘（MFC版）
- 管理中如何提高自己的推动力
- c语言 将数组转化成二叉树
- python输入中文教程_如何用Python从头开始实现一个中文拼音输入法？
- @Deprecated的使用
- 超适合新手练习的前端网页
- Chrome 53 Beta一些有意思的改动
- web图片铺满网页_CSS实现网页背景图片自适应全屏
- 单片机原理与应用实验——串口（C语言），使用串口发送或接收数据，定时器1作为波特率发生器
- 带你了解代理模式中的静态代理和动态代理以及cgilib代理^_^