您的位置: 首页  >  文章  >  Android渲染器Shader：LinearGradient（一）

Android渲染器Shader：LinearGradient（一）

分类: 文章 • 2025-02-21 16:13:40


Android渲染器Shader：LinearGradient（一）

LinearGradient是Android的线性渲染器。我写5个LinearGradient渲染器渲染后的View表现结果。其中，LinearGradient 1,2,3只是修改渲染器的渲染模式，LinearGradient 1为重复（repeat），LinearGradient 2为镜像模式（mirror），LinearGradient 3为拉伸（clamp）。注意到LinearGradient 3在拉伸模式下，如果设定的LinearGradient不足以渲染整个画面，那么将拉伸最后一个颜色（我写的这个例子是蓝色Color.BLUE）。
LinearGradient 4和5则只是为了演示构造LinearGradient的float x0, float y0, float x1, float y1在复杂设置后会形成的画面渲染效果。
以LinearGradient 4为例，如果设定x0=0，y0=0，x1=300，y1=300，那么就是从左上角往右下角沿这个300 X 300的正方形的左上——右下对称轴渲染。

写一个完整代码。
先写一个LinearGradientView，这个LinearGradient继承自View：

package zhangphil.demo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.graphics.Shader;
import android.view.View;

public class LinearGradientView extends View {

	private LinearGradient linearGradient1 = null;
	private Paint paint1 = null;

	private LinearGradient linearGradient2 = null;
	private Paint paint2 = null;

	private LinearGradient linearGradient3 = null;
	private Paint paint3 = null;

	private LinearGradient linearGradient4 = null;
	private Paint paint4 = null;

	private LinearGradient linearGradient5 = null;
	private Paint paint5 = null;

	public LinearGradientView(Context context) {
		super(context);

		linearGradient1 = new LinearGradient(0, 0, 300, 0, new int[] { Color.RED, Color.YELLOW, Color.BLUE }, null,
				Shader.TileMode.REPEAT);
		paint1 = new Paint();

		linearGradient2 = new LinearGradient(0, 0, 300, 0, new int[] { Color.RED, Color.YELLOW, Color.BLUE }, null,
				Shader.TileMode.MIRROR);
		paint2 = new Paint();

		linearGradient3 = new LinearGradient(0, 0, 300, 0, new int[] { Color.RED, Color.YELLOW, Color.BLUE }, null,
				Shader.TileMode.CLAMP);
		paint3 = new Paint();

		linearGradient4 = new LinearGradient(0, 0, 300, 300, new int[] { Color.RED, Color.YELLOW, Color.BLUE }, null,
				Shader.TileMode.REPEAT);
		paint4 = new Paint();

		linearGradient5 = new LinearGradient(0, 300, 300, 0, new int[] { Color.RED, Color.YELLOW, Color.BLUE }, null,
				Shader.TileMode.REPEAT);
		paint5 = new Paint();
	}

	public LinearGradientView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);

		int left = 10, top = 20, right = 0, bottom = 0;
		// 渲染到View的最右边
		right = this.getWidth() - left;

		// 渲染的每一个矩形高度，也可以简单理解为坐标系的结束值y
		bottom = this.getHeight() / 5;

		// 渲染器1
		paint1.setShader(linearGradient1);
		Rect rect1 = new Rect(left, top, right, bottom);
		canvas.drawRect(rect1, paint1);

		top = top + bottom;
		// 渲染器2
		paint2.setShader(linearGradient2);
		Rect rect2 = new Rect(left, top, right, bottom * 2);
		canvas.drawRect(rect2, paint2);

		top = top + bottom;
		// 渲染器3
		paint3.setShader(linearGradient3);
		Rect rect3 = new Rect(left, top, right, bottom * 3);
		canvas.drawRect(rect3, paint3);

		top = top + bottom;
		// 渲染器4
		paint4.setShader(linearGradient4);
		Rect rect4 = new Rect(left, top, right, bottom * 4);
		canvas.drawRect(rect4, paint4);

		top = top + bottom;
		// 渲染器5
		paint5.setShader(linearGradient5);
		Rect rect5 = new Rect(left, top, right, bottom * 5);
		canvas.drawRect(rect5, paint5);
	}
}


简单期间，直接在Activity里面的setContentView里面加载：

package zhangphil.demo;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		
		LinearGradientView linearGradientView= new LinearGradientView(this); ;
		setContentView(linearGradientView);
	}
}


