备案控制台
探索云世界
开发者社区 飞天洛神云网络 弹性公网IP 正文

自定义圆角和园边的实现

2014-07-30 1356
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： <p>本来想在网上找个圆角的例子看一看，不尽人意啊，基本都是官方的Demo的那张原理图，稍后会贴出。于是自己自定义了个View，实现图片的圆角以及圆形效果。效果图：</p> <p><img src="http://img.blog.csdn.net/20140426213023062?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbG1qNjI

本来想在网上找个圆角的例子看一看，不尽人意啊，基本都是官方的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这是第五篇了，，，，写得好恶心，，，，


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


源码点击下载

文章标签：
前端开发
Java
Android开发
ctrip_xzh
目录
相关文章
米果粒
|
25天前
设置表格的背景颜色和背景图片
设置表格的背景颜色和背景图片。
米果粒
15 1
_揽
|
4月前
|
Web App开发 前端开发
canvas详解02-样式和颜色控制
canvas详解02-样式和颜色控制
_揽
49 1
王同学睡醒了
|
4月前
CSS3新增属性之圆角、盒阴影、字阴影
CSS3新增属性之圆角、盒阴影、字阴影
王同学睡醒了
21 0
闻缺陷则喜何志丹
|
6月前
设置 当前样式dimstyle
设置 当前样式dimstyle
闻缺陷则喜何志丹
24 1
小蓝枣
|
11月前
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
小蓝枣
92 0
tinyvvampirepudge
|
XML 数据格式
超简单的自定义ImageView，支持圆角和直角
需求：ImageView显示的图片，上方的两个角是圆角，下方的两个角是直角。 ![需求图](https://img-blog.csdn.net/20180125151146126?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjYyODc0MzU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
tinyvvampirepudge
176 0
jasmine_qiqi
9、CSS3新增样式（边框圆角、阴影、形变）
9、CSS3新增样式（边框圆角、阴影、形变）
jasmine_qiqi
99 0
9、CSS3新增样式（边框圆角、阴影、形变）
小凡晓宇
给输入框设置背景边框
给输入框设置背景边框
小凡晓宇
134 0
给输入框设置背景边框
yechaoa
|
XML 数据格式 Android开发
BottomSheetDialog 使用详解，设置圆角、固定高度、默认全屏等
BottomSheetDialog 使用详解，设置圆角、固定高度、默认全屏等
yechaoa
1014 0
BottomSheetDialog 使用详解，设置圆角、固定高度、默认全屏等
awbeci
|
Web App开发 iOS开发 容器
CSS3圆角气泡框，评论对话框
CSS3圆角气泡框，评论对话框 body { padding:0; margin:0; font:1em/1.4 Cambria, Georgia, sans-serif; color:#333; background:#fff; }...
awbeci
721 0
为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告
产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理
解决方案技术解决方案
文档与社区文档开发者社区天池大赛培训与认证
权益中心免费试用高校计划企业扶持计划推荐返现计划
支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心
关注阿里云
关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务
阿里云APP阿里云微信
联系我们：4008013260
法律声明Cookies政策廉正举报安全举报联系我们加入我们
阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么
© 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015
浙公网安备 33010602009975号浙B2-20080101-4