Android⾃定义View——可设置形状(圆形、圆⾓矩形、椭
圆)的ImageView,抗锯齿
(如果对⾃定义View不太熟悉,可以查看上篇⽂章《》)
有时显⽰的图⽚(如⽤户头像)是圆形或者圆⾓矩形的,如果我们把每⼀种形状的图⽚都裁剪成⼀个图⽚⽂件,这样既⿇烦也浪费空间,所以最好的办法是通过代码来设置图⽚的显⽰形状。显⽰图⽚⽤到的是ImageView,最简单的设置图⽚形状的⽅法就是在draw()⾥⾯通过canvas.clipPath()把画布裁剪成相应形状,但这种⽅法有个很⼤的缺点,就是边缘锯齿明显。
这⾥我通过BitmapShader来绘制图⽚,可以很好地解决锯齿的问题,将画笔的渲染器设置成BitmapShader,则通过画笔绘制的图案则以图⽚为背景。关键步骤为:
// 获取图⽚
Bitmap bitmap = BitmapFromDrawable(getDrawable());
// 设置图⽚渲染器
mBitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
// 把渲染器放⼊画笔中
mBitmapPaint.tShader(mBitmapShader);
// 在画布上画圆,即可绘制出圆形图⽚
canvas.drawCircle(cx, cy, radius, mBitmapPaint);
效果如下:
关键代码:
public class ShapeImageView extends ImageView {
public static int SHAPE_REC = 1; // 矩形
public static int SHAPE_CIRCLE = 2; // 圆形
public static int SHAPE_OVAL = 3; // 椭圆
private float mBorderSize = 0; // 边框⼤⼩,默认为0,即⽆边框
private int mBorderColor = Color.WHITE; // 边框颜⾊,默认为⽩⾊
private int mShape = SHAPE_REC; // 形状,默认为直接矩形
private float mRoundRadius = 0; // 矩形的圆⾓半径,默认为0,即直⾓矩形
private Paint mBorderPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private Paint mBorderPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private RectF mViewRect = new RectF(); // imageview的矩形区域
private RectF mBorderRect = new RectF(); // 边框的矩形区域
private final Matrix mShaderMatrix = new Matrix();
private Paint mBitmapPaint = new Paint();
private BitmapShader mBitmapShader;
private Bitmap mBitmap;
public ShapeImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ShapeImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle); // 虽然此处会调⽤tImageDrawable,但此时成员变量还未被正确初始化 init(attrs);
mBorderPaint.tStyle(Style.STROKE);
mBorderPaint.tStrokeWidth(mBorderSize);
mBorderPaint.tColor(mBorderColor);
mBorderPaint.tAntiAlias(true);
mBitmapPaint.tAntiAlias(true);
super.tScaleType(ScaleType.CENTER_CROP); // 固定为CENTER_CROP,其他不⽣效
}
@Override
public void tImageResource(int resId) {
super.tImageResource(resId);
mBitmap = BitmapFromDrawable(getDrawable());
tupBitmapShader();
}
@Override
public void tImageDrawable(Drawable drawable) {
super.tImageDrawable(drawable);
mBitmap = BitmapFromDrawable(drawable);
tupBitmapShader();
}
@Override
public void tScaleType(ScaleType scaleType) {
if (scaleType != ScaleType.CENTER_CROP) {
throw new IllegalArgumentException(String.format("ScaleType %s not supported.", scaleType));
}
}
private void init(AttributeSet attrs) {
全新版大学英语听说教程3答案TypedArray a = getContext().obtainStyledAttributes(attrs,
R.styleable.ShapeImageView);
mShape = a.getInt(R.styleable.ShapeImageView_shape, mShape);
mRoundRadius = a.getDimension(R.styleable.ShapeImageView_round_radius, mRoundRadius);
laux
mBorderSize = a.getDimension(R.styleable.ShapeImageView_border_size, mBorderSize);
mBorderColor = a.getColor(R.styleable.ShapeImageView_border_color, mBorderColor);
深圳cad培训
}
/**
* 对于普通的view,在执⾏到onDraw()时,背景图已绘制完成
* <p/>
* 对于ViewGroup,当它没有背景时直接调⽤的是dispatchDraw()⽅法, ⽽绕过了draw()⽅法,
* 当它有背景的时候就调⽤draw()⽅法,⽽draw()⽅法⾥包含了dispatchDraw()⽅法的调⽤,
*/
@Override
public void onDraw(Canvas canvas) {
if (getDrawable() != null) {
if (mShape == SHAPE_CIRCLE) {
canvas.drawCircle(getWidth() / 2, getHeight() / 2,
Math.min(getWidth(), getHeight()) / 2, mBitmapPaint);
} el if (mShape == SHAPE_OVAL) {
canvas.drawOval(mViewRect, mBitmapPaint);
} el {
canvas.drawRoundRect(mViewRect, mRoundRadius, mRoundRadius, mBitmapPaint);
}
}telent
if (mBorderSize > 0) { // 绘制边框
if (mShape == SHAPE_CIRCLE) {
canvas.drawCircle(mViewRect.right / 2, mViewRect.bottom / 2,
计酬
Math.min(mViewRect.right, mViewRect.bottom) / 2 - mBorderSize / 2, mBorderPaint);
} el if (mShape == SHAPE_OVAL) {
canvas.drawOval(mBorderRect, mBorderPaint);
} el {
canvas.drawRoundRect(mBorderRect, mRoundRadius, mRoundRadius, mBorderPaint);
}
}
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
initRect();
tupBitmapShader();
}
餐巾纸英文// 不能在onLayout()调⽤invalidate(),否则导致绘制异常。(tupBitmapShader()中调⽤了invalidate()) @Override
protected void onLayout(boolean changed, int left, int top, int right,
int bottom) {
// initRect();
// tupBitmapShader();
}
private void tupBitmapShader() {
// super(context, attrs, defStyle)调⽤tImageDrawable时,成员变量还未被正确初始化
cpa是什么意思if (mBitmapPaint == null) {
return;
}
if (mBitmap == null) {
invalidate();
return;
}
mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); mBitmapPaint.tShader(mBitmapShader);
// 固定为CENTER_CROP,使图⽚在view中居中并裁剪
mShaderMatrix.t(null);
// 缩放到⾼或宽 与view的⾼或宽 匹配
float scale = Math.max(getWidth() * 1f / Width(), getHeight() * 1f / Height()); // 由于BitmapShader默认是从画布的左上⾓开始绘制,所以把其平移到画布中间,即居中
float dx = (getWidth() - Width() * scale) / 2;
float dy = (getHeight() - Height() * scale) / 2;
mShaderMatrix.tScale(scale, scale);
mShaderMatrix.postTranslate(dx, dy);
mBitmapShader.tLocalMatrix(mShaderMatrix);
invalidate();
}
// 设置图⽚的绘制区域
private void initRect() {
mViewRect.left = 0;
mViewRect.right = getWidth(); // 宽度
mViewRect.bottom = getHeight(); // ⾼度
// 边框的矩形区域不能等于ImageView的矩形区域,否则边框的宽度只显⽰了⼀半 p = mBorderSize / 2;
mBorderRect.left = mBorderSize / 2;
al qaeda
mBorderRect.right = getWidth() - mBorderSize / 2;
mBorderRect.bottom = getHeight() - mBorderSize / 2;
}
public int getShape() {
return mShape;
}
public void tShape(int shape) {
mShape = shape;
}
public float getBorderSize() {
return mBorderSize;
}
public void tBorderSize(int mBorderSize) {
this.mBorderSize = mBorderSize;
mBorderPaint.tStrokeWidth(mBorderSize);
initRect();
invalidate();
doit}
public int getBorderColor() {
return mBorderColor;
}
public void tBorderColor(int mBorderColor) {
this.mBorderColor = mBorderColor;
mBorderPaint.tColor(mBorderColor);
invalidate();
}
public float getRoundRadius() {
return mRoundRadius;
}
public void tRoundRadius(float mRoundRadius) {
this.mRoundRadius = mRoundRadius;
invalidate();
}
}
res/l
<declare-styleable name="ShapeImageView">
<attr name="shape" format="enum">
<enum name="rect" value="1"/>
<enum name="circle" value="2"/>
<enum name="oval" value="3"/>
</attr>
<attr name="round_radius" format="dimension"/>
<attr name="border_size" format="dimension"/>omg白洁
<attr name="border_color" format="color"/>
</declare-styleable>
相关代码我放在了github上: , 接下来的项⽬代码我都会放在上⾯,争取做⼀个类型⼯具的库。关于⾃定义样式的使⽤,我将在下⼀节⽤这个例⼦说明。