【Android UI】Paint Gradient 渐变渲染 ① ( LinearGradient 线性渐变渲染 | 设置渲染方向 | 设置渲染颜色 | 设置渲染模式 | MIRROR )

网友投稿 263 2022-09-27

文章目录

一、LinearGradient 线性渐变渲染

1、设置 2 个颜色的渐变3、设置多个颜色的渐变

二、LinearGradient 线性渐变渲染重要参数分析

1、正常渲染2、设置多个渐变颜色渲染3、设置渲染方向4、设置 Shader.TileMode.MIRROR 渲染模式5、设置 Shader.TileMode.REPEAT 渲染模式

三、代码示例

1、正常渲染2、设置多个渐变颜色渲染3、设置渲染方向4、设置 Shader.TileMode.MIRROR 渲染模式5、设置 Shader.TileMode.REPEAT 渲染模式

四、效果展示

一、LinearGradient 线性渐变渲染

Paint 的 LinearGradient 是线性渐变渲染；

LinearGradient 文档地址 : 线性渐变渲染使用时 , 直接使用构造函数创建即可 ;

1、设置 2 个颜色的渐变

/** * 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 color0 The sRGB color at the start of the gradient line. * @param color1 The sRGB color at the end of the gradient line. * @param tile The Shader tiling mode */ public LinearGradient(float x0, float y0, float x1, float y1, @ColorInt int color0, @ColorInt int color1, @NonNull TileMode tile) { this(x0, y0, x1, y1, Color.pack(color0), Color.pack(color1), tile); } /** * 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 color0 The color at the start of the gradient line. * @param color1 The color at the end of the gradient line. * @param tile The Shader tiling mode * * @throws IllegalArgumentException if the colors do * not share the same {@link ColorSpace} or do not use a valid one. */ public LinearGradient(float x0, float y0, float x1, float y1, @ColorLong long color0, @ColorLong long color1, @NonNull TileMode tile) { this(x0, y0, x1, y1, new long[] {color0, color1}, null, tile); }

3、设置多个颜色的渐变

设置多个颜色渐变的构造函数原型如下 : 二者的区别是颜色值可以使用 int , 也可以使用 long 进行表示 ;

/** * 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 sRGB 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, @NonNull @ColorInt int[] colors, @Nullable float[] positions, @NonNull TileMode tile) { this(x0, y0, x1, y1, convertColors(colors), positions, tile, ColorSpace.get(ColorSpace.Named.SRGB)); } /** * 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 * * @throws IllegalArgumentException if there are less than two colors, the colors do * not share the same {@link ColorSpace} or do not use a valid one, or {@code positions} * is not {@code null} and has a different length from {@code colors}. */ public LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorLong long[] colors, @Nullable float[] positions, @NonNull TileMode tile) { this(x0, y0, x1, y1, colors.clone(), positions, tile, detectColorSpace(colors)); }

二、LinearGradient 线性渐变渲染重要参数分析

1、正常渲染

正常的线性渲染 :

private void initRect(int width, int height) { mRectF = new RectF(0, 0, width, height); mPaint.setShader(new LinearGradient(0, 0, mRectF.right, 0, Color.GREEN, Color.RED, Shader.TileMode.CLAMP)); }

效果图 :

2、设置多个渐变颜色渲染

设置多个渐变颜色渲染 :

private void initRect(int width, int height) { mRectF = new RectF(0, 0, width, height); mPaint.setShader(new LinearGradient(0, 0, mRectF.right, 0, new int[]{Color.RED, Color.GREEN, Color.BLUE}, new float[]{0f, 0.5f, 1.0f}, Shader.TileMode.CLAMP)); }

效果图 :

3、设置渲染方向

设置渲染方向 :

private void initRect(int width, int height) { mRectF = new RectF(0, 0, width, height); mPaint.setShader(new LinearGradient(0, 0, mRectF.right, mRectF.bottom, new int[]{Color.RED, Color.GREEN, Color.BLUE}, new float[]{0f, 0.5f, 1.0f}, Shader.TileMode.CLAMP)); }

