码迷,mamicode.com
首页 > 移动开发 > 详细

Android 完美实现图片圆角和圆形

时间:2016-08-04 19:45:36      阅读:294      评论:0      收藏:0      [点我收藏+]

标签:android   图片   效果图   博客   风格   

本来想在网上找个圆角的例子看一看,不尽人意啊,基本都是官方的Demo的那张原理图,稍后会贴出。于是自己自定义了个View,实现图片的圆角以及圆形效果。效果图:

技术分享

好了,原理和核心代码解释完成。下面开始写自定义View。

1、自定义属性:

第一个是原图,第二个是圆形效果,第三第四设置了不同的圆角大小。

准备改变一个博客的风格,首先给大家讲一下原理,让大家明白了,然后再贴代码,不然可以直接看那么长的代码也比较痛苦,核心代码其实就那么几行:

核心代码分析:

 

  1. /** 

  2.      * 绘制 

  3.      */  

  4.     @Override  

  5.     protected void onDraw(Canvas canvas)  

  6.     {  

  7.   

  8.         switch (type)  

  9.         {  

  10.         // 如果是TYPE_CIRCLE绘制圆形  

  11.         case TYPE_CIRCLE:  

  12.   

  13.             int min = Math.min(mWidth, mHeight);  

  14.             /** 

  15.              * 长度如果不一致,按小的值进行压缩 

  16.              */  

  17.             mSrc = Bitmap.createScaledBitmap(mSrc, min, min, false);  

  18.   

  19.             canvas.drawBitmap(createCircleImage(mSrc, min), 0, 0, null);  

  20.             break;  

  21.         case TYPE_ROUND:  

  22.             canvas.drawBitmap(createRoundConerImage(mSrc), 0, 0, null);  

  23.             break;  

  24.   

  25.         }  

  26.   

  27.     }  

  28.   

  29.     /** 

  30.      * 根据原图和变长绘制圆形图片 

  31.      *  

  32.      * @param source 

  33.      * @param min 

  34.      * @return 

  35.      */  

  36.     private Bitmap createCircleImage(Bitmap source, int min)  

  37.     {  

  38.         final Paint paint = new Paint();  

  39.         paint.setAntiAlias(true);  

  40.         Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);  

  41.         /** 

  42.          * 产生一个同样大小的画布 

  43.          */  

  44.         Canvas canvas = new Canvas(target);  

  45.         /** 

  46.          * 首先绘制圆形 

  47.          */  

  48.         canvas.drawCircle(min / 2, min / 2, min / 2, paint);  

  49.         /** 

  50.          * 使用SRC_IN,参考上面的说明 

  51.          */  

  52.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  

  53.         /** 

  54.          * 绘制图片 

  55.          */  

  56.         canvas.drawBitmap(source, 0, 0, paint);  

  57.         return target;  

  58.     }  

  59.   

  60.     /** 

  61.      * 根据原图添加圆角 

  62.      *  

  63.      * @param source 

  64.      * @return 

  65.      */  

  66.     private Bitmap createRoundConerImage(Bitmap source)  

  67.     {  

  68.         final Paint paint = new Paint();  

  69.         paint.setAntiAlias(true);  

  70.         Bitmap target = Bitmap.createBitmap(mWidth, mHeight, Config.ARGB_8888);  

  71.         Canvas canvas = new Canvas(target);  

  72.         RectF rect = new RectF(0, 0, source.getWidth(), source.getHeight());  

  73.         canvas.drawRoundRect(rect, mRadius, mRadius, paint);  

  74.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  

  75.         canvas.drawBitmap(source, 0, 0, paint);  

  76.         return target;  

  77.     }  

 

 

 

 

 

 

  1. /** 

  2.      * 计算控件的高度和宽度 

  3.      */  

  4.     @Override  

  5.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  

  6.     {  

  7.         // super.onMeasure(widthMeasureSpec, heightMeasureSpec);  

  8.         /** 

  9.          * 设置宽度 

  10.          */  

  11.         int specMode = MeasureSpec.getMode(widthMeasureSpec);  

  12.         int specSize = MeasureSpec.getSize(widthMeasureSpec);  

  13.   

  14.         if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate  

  15.         {  

  16.             mWidth = specSize;  

  17.         } else  

  18.         {  

  19.             // 由图片决定的宽  

  20.             int desireByImg = getPaddingLeft() + getPaddingRight()  

  21.                     + mSrc.getWidth();  

  22.             if (specMode == MeasureSpec.AT_MOST)// wrap_content  

  23.             {  

  24.                 mWidth = Math.min(desireByImg, specSize);  

  25.             } else  

  26.   

  27.                 mWidth = desireByImg;  

  28.         }  

  29.   

  30.         /*** 

  31.          * 设置高度 

  32.          */  

  33.   

  34.         specMode = MeasureSpec.getMode(heightMeasureSpec);  

  35.         specSize = MeasureSpec.getSize(heightMeasureSpec);  

  36.         if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate  

  37.         {  

  38.             mHeight = specSize;  

  39.         } else  

  40.         {  

  41.             int desire = getPaddingTop() + getPaddingBottom()  

  42.                     + mSrc.getHeight();  

  43.   

  44.             if (specMode == MeasureSpec.AT_MOST)// wrap_content  

  45.             {  

  46.                 mHeight = Math.min(desire, specSize);  

  47.             } else  

  48.                 mHeight = desire;  

  49.         }  

  50.   

  51.         setMeasuredDimension(mWidth, mHeight);  

  52.   

  53.     }  

 

