Android高级渲染Shader（上）——基本用法

在安卓中需要做一些渲染的UI的渐变效果。实现这些效果我们需要了解安卓渐变的使用。因此我们需要了解一个非常重要的类——Shader。



有五个类继承了Shader：

BitmapShader：位图图像渲染。

LinearGradient：线性渲染。

SweepGradient：渐变渲染/梯度渲染。

RadialGradient：环形渲染。

ComposeShader：组合渲染

1、BitmapShader：位图图像渲染

BitmapShader只作用于Bitmap，用Bitmap对绘制的图形进行渲染着色。

构造函数中需要传入图片的拉升模式TileMode，同时设置不同TileMode会展示的效果也是BitmapShader的重点！

mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);

使用时，首先paint.setShader()，然后用canvas.draw();

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setShader(mBitmapShader);
canvas.drawRect(0, 0, 800, 800, mPaint);
}

这里将一个张图片去填充边长为800的正方形，长宽采用一样的拉伸模式。

CLAMP—— 是拉伸最后一个像素铺满。



MIRROR——是横向纵向不足处不断翻转镜像平铺。



REPEAT ——类似电脑壁纸，横向纵向不足的重复放置。

2、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)

构造函数中参数的意思：

x0：渲染起点的X坐标

y0：渲染起点的Y坐标

x1：渲染终点的X坐标

y1：渲染终点的Y坐标

colors：渲染的颜色集合。

positions：渲染颜色所占的比例，如果传null，则均匀渲染.

tile : 拉伸模式，和BitmaopShaper类似。

其他构造函数这里不做讲解，传入的参数含义也比较好理解

mLinearGradient = new LinearGradient(0,500,500,500,new int[]{Color.RED,Color.BLUE,Color.GRAY,Color.GREEN},null, Shader.TileMode.MIRROR);

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setShader(mLinearGradient);
canvas.drawRect(0, 0, 800, 800, mPaint);
}

效果图：。

3、SweepGradient：梯度渲染

/**
* A subclass of Shader that draws a sweep gradient around a center point.
*
* @param cx       The x-coordinate of the center
* @param cy       The y-coordinate of the center
* @param colors   The colors to be distributed between around the center.
*                 There must be at least 2 colors in the array.
* @param positions May be NULL. The relative position of
*                 each corresponding color in the colors array, beginning
*                 with 0 and ending with 1.0. If the values are not
*                 monotonic, the drawing may produce unexpected results.
*                 If positions is NULL, then the colors are automatically
*                 spaced evenly.
*/
public SweepGradient(float cx, float cy,
int colors[], float positions[])

构造函数中参数的意思：

cx：渲染圆形中心点的x坐标。

cy：渲染圆形中心点的y坐标。

colors ：渲染的颜色集合。

positions：渲染颜色所占的比例，如果传null，则均匀渲染。

其他构造函数这里不做讲解，传入的参数含义也比较好理解

mSweepGradient = new SweepGradient(250, 250, new int[]{Color.GREEN, Color.YELLOW, Color.RED}, null);

使用时，首先paint.setShader()，然后用canvas.draw();

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setShader(mSweepGradient);
canvas.drawCircle(250, 250, 250, mPaint);
}

效果图：

4、RadialGradient：环形渲染

/** Create a shader that draws a radial gradient given the center and radius.
@param centerX  The x-coordinate of the center of the radius
@param centerY  The y-coordinate of the center of the radius
@param radius   Must be positive. The radius of the circle for this gradient.
@param colors   The colors to be distributed between the center and edge of the circle
@param stops    May be <code>null</code>. Valid values are between <code>0.0f</code> and
<code>1.0f</code>. The relative position of each corresponding color in
the colors array. If <code>null</code>, colors are distributed evenly
between the center and edge of the circle.
@param tileMode The Shader tiling mode
*/
public RadialGradient(float centerX, float centerY, float radius,
@NonNull int colors[], @Nullable float stops[], @NonNull TileMode tileMode)

