自定义控件之圆形 / 圆角 ImageView - Android

TOP

自定义控件之圆形 / 圆角 ImageView(二)

2017-10-12 17:57:46 【大中小】浏览:3537次

ride 15 protected void onDraw(Canvas canvas) { 16 Bitmap rawBitmap = getBitmap(getDrawable()); 17 if (rawBitmap != null){ 18 int viewWidth = getWidth(); 19 int viewHeight = getHeight(); 20 int viewMinSize = Math.min(viewWidth, viewHeight); 21 float dstWidth = viewMinSize; 22 float dstHeight = viewMinSize; 23 if (mShader == null || !rawBitmap.equals(mRawBitmap)){ 24 mRawBitmap = rawBitmap; 25 mShader = new BitmapShader(mRawBitmap, TileMode.CLAMP, TileMode.CLAMP); 26 } 27 if (mShader != null){ 28 mMatrix.setScale((dstWidth - mBorderWidth * 2) / rawBitmap.getWidth(), (dstHeight - mBorderWidth * 2) / rawBitmap.getHeight()); 29 mShader.setLocalMatrix(mMatrix); 30 } 31 mPaintBitmap.setShader(mShader); 32 mPaintBorder.setStyle(Paint.Style.STROKE); 33 mPaintBorder.setStrokeWidth(mBorderWidth); 34 mPaintBorder.setColor(mBorderColor); 35 float radius = viewMinSize / 2.0f; 36 canvas.drawCircle(radius, radius, radius - mBorderWidth / 2.0f, mPaintBorder); 37 canvas.translate(mBorderWidth, mBorderWidth); 38 canvas.drawCircle(radius - mBorderWidth, radius - mBorderWidth, radius - mBorderWidth, mPaintBitmap); 39 } else { 40 super.onDraw(canvas); 41 } 42 } 43 44 private Bitmap getBitmap(Drawable drawable){ 45 if (drawable instanceof BitmapDrawable){ 46 return ((BitmapDrawable)drawable).getBitmap(); 47 } else if (drawable instanceof ColorDrawable){ 48 Rect rect = drawable.getBounds(); 49 int width = rect.right - rect.left; 50 int height = rect.bottom - rect.top; 51 int color = ((ColorDrawable)drawable).getColor(); 52 Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); 53 Canvas canvas = new Canvas(bitmap); 54 canvas.drawARGB(Color.alpha(color), Color.red(color), Color.green(color), Color.blue(color)); 55 return bitmap; 56 } else { 57 return null; 58 } 59 } 60 61 private int dip2px(int dipVal) 62 { 63 float scale = getResources().getDisplayMetrics().density; 64 return (int)(dipVal * scale + 0.5f); 65 } 66 } View Code

看代码中，加边框实际上就是用实心纯色的 Paint 画了一个圆边，在此基础上画上原来的头像即可。

需要的注意的地方有三个：

1)　　圆框的半径不是 radius ，而应该是 radius - mBorderWidth / 2.0f 。想象着拿着笔去画线，线其实是画在右图中白色圈的位置，只不过它很粗。

2)　　在ImageView大小不变的基础上，头像的实际大小要比没有边框的时候小了，所以 mMatrix.setScale 的时候要把边框的宽度去掉。

3)　　画头像Bitmap的时候不能直接 canvas.drawCircle(radius, radius, radius - mBorderWidth, mPaintBitmap) ，这样你会发现头像的右侧和下方边缘被拉伸了（右图）

　　为什么呢？因为 Paint 默认是以左上角为基准开始绘制的，此时头像的实际区域是右图中的红框，而超过红框的部分（圆形的右侧和下方），自然被 TileMode.CLAMP效果沿边缘拉伸了。

　　所以，需要通过挪动坐标系的位置和调整圆心，才能把头像画在正确的区域（右图绿框）中。

[转载请保留本文地址：http://www.cnblogs.com/snser/p/5159126.html]

五、更多玩法 —— 支持xml配置

既然有了边框，那如果想配置边框的宽度和颜色该如何是好呢？

基本上两个思路：

1)　　给ImageViewPlus加上set接口，设置完成之后通过 invalidate(); 重绘一下即可；

2)　　在xml里就支持配置一些自定义属性，这样用起来会方便很多。

这里重点说一下支持xml配置自定义属性。

自定义控件要支持xml配置自定义属性的话，首先需要在 \res\values 里去定义属性：

 1 <?xml version="1.0" encoding="utf-8"?>  
 2 <resources>  
 3     <attr name="borderColor" format="color" />
 4     <attr name="borderWidth" format="dimension" />
 5 
 6     <declare-styleable name="ImageViewPlus">  
 7         <attr name="

首页上一页 1 2 3 4 5 下一页尾页 2/5/5
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：【转】Android Studio下加入百度..	下一篇：注册时获取验证码常用的倒计时工具