4、根据Type绘制:

 

[java] view plain copy


 技术分享技术分享

 

  1. /** 

  2.  * TYPE_CIRCLE / TYPE_ROUND 

  3.  */  

  4. private int type;  

  5. private static final int TYPE_CIRCLE = 0;  

  6. private static final int TYPE_ROUND = 1;  

  7.   

  8. /** 

  9.  * 图片 

  10.  */  

  11. private Bitmap mSrc;  

  12.   

  13. /** 

  14.  * 圆角的大小 

  15.  */  

  16. private int mRadius;  

  17.   

  18. /** 

  19.  * 控件的宽度 

  20.  */  

  21. private int mWidth;  

  22. /** 

  23.  * 控件的高度 

  24.  */  

  25. private int mHeight;  

  26.   

  27. public CustomImageView(Context context, AttributeSet attrs)  

  28. {  

  29.     this(context, attrs, 0);  

  30. }  

  31.   

  32. public CustomImageView(Context context)  

  33. {  

  34.     this(context, null);  

  35. }  

  36.   

  37. /** 

  38.  * 初始化一些自定义的参数 

  39.  *  

  40.  * @param context 

  41.  * @param attrs 

  42.  * @param defStyle 

  43.  */  

  44. public CustomImageView(Context context, AttributeSet attrs, int defStyle)  

  45. {  

  46.     super(context, attrs, defStyle);  

  47.   

  48.     TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomImageView, defStyle, 0);  

  49.   

  50.     int n = a.getIndexCount();  

  51.     for (int i = 0; i < n; i++)  

  52.     {  

  53.         int attr = a.getIndex(i);  

  54.         switch (attr)  

  55.         {  

  56.         case R.styleable.CustomImageView_src=\‘#\‘" /p>

  57.             mSrc = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));  

  58.             break;  

  59.         case R.styleable.CustomImageView_type:  

  60.             type = a.getInt(attr, 0);// 默认为Circle  

  61.             break;  

  62.         case R.styleable.CustomImageView_borderRadius:  

  63.             mRadius= a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10f,  

  64.                     getResources().getDisplayMetrics()));// 默认为10DP  

  65.             break;  

  66.         }  

  67.     }  

  68.     a.recycle();  

  69. }  

3、onMeasure中获取控件宽高:

 

[java] view plain copy

 

  1. <?xml version="1.0" encoding="utf-8"?>  

  2. <resources>  

  3.   

  4.     <attr name="borderRadius" format="dimension" />  

  5.     <attr name="type">  

  6.         <enum name="circle" value="0" />  

  7.         <enum name="round" value="1" />  

  8.     </attr>  

  9.     <attr name="src" format="reference"></attr>  

  10.   

  11.     <declare-styleable name="CustomImageView">  

  12.         <attr name="borderRadius" />  

  13.         <attr name="type" />  

  14.         <attr name="src" />  

  15.     </declare-styleable>  

  16.   

  17. </resources>  


2、构造中获取自定义的属性:

