文档章节

Android 完美实现图片圆角和圆形(对实现进行分析)

JayPark不作死
 JayPark不作死
发布于 2014/09/29 15:59
字数 1146
阅读 48
收藏 0

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


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

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

核心代码分析:

[java] view plaincopy在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, 00, paint);  

  29.         return target;  

  30.     }  


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

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

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


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

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

  1. canvas.translate(x, y);  

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

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

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

  5.               paint.setXfermode(null);  

  6.               canvas.restoreToCount(sc);  

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


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

1、自定义属性:

[html] view plaincopy在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 plaincopy在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.             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 plaincopy在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 plaincopy在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), 00null);  

  20.             break;  

  21.         case TYPE_ROUND:  

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

  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, 00, 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(00, source.getWidth(), source.getHeight());  

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

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

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

  76.         return target;  

  77.     }  


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


本文转载自:http://blog.csdn.net/lmj623565791/article/details/24555655

共有 人打赏支持
JayPark不作死
粉丝 15
博文 51
码字总数 13622
作品 0
苏州
程序员
Android开发优秀博文收录

Android 完美实现图片圆角和圆形(对实现进行分析) 2.Android之Loader理解 3.Android Loader详解一:概述 4. Android 异步加载图片,使用LruCache和SD卡或手机缓存,效果非常的流畅 5. And...

JayPark不作死
2014/09/29
0
0
Android开发之自定义圆角矩形图片ImageView的实现

android中的ImageView只能显示矩形的图片,这样一来不能满足我们其他的需求,比如要显示圆角矩形的图片,这个时候,我们就需要自定义ImageView了,其原理就是首先获取到图片的Bitmap,然后进...

丁佳辉
04/26
0
0
Android 圆角、圆形 ImageView 实现

一、 特点 基于AppCompatImageView扩展 支持圆角、圆形显示 可绘制边框,圆形时可绘制内外两层边框 支持边框不覆盖图片 可绘制遮罩 ...... 二、基本原理 我们要实现的图片控件继承自,它是的...

Othershe
06/25
0
0
Android CustomShapeImageView对图片进行各种样式裁剪:圆形、星形、心形、花瓣形等

 Android CustomShapeImageView对图片进行各种样式裁剪:圆形、星形、心形、花瓣形等 Android CustomShapeImageView是github上一个第三方开源的对图片进行各种样式裁剪的库,其要实现的功...

开开心心过
2015/11/30
0
0
Android_BitmapShader实现圆形、圆角图片

转:http://blog.csdn.net/lmj623565791/article/details/41967509,本文出自:【张鸿洋的博客】 1、概述 记得初学那会写过一篇博客Android 完美实现图片圆角和圆形(对实现进行分析),主要...

wei-spring
2015/02/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

play framework 如何支持多数据源

有段时间没有写博客了,但今天又写一篇了,主要是因为这事有一丝自己的思考和动手实践,所以就记录下来了。 现有的问题: play 1.2.4 两台数据库服务器,但是play1.2.4 并不支持同时连接两台...

tuerqidi
22分钟前
1
0
Mysql only_full_group_by解析

查看当前数据库模式: select @@sql_mode; 原因: mysql 5.7中的sql_mode的值中包含'ONLY_FULL_GROUP_BY'; 处理:执行以下SQL set GLOBAL sql_mode ='STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,N......

年轻的中年大叔
24分钟前
1
0
防止表单重复提交

1:前端方式(治标不治本) $("#admin-role-save").click(function(){//admin-role-save为submit的idvar ts=$(this);var ts_old_val=ts.val();ts.val("提交中....");ts.att...

uug
24分钟前
1
0
保持屏幕常亮

getWindow().setFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON, WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON); 在act的created方法中调用即可,一般是播放视频的时候......

Carbenson
24分钟前
1
0
智能合约实施指南

与区块链技术一样,智能合约在商业领域也非常有价值。 为了让我们的读者彻底了解智能合约是什么以及它们如何影响现代商业的交易方式,我们准备了本指南。 集中商业模式正在给去中心化的模式让...

geek12345
27分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部