自定義繼承ImageView
效果如下:
device-2017-06-10-221258.png
實現圓角頭像前我們首先做個小的測試:
自定義一個PathView,在Xml里面設置背景為粉紅色:
T6GQNEMZMYGC{)B2`YDF`7W.png
畫一個和控件大小一樣的正方形,背景色為白色
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setColor(Color.WHITE);
canvas.drawRect(0,0,width,height,mPaint);
}
運行效果如下:
device-2017-06-10-230508.png
很簡單的東西,然后在PathView里面添加如下代碼:
設置Paint
mPaint = new Paint();
mPaint.setAntiAlias(true);
設置Path
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
width = w;
height = h;
initPath();
}
private void initPath() {
//設置
path = new Path();
path.addCircle(width / 2, height / 2, width / 2,
Path.Direction.CW);
path.setFillType(Path.FillType.INVERSE_WINDING);
}
重寫onDraw
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//畫白色矩形
mPaint.setColor(Color.WHITE);
canvas.drawRect(0,0,width,height,mPaint);
//畫Path
mPaint.setColor(Color.YELLOW);
canvas.drawPath(path,mPaint);
}
反正代碼是很簡單的東西,看看效果:
device-2017-06-10-230909.png
如何實現這一步的呢,是根據path的四中填充方式,這里用的是反:反非零環繞數規則(INVERSE_WINDING)具體參考:GscSloop
重點
如果我們將path畫的黃色部分,變為透明的漏出底部紅色背景不就正好了,不就實現了圓形頭像,這里運用了一個很重要的知識:
將paint設置為:
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
//設置圖形重疊時的處理方式，如合并，取交集或并集，經常用來制作橡皮的擦除效果
setXfermode(Xfermode xfermode);
看看效果:
device-2017-06-10-231923.png
尼瑪確實是橡皮擦效果,結果把我的背景都擦沒有了,留下黑黑的背景
結果背景問題
因為背景沒有了,所以要要處理這一個那就保存原有背景:
//保留圖層
canvas.saveLayer(0,0,width,height,null ,Canvas.ALL_SAVE_FLAG);
看看效果:
device-2017-06-10-232403.png
果然可以實現這個效果了,那么如果實現圖片圓形更是很簡單了,過程不再贅述直接貼上代碼,總體很簡單:
代碼:
public class CircleImage extends ImageView {
private Bitmap bitmap = null;
private int width;
private int height;
private TechView.FitType mFitType = TechView.FitType.CENTER;
private Bitmap newbitmap;
private Paint mPaint;
private Path path;
public CircleImage(Context context) {
this(context, null);
}
public CircleImage(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public CircleImage(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
setScaleType(ScaleType.MATRIX);
setBitmap(context);
}
private void init() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
width = w;
height = h;
intPath();
}
private void intPath() {
//設置
path = new Path();
path.addCircle(width / 2, height / 2, width / 2,
Path.Direction.CW);
path.setFillType(Path.FillType.INVERSE_WINDING);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (null != newbitmap) {
//要保存畫布,要不會出現背景為黑色的情況
canvas.saveLayer(0, 0, width, width, null, Canvas.ALL_SAVE_FLAG);
canvas.drawBitmap(newbitmap, new Matrix(), new Paint());
canvas.drawPath(path, mPaint);
}
}
public void setBitmap(final Context mContext) {
String url = "https://ws1.sinaimg.cn/large/610dc034ly1fgchgnfn7dj20u00uvgnj.jpg";
Glide.with(mContext)
.load(url)
.asBitmap()
.placeholder(R.mipmap.ic_launcher)
.error(R.mipmap.ic_launcher)
.into(new SimpleTarget<Bitmap>() {
@Override
public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
bitmap = resource;
//縮放圖片
setScaleImage(bitmap);
invalidate();
}
@Override
public void onLoadFailed(Exception e, Drawable errorDrawable) {
super.onLoadFailed(e, errorDrawable);
bitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.image_1);
setScaleImage(bitmap);
invalidate();
}
});
}
private void setScaleImage(Bitmap mBitmap) {
// 獲得圖片的寬高
int btWidth = mBitmap.getWidth();
int btHeight = mBitmap.getHeight();
// 設置想要的大小
int newWidth = width;
int newHeight = height;
// 計算縮放比例
float scaleWidth = ((float) newWidth) / btWidth;
float scaleHeight = ((float) newHeight) / btHeight;
// 取得想要縮放的matrix參數
Matrix matrix = new Matrix();
matrix.postScale(scaleWidth, scaleHeight);
// 得到新的圖片
newbitmap = Bitmap.createBitmap(mBitmap, 0, 0, btWidth, btHeight, matrix,
true);
}
}
