高级UI汇总
SeniorUI04_Paint高级渲染Shader使用
##一 RadialGradient
-
效果图:
-
Demo:
RadialGradientView -
Code:
public class RadialGradientView extends View {
private Paint mPaint;
private int[] mColors = {Color.RED,Color.GREEN,Color.BLUE,Color.YELLOW};
public RadialGradientView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.WHITE);
RadialGradient mRadialGradient = new RadialGradient(350, 350, 100, mColors, null, Shader.TileMode.CLAMP);
mPaint.setShader(mRadialGradient);
canvas.drawCircle(350, 350, 300, mPaint);
}
}
##二 SweepGradient梯段渲染
- 效果图
- Demo
SweepGradientView - Code
SweepGradient mSweepGradient = new SweepGradient(300, 300, mColors, null);
mPaint.setShader(mSweepGradient);
canvas.drawCircle(350, 350, 300, mPaint);
##三 ComposeShader组合渲染
- 效果图
- Demo
ComposeGradientView - Code
/***************用ComposeShader即可实现心形图渐变效果*********************************/
//创建BitmapShader,用以绘制心
BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
//创建LinearGradient,用以产生从左上角到右下角的颜色渐变效果
LinearGradient linearGradient = new LinearGradient(0, 0, mWidth, mHeight, Color.GREEN, Color.BLUE, Shader.TileMode.CLAMP);
//bitmapShader对应目标像素,linearGradient对应源像素,像素颜色混合采用MULTIPLY模式
ComposeShader composeShader = new ComposeShader(bitmapShader, linearGradient, PorterDuff.Mode.MULTIPLY);
//将组合的composeShader作为画笔paint绘图所使用的shader
mPaint.setShader(composeShader);
//用composeShader绘制矩形区域
canvas.drawRect(50, 50, mWidth, mHeight, mPaint);