文档章节

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 实现

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

Othershe
06/25
0
0
Android开发之自定义圆角矩形图片ImageView的实现

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

丁佳辉
04/26
0
0
Android_BitmapShader实现圆形、圆角图片

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

wei-spring
2015/02/02
0
0
Android CustomShapeImageView对图片进行各种样式裁剪:圆形、星形、心形、花瓣形等

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

开开心心过
2015/11/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

NEO 节点介绍

全节点(full nodes)是存储 NEO 区块链全部数据的节点,通过 P2P 的方式与区块链网络连接,在区块链网络中,所有的全节点都是平等的,既充当客户端又充当服务器。 NEO 有两个全节点程序: ...

NEO-FANS
11分钟前
0
0
内网穿透大杀器--EarthWorm

0x00 前言 如果感觉本文对你有帮助,请在文章末尾点个赞,谢谢表哥们支持! 当你在内网渗透,并且拿下一台机器的权限时,你是不是觉得已经算是一次完整的渗透了? 不来一次内网漫游,渗透是不...

刀剑如梦
17分钟前
2
0
PiggyMetrics分布式框架

https://github.com/sqshq/PiggyMetrics

丁建祥
18分钟前
0
0
零距离接触阿里云时序时空数据库TSDB

概述 最近,Amazon新推出了完全托管的时间序列数据库Timestream,可见,各大厂商对未来时间序列数据库的重视与日俱增。 阿里云TSDB是阿里巴巴集团数据库事业部研发的一款高性能分布式时序时空...

阿里云云栖社区
27分钟前
4
0
OkHttpClient封装

import java.io.BufferedReader; import java.io.InputStream; import java.io.InputStreamReader; import java.util.Map; import java.util.TreeMap; import java.util.Map.Entry; import o......

尘叙缘
28分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部