[java] view plain copy

 技术分享技术分享

 

  1. canvas.translate(x, y);  

  2.               canvas.drawBitmap(mDstB, 0, 0, paint);  

  3.               paint.setXfermode(sModes[i]);  

  4.               canvas.drawBitmap(mSrcB, 0, 0, paint);  

  5.               paint.setXfermode(null);  

  6.               canvas.restoreToCount(sc);  

可以看出先绘制的Dst,再绘制的Src,最后的展示是SrcIn那个图:显示的区域是二者交集,展示的是Src(后者)。和咱们前面结论一致。效果16种,大家可以自由组合展示不同的效果。

 

 

好了,原理和核心代码解释完成。下面开始写自定义View。

1、自定义属性:

 

[html] view plain copy

 技术分享技术分享

 

  1. /** 

  2.      * 根据原图和变长绘制圆形图片 

  3.      *  

  4.      * @param source 

  5.      * @param min 

  6.      * @return 

  7.      */  

  8.     private Bitmap createCircleImage(Bitmap source, int min)  

  9.     {  

  10.         final Paint paint = new Paint();  

  11.         paint.setAntiAlias(true);  

  12.         Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);  

  13.         /** 

  14.          * 产生一个同样大小的画布 

  15.          */  

  16.         Canvas canvas = new Canvas(target);  

  17.         /** 

  18.          * 首先绘制圆形 

  19.          */  

  20.         canvas.drawCircle(min / 2, min / 2, min / 2, paint);  

  21.         /** 

  22.          * 使用SRC_IN 

  23.          */  

  24.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  

  25.         /** 

  26.          * 绘制图片 

  27.          */  

  28.         canvas.drawBitmap(source, 0, 0, paint);  

  29.         return target;  

  30.     }  


其实主要靠:paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));这行代码,为什么呢,我给大家解释下,SRC_IN这种模式,两个绘制的效果叠加后取交集展现后图,怎么说呢,咱们第一个绘制的是个圆形,第二个绘制的是个Bitmap,于是交集为圆形,展现的是BItmap,就实现了圆形图片效果。圆角,其实就是先绘制圆角矩形,是不是很简单,以后别人再说实现圆角,你就把这一行代码给他就行了。

 

从Android的示例中,给大家证明一下:

下面有一张PorterDuff.Mode的16中效果图,咱们的只是其一:

技术分享