效果图 :

4、设置 Shader.TileMode.MIRROR 渲染模式

设置 Shader.TileMode.MIRROR 渲染模式 :

private void initRect(int width, int height) { mRectF = new RectF(0, 0, width, height); mPaint.setShader(new LinearGradient(0, 0, mRectF.right / 2, 0, new int[]{Color.RED, Color.GREEN, Color.BLUE}, new float[]{0f, 0.5f, 1.0f}, Shader.TileMode.MIRROR)); }

效果图 :

5、设置 Shader.TileMode.REPEAT 渲染模式

设置 Shader.TileMode.REPEAT 渲染模式 :

效果图 :

三、代码示例

1、正常渲染

package kim.hsl.paintgradient.linear;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.LinearGradient;import android.graphics.Paint;import android.graphics.RectF;import android.graphics.Shader;import android.util.AttributeSet;import android.view.View;import androidx.annotation.Nullable;public class LinearGradientView extends View { /** * 画笔工具 * 线性渐变渲染需要设置给该画笔工具 */ private Paint mPaint; /** * 使用线性渐变绘制的区域 */ private RectF mRectF; public LinearGradientView(Context context) { this(context, null); } public LinearGradientView(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public LinearGradientView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initPaint(); } /** * 初始化画笔工具, 主要是设置该画笔的渲染 */ private void initPaint() { mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.FILL); } private void initRect(int width, int height) { mRectF = new RectF(0, 0, width, height); mPaint.setShader(new LinearGradient(0, 0, mRectF.right, 0, Color.GREEN, Color.RED, Shader.TileMode.CLAMP)); } @Override protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) { super.onSizeChanged(width, height, oldWidth, oldHeight); initRect(width, height); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 正式绘制矩形 canvas.drawRect(mRectF, mPaint); }}

2、设置多个渐变颜色渲染

package kim.hsl.paintgradient.linear;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.LinearGradient;import android.graphics.Paint;import android.graphics.RectF;import android.graphics.Shader;import android.util.AttributeSet;import android.view.View;import androidx.annotation.Nullable;public class LinearGradientView2 extends View { /** * 画笔工具 * 线性渐变渲染需要设置给该画笔工具 */ private Paint mPaint; /** * 使用线性渐变绘制的区域 */ private RectF mRectF; public LinearGradientView2(Context context) { this(context, null); } public LinearGradientView2(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public LinearGradientView2(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initPaint(); } /** * 初始化画笔工具, 主要是设置该画笔的渲染 */ private void initPaint() { mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.FILL); } private void initRect(int width, int height) { mRectF = new RectF(0, 0, width, height); mPaint.setShader(new LinearGradient(0, 0, mRectF.right, 0, new int[]{Color.RED, Color.GREEN, Color.BLUE}, new float[]{0f, 0.5f, 1.0f}, Shader.TileMode.CLAMP)); } @Override protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) { super.onSizeChanged(width, height, oldWidth, oldHeight); initRect(width, height); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 正式绘制矩形 canvas.drawRect(mRectF, mPaint); }}

3、设置渲染方向

package kim.hsl.paintgradient.linear;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.LinearGradient;import android.graphics.Paint;import android.graphics.RectF;import android.graphics.Shader;import android.util.AttributeSet;import android.view.View;import androidx.annotation.Nullable;public class LinearGradientView3 extends View { /** * 画笔工具 * 线性渐变渲染需要设置给该画笔工具 */ private Paint mPaint; /** * 使用线性渐变绘制的区域 */ private RectF mRectF; public LinearGradientView3(Context context) { this(context, null); } public LinearGradientView3(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public LinearGradientView3(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initPaint(); } /** * 初始化画笔工具, 主要是设置该画笔的渲染 */ private void initPaint() { mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.FILL); } private void initRect(int width, int height) { mRectF = new RectF(0, 0, width, height); mPaint.setShader(new LinearGradient(0, 0, mRectF.right, mRectF.bottom, new int[]{Color.RED, Color.GREEN, Color.BLUE}, new float[]{0f, 0.5f, 1.0f}, Shader.TileMode.CLAMP)); } @Override protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) { super.onSizeChanged(width, height, oldWidth, oldHeight); initRect(width, height); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 正式绘制矩形 canvas.drawRect(mRectF, mPaint); }}

