Android 高階UI6 高階渲染
摘要：
Android 高階UI 目錄
Paint 畫筆的高階技能
渲染 Shader:
BitmapShader點陣圖的圖象渲染器
LinearGradient線性渲染
RadialGradient...
Paint 畫筆的高階技能
渲染 Shader:
BitmapShader點陣圖的圖象渲染器
LinearGradient線性渲染
RadialGradient環形渲染
SweepGradient梯度渲染（掃描渲染）
ComposeShader組合渲染
可以繪製圖片、顏色塊、文字
canvas.drawCircle()
canvas.drawRect()
canvas.drawOval()
public class LinearGradientTextView extends android.support.v7.widget.AppCompatTextView {
private TextPaint paint;
private LinearGradient linearGradient;
private Matrix matrix;
private float translateX;
private float deltaX = 20;
public LinearGradientTextView(Context context) {
super(context);
}
public LinearGradientTextView(Context context,
@Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
paint = getPaint();
//GradientSize=兩個文字的大小
String text = getText().toString();
float textWidth = paint.measureText(text);
int gradientSize = (int) (3 * textWidth / text.length());
linearGradient = new LinearGradient(-gradientSize, 0, 0, 0,
new int[]{0x22ffffff, 0xffffffff, 0x22ffffff},
new float[]{0, 0.5f, 1}, TileMode.CLAMP);//邊緣融合
paint.setShader(linearGradient);
matrix = new Matrix();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float textWidth = getPaint().measureText(getText().toString());
translateX += deltaX;
if(translateX > textWidth + 1|| translateX < 1){
deltaX = -deltaX;
}
//matrix.setScale(sx, sy)
//動畫平移
matrix.setTranslate(translateX, 0);
linearGradient.setLocalMatrix(matrix);
postInvalidateDelayed(50);
}
}
public class MyGradientView extends View {
private Bitmap bitmap;
private Paint paint;
private BitmapShader bitmapShader;
private int width;
private int height;
private int[] colors = {Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW};
private RadialGradient radialGradient;
private SweepGradient sweepGradient;
//組合渲染
private ComposeShader composeShader;
public MyGradientView(Context context) {
super(context);
bitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.fengjing)).getBitmap();
paint = new Paint();
width = bitmap.getWidth();
height = bitmap.getHeight();
}
public MyGradientView(Context context,
@Nullable AttributeSet attrs,
Bitmap bitmap) {
super(context, attrs);
this.bitmap = bitmap;
}
public MyGradientView(Context context,
@Nullable AttributeSet attrs, int defStyleAttr,
Bitmap bitmap) {
super(context, attrs, defStyleAttr);
this.bitmap = bitmap;
}
/**
*
* @param canvas
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.WHITE);
//canvas.drawBitmap(bitmap, 0, 0, paint);
/**
* TileMode.CLAMP 拉伸最後一個畫素去鋪滿剩下的地方
* TileMode.MIRROR 通過映象翻轉鋪滿剩下的地方
* TileMode.REPEAT 重複圖片填充整個畫面(電腦設定桌布)
*/
bitmapShader = new BitmapShader(bitmap, TileMode.REPEAT, TileMode.REPEAT);
//bitmapShader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP);
paint.setShader(bitmapShader);
paint.setAntiAlias(true);
//canvas.drawRect(new Rect(0, 0, 800, 800), paint);
//設定畫素矩陣，來調整大小，為了解決寬高不一致的問題
//float scale = Math.max(width, height) * 1.0f / Math.min(width, height);
//Matrix matrix = new Matrix();
//matrix.setScale(scale, scale);//縮放比例
//bitmapShader.setLocalMatrix(matrix);
//canvas.drawRect(new Rect(0, 0, 800, 800), paint);
//canvas.drawCircle(width/2,width/2, width/2,paint);
//canvas.drawCircle(Math.max(width, height) / 2f,
//scale * Math.max(width, height) / 2f, Math.max(width, height) / 2f, paint);
//canvas.drawOval(new RectF(0, 0, width, height * 1.5f), paint);
// canvas.drawOval(new RectF(0,0,width,width),paint);
//通過shapeDrawable也可以實現
//ShapeDrawable shapeDrawable =new ShapeDrawable(new OvalShape());
//shapeDrawable.getPaint().setShader(bitmapShader);
//shapeDrawable.setBounds(0,0,width,width);
//shapeDrawable.draw(canvas);
/**
* 線性漸變
* x0，y0 起始點
* x1，y1 結束點
* int[] colors 中間依次要出現的顏色
* float[] positions 陣列大小跟colors陣列一樣大，中間依次擺放的幾個顏色分別放置在那個位置上(參考比例從左往右)
* title
*
*/
//LinearGradient linearGradient = new LinearGradient(0, 0, 400, 400, colors, null,
//TileMode.REPEAT);
//paint.setShader(linearGradient);
//canvas.drawRect(0,0,400,400,paint);
////環形渲染
//radialGradient = new RadialGradient(300,300,100,colors,null,TileMode.REPEAT);
//paint.setShader(radialGradient);
//canvas.drawCircle(300,300,300,paint);
//梯度渲染
//sweepGradient = new SweepGradient(300, 300, colors, null);
//paint.setShader(sweepGradient);
//canvas.drawCircle(300, 300, 300, paint);
//組合渲染
LinearGradient linearGradient = new LinearGradient(0, 0, 400, 400, colors, null,
TileMode.REPEAT);
composeShader = new ComposeShader(linearGradient, bitmapShader, PorterDuff.Mode.SRC_OVER);
paint.setShader(composeShader);
canvas.drawRect(0, 0, 800, 1000, paint);
}
}
public class ZoomImageView extends View {
//放大倍數
private static final int FACTOR = 3;
private static final int RADIUS = 100;
public Bitmap bitmap;
private ShapeDrawable drawable;
private Matrix matrix = new Matrix();
public ZoomImageView(Context context) {
super(context);
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.beauty);
Bitmap bmp = bitmap;
bmp = Bitmap
.createScaledBitmap(bmp, bmp.getWidth() * FACTOR, bmp.getHeight() * FACTOR, true);
//製作一個圓形的圖片(放大的區域性)，蓋在canvas上
BitmapShader shader = new BitmapShader(bmp, TileMode.CLAMP, TileMode.CLAMP);
drawable = new ShapeDrawable(new OvalShape());
drawable.getPaint().setShader(shader);
//切出矩形區域----用於繪製圓（內切圓）
drawable.setBounds(0, 0, RADIUS * 2, RADIUS * 2);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawBitmap(bitmap, 0, 0, null);
//畫製作好的圓形圖片
drawable.draw(canvas);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
int x = (int) event.getX();
int y = (int) event.getY();
matrix.setTranslate(RADIUS - x * FACTOR, RADIUS - y * FACTOR);
drawable.getPaint().getShader().setLocalMatrix(matrix);
drawable.setBounds(x - RADIUS, y - RADIUS, x + RADIUS, y + RADIUS);
//手指按下才進行縮放
postInvalidate();
return super.onTouchEvent(event);
}
}