源码咱们只关心谁先谁后绘制的:

 

  1. canvas.translate(x, y);  

  2.               canvas.drawBitmap(mDstB, 0, 0, paint);  

  3.               paint.setXfermode(sModes[i]);  

  4.               canvas.drawBitmap(mSrcB, 0, 0, paint);  

  5.               paint.setXfermode(null);  

  6.               canvas.restoreToCount(sc);  

 可以看出先绘制的Dst,再绘制的Src,最后的展示是SrcIn那个图:显示的区域是二者交集,展示的是Src(后者)。和咱们前面结论一致。效果16种,大家可以自由组合展示不同的效果。

  1. <?xml version="1.0" encoding="utf-8"?>  

  2. <resources>  

  3.   

  4.     <attr name="borderRadius" format="dimension" />  

  5.     <attr name="type">  

  6.         <enum name="circle" value="0" />  

  7.         <enum name="round" value="1" />  

  8.     </attr>  

  9.     <attr name="src" format="reference"></attr>  

  10.   

  11.     <declare-styleable name="CustomImageView">  

  12.         <attr name="borderRadius" />  

  13.         <attr name="type" />  

  14.         <attr name="src" />  

  15.     </declare-styleable>  

  16.   

  17. </resources>  

 2、构造中获取自定义的属性:

 

  1. /** 

  2.  * TYPE_CIRCLE / TYPE_ROUND 

  3.  */  

  4. private int type;  

  5. private static final int TYPE_CIRCLE = 0;  

  6. private static final int TYPE_ROUND = 1;  

  7.   

  8. /** 

  9.  * 图片 

  10.  */  

  11. private Bitmap mSrc;  

  12.   

  13. /** 

  14.  * 圆角的大小 

  15.  */  

  16. private int mRadius;  

  17.   

  18. /** 

  19.  * 控件的宽度 

  20.  */  

  21. private int mWidth;  

  22. /** 

  23.  * 控件的高度 

  24.  */  

  25. private int mHeight;  

  26.   

  27. public CustomImageView(Context context, AttributeSet attrs)  

  28. {  

  29.     this(context, attrs, 0);  

  30. }  

  31.   

  32. public CustomImageView(Context context)  

  33. {  

  34.     this(context, null);  

  35. }  

  36.   

  37. /** 

  38.  * 初始化一些自定义的参数 

  39.  *  

  40.  * @param context 

  41.  * @param attrs 

  42.  * @param defStyle 

  43.  */  

  44. public CustomImageView(Context context, AttributeSet attrs, int defStyle)  

  45. {  

  46.     super(context, attrs, defStyle);  

  47.   

  48.     TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomImageView, defStyle, 0);  

  49.   

  50.     int n = a.getIndexCount();  

  51.     for (int i = 0; i < n; i++)  

  52.     {  

  53.         int attr = a.getIndex(i);  

  54.         switch (attr)  

  55.         {  

  56.         case R.styleable.CustomImageView_src=\‘#\‘" /p>

  57.             mSrc = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));  

  58.             break;  

  59.         case R.styleable.CustomImageView_type:  

  60.             type = a.getInt(attr, 0);// 默认为Circle  

  61.             break;  

  62.         case R.styleable.CustomImageView_borderRadius:  

  63.             mRadius= a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10f,  

  64.                     getResources().getDisplayMetrics()));// 默认为10DP  

  65.             break;  

  66.         }  

  67.     }  

  68.     a.recycle();  

  69. }  

  70. 2.构造中获取自定义属性:

 

  1. /** 

  2.  * TYPE_CIRCLE / TYPE_ROUND 

  3.  */  

  4. private int type;  

  5. private static final int TYPE_CIRCLE = 0;  

  6. private static final int TYPE_ROUND = 1;  

  7.   

  8. /** 

  9.  * 图片 

  10.  */  

  11. private Bitmap mSrc;  

  12.   

  13. /** 

  14.  * 圆角的大小 

  15.  */  

  16. private int mRadius;  

  17.   

  18. /** 

  19.  * 控件的宽度 

  20.  */  

  21. private int mWidth;  

  22. /** 

  23.  * 控件的高度 

  24.  */  

  25. private int mHeight;  

  26.   

  27. public CustomImageView(Context context, AttributeSet attrs)  

  28. {  

  29.     this(context, attrs, 0);  

  30. }  

  31.   

  32. public CustomImageView(Context context)  

  33. {  

  34.     this(context, null);  

  35. }  

  36.   

  37. /** 

  38.  * 初始化一些自定义的参数 

  39.  *  

  40.  * @param context 

  41.  * @param attrs 

  42.  * @param defStyle 

  43.  */  

  44. public CustomImageView(Context context, AttributeSet attrs, int defStyle)  

  45. {  

  46.     super(context, attrs, defStyle);  

  47.   

  48.     TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomImageView, defStyle, 0);  

  49.   

  50.     int n = a.getIndexCount();  

  51.     for (int i = 0; i < n; i++)  

  52.     {  

  53.         int attr = a.getIndex(i);  

  54.         switch (attr)  

  55.         {  

  56.         case R.styleable.CustomImageView_src=\‘#\‘" /p>

  57.             mSrc = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));  

  58.             break;  

  59.         case R.styleable.CustomImageView_type:  

  60.             type = a.getInt(attr, 0);// 默认为Circle  

  61.             break;  

  62.         case R.styleable.CustomImageView_borderRadius:  

  63.             mRadius= a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10f,  

  64.                     getResources().getDisplayMetrics()));// 默认为10DP  

  65.             break;  

  66.         }  

  67.     }  

  68.     a.recycle();  

  69. }  

    3、onMeasure中获取控件宽高:

 

  1. /** 

  2.      * 计算控件的高度和宽度 

  3.      */  

  4.     @Override  

  5.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  

  6.     {  

  7.         // super.onMeasure(widthMeasureSpec, heightMeasureSpec);  

  8.         /** 

  9.          * 设置宽度 

  10.          */  

  11.         int specMode = MeasureSpec.getMode(widthMeasureSpec);  

  12.         int specSize = MeasureSpec.getSize(widthMeasureSpec);  

  13.   

  14.         if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate  

  15.         {  

  16.             mWidth = specSize;  

  17.         } else  

  18.         {  

  19.             // 由图片决定的宽  

  20.             int desireByImg = getPaddingLeft() + getPaddingRight()  

  21.                     + mSrc.getWidth();  

  22.             if (specMode == MeasureSpec.AT_MOST)// wrap_content  

  23.             {  

  24.                 mWidth = Math.min(desireByImg, specSize);  

  25.             } else  

  26.   

  27.                 mWidth = desireByImg;  

  28.         }  

  29.   

  30.         /*** 

  31.          * 设置高度 

  32.          */  

  33.   

  34.         specMode = MeasureSpec.getMode(heightMeasureSpec);  

  35.         specSize = MeasureSpec.getSize(heightMeasureSpec);  

  36.         if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate  

  37.         {  

  38.             mHeight = specSize;  

  39.         } else  

  40.         {  

  41.             int desire = getPaddingTop() + getPaddingBottom()  

  42.                     + mSrc.getHeight();  

  43.   

  44.             if (specMode == MeasureSpec.AT_MOST)// wrap_content  

  45.             {  

  46.                 mHeight = Math.min(desire, specSize);  

  47.             } else  

  48.                 mHeight = desire;  

  49.         }  

  50.   

  51.         setMeasuredDimension(mWidth, mHeight);  

  52.   

  53.     }  

