投稿
  1. 云图网首页
  2. 技术专区
  3. 移动开发

自定义圆角和园边的实现详解手机开发

• 移动开发 • 阅读 54

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

自定义圆角和园边的实现详解手机开发

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

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

核心代码分析：

[java]
view plain
copy
在CODE上查看代码片
派生到我的代码片

  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中效果图，咱们的只是其一：

自定义圆角和园边的实现详解手机开发

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

[java]
view plain
copy
在CODE上查看代码片
派生到我的代码片

  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
在CODE上查看代码片
派生到我的代码片

  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
在CODE上查看代码片
派生到我的代码片

  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:  
  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.             type = 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
在CODE上查看代码片
派生到我的代码片

  1. /** 
  2.      * 计算控件的高度和宽度 
  3.      */  
  4.     @Override  
  5.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  
  6.     {  
  7.         // super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
  8.   
  9.         /** 
  10.          * 设置宽度 
  11.          */  
  12.         int specMode = MeasureSpec.getMode(widthMeasureSpec);  
  13.         int specSize = MeasureSpec.getSize(widthMeasureSpec);  
  14.   
  15.         if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate  
  16.         {  
  17.             mWidth = specSize;  
  18.         } else  
  19.         {  
  20.             // 由图片决定的宽  
  21.             int desireByImg = getPaddingLeft() + getPaddingRight() + mSrc.getWidth();  
  22.             if (specMode == MeasureSpec.AT_MOST)// wrap_content  
  23.             {  
  24.                 mWidth = Math.min(desireByImg, specSize);  
  25.             }  
  26.         }  
  27.   
  28.         /*** 
  29.          * 设置高度 
  30.          */  
  31.   
  32.         specMode = MeasureSpec.getMode(heightMeasureSpec);  
  33.         specSize = MeasureSpec.getSize(heightMeasureSpec);  
  34.         if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate  
  35.         {  
  36.             mHeight = specSize;  
  37.         } else  
  38.         {  
  39.             int desire = getPaddingTop() + getPaddingBottom() + mSrc.getHeight();  
  40.             if (specMode == MeasureSpec.AT_MOST)// wrap_content  
  41.             {  
  42.                 mHeight = Math.min(desire, specSize);  
  43.             }  
  44.         }  
  45.         setMeasuredDimension(mWidth, mHeight);  
  46.   
  47.     }  

4、根据Type绘制：

[java]
view plain
copy
在CODE上查看代码片
派生到我的代码片

  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, 50f, 50f, paint);  
  74.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  
  75.         canvas.drawBitmap(source, 0, 0, paint);  
  76.         return target;  
  77.     }  

好了，我就不解析代码了，自定义View这是第五篇了，，，，写得好恶心，，，，

各位赞一个或者留个言，算是对我的支持~

源码点击下载

原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/tech/app/5804.html

赞 (0)
0 0
上一篇 2021年7月17日 00:19
下一篇 2021年7月17日 00:19

相关推荐

发表回复

登录后才能评论