在安卓中需要做一些渲染的UI的漸變效果。實(shí)現(xiàn)這些效果我們需要了解安卓漸變的使用。因此我們需要了解一個(gè)非常重要的類——Shader。
有五個(gè)類繼承了Shader：
BitmapShader：位圖圖像渲染。
LinearGradient：線性渲染。
SweepGradient：漸變渲染/梯度渲染。
RadialGradient：環(huán)形渲染。
ComposeShader：組合渲染
1、BitmapShader：位圖圖像渲染####
BitmapShader只作用于Bitmap，用Bitmap對(duì)繪制的圖形進(jìn)行渲染著色。
構(gòu)造函數(shù)中需要傳入圖片的拉升模式TileMode，同時(shí)設(shè)置不同TileMode會(huì)展示的效果也是BitmapShader的重點(diǎn)！
mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.MIRROR, Shader.TileMode.MIRROR);
使用時(shí)，首先paint.setShader()，然后用canvas.draw();
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setShader(mBitmapShader);
canvas.drawRect(0, 0, 800, 800, mPaint);
}
這里將一個(gè)張圖片去填充邊長(zhǎng)為800的正方形，長(zhǎng)寬采用一樣的拉伸模式。
CLAMP—— 是拉伸最后一個(gè)像素鋪滿。
MIRROR——是橫向縱向不足處不斷翻轉(zhuǎn)鏡像平鋪。
REPEAT ——類似電腦壁紙，橫向縱向不足的重復(fù)放置。
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)
構(gòu)造函數(shù)中參數(shù)的意思：
x0：渲染起點(diǎn)的X坐標(biāo)
y0：渲染起點(diǎn)的Y坐標(biāo)
x1：渲染終點(diǎn)的X坐標(biāo)
y1：渲染終點(diǎn)的Y坐標(biāo)
colors：渲染的顏色集合。
positions：渲染顏色所占的比例，如果傳null，則均勻渲染.
tile : 拉伸模式，和BitmaopShaper類似。
其他構(gòu)造函數(shù)這里不做講解，傳入的參數(shù)含義也比較好理解
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[])
構(gòu)造函數(shù)中參數(shù)的意思：
cx：渲染圓形中心點(diǎn)的x坐標(biāo)。
cy：渲染圓形中心點(diǎn)的y坐標(biāo)。
colors ：渲染的顏色集合。
positions：渲染顏色所占的比例，如果傳null，則均勻渲染。
其他構(gòu)造函數(shù)這里不做講解，傳入的參數(shù)含義也比較好理解
mSweepGradient = new SweepGradient(250, 250, new int[]{Color.GREEN, Color.YELLOW, Color.RED}, null);
使用時(shí)，首先paint.setShader()，然后用canvas.draw();
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setShader(mSweepGradient);
canvas.drawCircle(250, 250, 250, mPaint);
}
效果圖：
4、RadialGradient：環(huán)形渲染####
/** 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：渲染圓形中心點(diǎn)的x坐標(biāo)。
centerY：渲染圓形中心點(diǎn)的y坐標(biāo)。
radius:渲染圓形的半徑。
colors ：渲染的顏色集合。
stops：渲染顏色所占的比例，如果傳null，則均勻渲染。
tileMode ：拉伸模式，和BitmaopShaper類似。
其他構(gòu)造函數(shù)這里不做講解，傳入的參數(shù)含義也比較好理解
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會(huì)將兩種渲染疊加。為什么是兩種呢？因?yàn)椋?/p>
/** 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));
}
它的構(gòu)造函數(shù)只能傳兩種渲染效果。（但是，是否可以在ComposeShader的構(gòu)造函數(shù)中傳入ComposeShader達(dá)到多種渲染效果疊加？）
構(gòu)造函數(shù)中的第三個(gè)參數(shù)是設(shè)置疊加模式：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的實(shí)例效果：
http://www.itdecent.cn/p/3ded93e3b863
