您当前的位置： 首页 > 

xiangzhihong8

暂无认证

  • 4浏览

    0关注

    1324博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

自定义圆角和园边的实现

xiangzhihong8 发布时间：2014-07-30 09:40:26 ，浏览量：4

本来想在网上找个圆角的例子看一看，不尽人意啊，基本都是官方的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.   
  2.   
  3.   
  4.       
  5.       
  6.           
  7.           
  8.       
  9.       
  10.   
  11.       
  12.           
  13.           
  14.           
  15.       
  16.   
  17.   
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 
关注
打赏
1482932726
查看更多评论

最近更新

热门博客

[ 申请 ]友情链接：

ClashX教程 绘画宝宝 配音宝宝
立即登录/注册

微信扫码登录

0.0431s