4、设置 Shader.TileMode.MIRROR 渲染模式

package kim.hsl.paintgradient.linear;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.LinearGradient;import android.graphics.Paint;import android.graphics.RectF;import android.graphics.Shader;import android.util.AttributeSet;import android.view.View;import androidx.annotation.Nullable;public class LinearGradientView4 extends View { /** * 画笔工具 * 线性渐变渲染需要设置给该画笔工具 */ private Paint mPaint; /** * 使用线性渐变绘制的区域 */ private RectF mRectF; public LinearGradientView4(Context context) { this(context, null); } public LinearGradientView4(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public LinearGradientView4(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initPaint(); } /** * 初始化画笔工具, 主要是设置该画笔的渲染 */ private void initPaint() { mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.FILL); } private void initRect(int width, int height) { mRectF = new RectF(0, 0, width, height); mPaint.setShader(new LinearGradient(0, 0, mRectF.right / 2, 0, new int[]{Color.RED, Color.GREEN, Color.BLUE}, new float[]{0f, 0.5f, 1.0f}, Shader.TileMode.MIRROR)); } @Override protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) { super.onSizeChanged(width, height, oldWidth, oldHeight); initRect(width, height); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 正式绘制矩形 canvas.drawRect(mRectF, mPaint); }}

5、设置 Shader.TileMode.REPEAT 渲染模式

package kim.hsl.paintgradient.linear;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.LinearGradient;import android.graphics.Paint;import android.graphics.RectF;import android.graphics.Shader;import android.util.AttributeSet;import android.view.View;import androidx.annotation.Nullable;public class LinearGradientView5 extends View { /** * 画笔工具 * 线性渐变渲染需要设置给该画笔工具 */ private Paint mPaint; /** * 使用线性渐变绘制的区域 */ private RectF mRectF; public LinearGradientView5(Context context) { this(context, null); } public LinearGradientView5(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public LinearGradientView5(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initPaint(); } /** * 初始化画笔工具, 主要是设置该画笔的渲染 */ private void initPaint() { mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.FILL); } private void initRect(int width, int height) { mRectF = new RectF(0, 0, width, height); mPaint.setShader(new LinearGradient(0, 0, mRectF.right / 2, 0, new int[]{Color.RED, Color.GREEN, Color.BLUE}, new float[]{0f, 0.5f, 1.0f}, Shader.TileMode.REPEAT)); } @Override protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) { super.onSizeChanged(width, height, oldWidth, oldHeight); initRect(width, height); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 正式绘制矩形 canvas.drawRect(mRectF, mPaint); }}

四、效果展示

代码下载地址 :

标签：工具

暂时没有评论，来抢沙发吧~

【Android UI】Paint Gradient 渐变渲染 ① ( LinearGradient 线性渐变渲染 | 设置渲染方向 | 设置渲染颜色 | 设置渲染模式 | MIRROR )

linux cpu占用率如何看

宝塔数据库如何清理缓存

oracle怎么创建存储过程

推荐文章

api接口有哪几种分类及功能

什么是API接口?API接口简单介绍

短信API接口概述，短信API接口的优势

7款快递物流的物流查询API工具，物流快递查询API接口怎么对接？

企业四要素: 了解企业经营成功的关键

什么是语音验证码?,语音验证码平台有哪些

全国工商查询系统怎么查企业名录

哪些平台提供实名认证的接口？

PHP如何调用API接口?

如何使用百度天气预报API接口?

最近发表

热评文章

数据接口api（数据接口API开发平台）

数据开放接口api（数据服务api开发）

Python爬虫教程：爬取酷狗音乐（python爬取

hbuilder怎么更改字体大小和颜色

直播平台api接口 - 构建卓越的直播平台

实时股票数据api接口（股票实时行情api接口）