4、根据Type绘制:

 

  1. /** 

  2.      * 绘制 

  3.      */  

  4.     @Override  

  5.     protected void onDraw(Canvas canvas)  

  6.     {  

  7.   

  8.         switch (type)  

  9.         {  

  10.         // 如果是TYPE_CIRCLE绘制圆形  

  11.         case TYPE_CIRCLE:  

  12.   

  13.             int min = Math.min(mWidth, mHeight);  

  14.             /** 

  15.              * 长度如果不一致,按小的值进行压缩 

  16.              */  

  17.             mSrc = Bitmap.createScaledBitmap(mSrc, min, min, false);  

  18.   

  19.             canvas.drawBitmap(createCircleImage(mSrc, min), 0, 0, null);  

  20.             break;  

  21.         case TYPE_ROUND:  

  22.             canvas.drawBitmap(createRoundConerImage(mSrc), 0, 0, null);  

  23.             break;  

  24.   

  25.         }  

  26.   

  27.     }  

  28.   

  29.     /** 

  30.      * 根据原图和变长绘制圆形图片 

  31.      *  

  32.      * @param source 

  33.      * @param min 

  34.      * @return 

  35.      */  

  36.     private Bitmap createCircleImage(Bitmap source, int min)  

  37.     {  

  38.         final Paint paint = new Paint();  

  39.         paint.setAntiAlias(true);  

  40.         Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);  

  41.         /** 

  42.          * 产生一个同样大小的画布 

  43.          */  

  44.         Canvas canvas = new Canvas(target);  

  45.         /** 

  46.          * 首先绘制圆形 

  47.          */  

  48.         canvas.drawCircle(min / 2, min / 2, min / 2, paint);  

  49.         /** 

  50.          * 使用SRC_IN,参考上面的说明 

  51.          */  

  52.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  

  53.         /** 

  54.          * 绘制图片 

  55.          */  

  56.         canvas.drawBitmap(source, 0, 0, paint);  

  57.         return target;  

  58.     }  

  59.   

  60.     /** 

  61.      * 根据原图添加圆角 

  62.      *  

  63.      * @param source 

  64.      * @return 

  65.      */  

  66.     private Bitmap createRoundConerImage(Bitmap source)  

  67.     {  

  68.         final Paint paint = new Paint();  

  69.         paint.setAntiAlias(true);  

  70.         Bitmap target = Bitmap.createBitmap(mWidth, mHeight, Config.ARGB_8888);  

  71.         Canvas canvas = new Canvas(target);  

  72.         RectF rect = new RectF(0, 0, source.getWidth(), source.getHeight());  

  73.         canvas.drawRoundRect(rect, mRadius, mRadius, paint);  

  74.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  

  75.         canvas.drawBitmap(source, 0, 0, paint);  

  76.         return target;  

  77.     }  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

本文出自 “zpp” 博客,请务必保留此出处http://1439337369.blog.51cto.com/10270624/1834342

Android 完美实现图片圆角和圆形

标签:android   图片   效果图   博客   风格   

原文地址:http://1439337369.blog.51cto.com/10270624/1834342

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!