代码运行结果：

Android渲染器Shader：LinearGradient（一）



Android渲染器Shader：LinearGradient（一）

LinearGradient是Android的线性渲染器。我写5个LinearGradient渲染器渲染后的View表现结果。其中，LinearGradient 1,2,3只是修改渲染器的渲染模式，LinearGradient 1为重复（repeat），LinearGradient 2为镜像模式（mirror），LinearGradient 3为拉伸（clamp）。注意到LinearGradient 3在拉伸模式下，如果设定的LinearGradient不足以渲染整个画面，那么将拉伸最后一个颜色（我写的这个例子是蓝色Color.BLUE）。
LinearGradient 4和5则只是为了演示构造LinearGradient的float x0, float y0, float x1, float y1在复杂设置后会形成的画面渲染效果。
以LinearGradient 4为例，如果设定x0=0，y0=0，x1=300，y1=300，那么就是从左上角往右下角沿这个300 X 300的正方形的左上——右下对称轴渲染。

写一个完整代码。
先写一个LinearGradientView，这个LinearGradient继承自View：

package zhangphil.demo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.graphics.Shader;
import android.view.View;

public class LinearGradientView extends View {

	private LinearGradient linearGradient1 = null;
	private Paint paint1 = null;

	private LinearGradient linearGradient2 = null;
	private Paint paint2 = null;

	private LinearGradient linearGradient3 = null;
	private Paint paint3 = null;

	private LinearGradient linearGradient4 = null;
	private Paint paint4 = null;

	private LinearGradient linearGradient5 = null;
	private Paint paint5 = null;

	public LinearGradientView(Context context) {
		super(context);

		linearGradient1 = new LinearGradient(0, 0, 300, 0, new int[] { Color.RED, Color.YELLOW, Color.BLUE }, null,
				Shader.TileMode.REPEAT);
		paint1 = new Paint();

		linearGradient2 = new LinearGradient(0, 0, 300, 0, new int[] { Color.RED, Color.YELLOW, Color.BLUE }, null,
				Shader.TileMode.MIRROR);
		paint2 = new Paint();

		linearGradient3 = new LinearGradient(0, 0, 300, 0, new int[] { Color.RED, Color.YELLOW, Color.BLUE }, null,
				Shader.TileMode.CLAMP);
		paint3 = new Paint();

		linearGradient4 = new LinearGradient(0, 0, 300, 300, new int[] { Color.RED, Color.YELLOW, Color.BLUE }, null,
				Shader.TileMode.REPEAT);
		paint4 = new Paint();

		linearGradient5 = new LinearGradient(0, 300, 300, 0, new int[] { Color.RED, Color.YELLOW, Color.BLUE }, null,
				Shader.TileMode.REPEAT);
		paint5 = new Paint();
	}

	public LinearGradientView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);

		int left = 10, top = 20, right = 0, bottom = 0;
		// 渲染到View的最右边
		right = this.getWidth() - left;

		// 渲染的每一个矩形高度，也可以简单理解为坐标系的结束值y
		bottom = this.getHeight() / 5;

		// 渲染器1
		paint1.setShader(linearGradient1);
		Rect rect1 = new Rect(left, top, right, bottom);
		canvas.drawRect(rect1, paint1);

		top = top + bottom;
		// 渲染器2
		paint2.setShader(linearGradient2);
		Rect rect2 = new Rect(left, top, right, bottom * 2);
		canvas.drawRect(rect2, paint2);

		top = top + bottom;
		// 渲染器3
		paint3.setShader(linearGradient3);
		Rect rect3 = new Rect(left, top, right, bottom * 3);
		canvas.drawRect(rect3, paint3);

		top = top + bottom;
		// 渲染器4
		paint4.setShader(linearGradient4);
		Rect rect4 = new Rect(left, top, right, bottom * 4);
		canvas.drawRect(rect4, paint4);

		top = top + bottom;
		// 渲染器5
		paint5.setShader(linearGradient5);
		Rect rect5 = new Rect(left, top, right, bottom * 5);
		canvas.drawRect(rect5, paint5);
	}
}


简单期间，直接在Activity里面的setContentView里面加载：

package zhangphil.demo;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		
		LinearGradientView linearGradientView= new LinearGradientView(this); ;
		setContentView(linearGradientView);
	}
}


代码运行结果：

Android渲染器Shader：LinearGradient（一）

相关推荐