centerX：渲染圆形中心点的x坐标。

centerY：渲染圆形中心点的y坐标。

radius:渲染圆形的半径。

colors ：渲染的颜色集合。

stops：渲染颜色所占的比例，如果传null，则均匀渲染。

tileMode ：拉伸模式，和BitmaopShaper类似。

其他构造函数这里不做讲解，传入的参数含义也比较好理解

mRadialGradient = new RadialGradient(250, 250, 250, new int[]{Color.RED, Color.GREEN, Color.BLACK}, null, Shader.TileMode.CLAMP);

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setShader(mRadialGradient);
canvas.drawCircle(250, 250, 250, mPaint);
}

效果图：

5、ComposeShader：组合渲染

ComposeShader会将两种渲染叠加。为什么是两种呢？因为：

/** Create a new compose shader, given shaders A, B, and a combining mode.
When the mode is applied, it will be given the result from shader A as its
"dst", and the result from shader B as its "src".
@param shaderA  The colors from this shader are seen as the "dst" by the mode
@param shaderB  The colors from this shader are seen as the "src" by the mode
@param mode     The mode that combines the colors from the two shaders. If mode
is null, then SRC_OVER is assumed.
*/
public ComposeShader(Shader shaderA, Shader shaderB, Xfermode mode) {
mType = TYPE_XFERMODE;
mShaderA = shaderA;
mShaderB = shaderB;
mXferMode = mode;
init(nativeCreate1(shaderA.getNativeInstance(), shaderB.getNativeInstance(),
(mode != null) ? mode.native_instance : 0));
}

/** Create a new compose shader, given shaders A, B, and a combining PorterDuff mode.
When the mode is applied, it will be given the result from shader A as its
"dst", and the result from shader B as its "src".
@param shaderA  The colors from this shader are seen as the "dst" by the mode
@param shaderB  The colors from this shader are seen as the "src" by the mode
@param mode     The PorterDuff mode that combines the colors from the two shaders.
*/
public ComposeShader(Shader shaderA, Shader shaderB, PorterDuff.Mode mode) {
mType = TYPE_PORTERDUFFMODE;
mShaderA = shaderA;
mShaderB = shaderB;
mPorterDuffMode = mode;
init(nativeCreate2(shaderA.getNativeInstance(), shaderB.getNativeInstance(),
mode.nativeInt));
}

它的构造函数只能传两种渲染效果。（但是，是否可以在ComposeShader的构造函数中传入ComposeShader达到多种渲染效果叠加？）

构造函数中的第三个参数是设置叠加模式：http://blog.csdn.net/t12x3456/article/details/10432935

public class ComposeShaderTestView extends View {

private ComposeShader composeShader;

//位图渲染
private BitmapShader mBitmapShader;
private Bitmap mBitmap;

//线性渲染
private LinearGradient mLinearGradient;

private Paint mPaint;

public ComposeShaderTestView(Context context) {
this(context, null);
}

public ComposeShaderTestView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}

public ComposeShaderTestView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.hy2);
mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);

mLinearGradient = new LinearGradient(0, mBitmap.getHeight(), mBitmap.getWidth(), mBitmap.getHeight(), new int[]{Color.RED, Color.BLUE, Color.GRAY, Color.GREEN}, null, Shader.TileMode.MIRROR);

//组合渲染
composeShader = new ComposeShader(mBitmapShader, mLinearGradient, PorterDuff.Mode.MULTIPLY);

mPaint = new Paint();
mPaint.setAntiAlias(true);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setShader(composeShader);
canvas.drawRect(0, 0, mBitmap.getWidth(), mBitmap.getHeight(), mPaint);
}
}

这里将线性渲染和位图渲染叠加了，效果图：



如果基本了解了Shader的用法，那就看一下看一下Shader的实例效果：

http://blog.csdn.net/u011094054/article/details/75024934

代码地址：https://github.com/AxeChen/Gradient