文档章节

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

JayPark不作死
 JayPark不作死
发布于 2014/09/29 15:59
字数 1146
阅读 46
收藏 0
点赞 0
评论 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这是第五篇了,,,,写得好恶心,,,,


© 著作权归作者所有

共有 人打赏支持
JayPark不作死
粉丝 15
博文 51
码字总数 13622
作品 0
苏州
程序员
Android开发之自定义圆角矩形图片ImageView的实现

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

丁佳辉 ⋅ 04/26 ⋅ 0

Android_BitmapShader实现圆形、圆角图片

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

wei-spring ⋅ 2015/02/02 ⋅ 0

Android开发优秀博文收录

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

JayPark不作死 ⋅ 2014/09/29 ⋅ 0

打造万能的BannerView(ViewPager)无限轮播图

为什么写这篇文章,因为在网上看到的绝大多数BannerView实现了右无限轮播图,甚至没有实现无限轮播图,说成是无限轮播图,实现了左右无限轮播图的,并没有做性能上的优化。 先看张效果图 工程...

Steven_520 ⋅ 05/11 ⋅ 0

android高仿抖音、点餐界面、天气项目、自定义view指示、爬取美女图片等源码

Android精选源码 一个爬取美女图片的app(http://www.apkbus.com/thread-600077-1-1.html) Android高仿抖音(http://www.apkbus.com/thread-600081-1-1.html) android一个可以上拉下滑的Ui效果......

逆鳞龙 ⋅ 06/12 ⋅ 0

仿Google原生桌面水波纹展开收起动画实现

前言 在之前的博客android如何给整个视图view圆角显示中有提到过如何实现对View显示进行圆角裁剪,其原理其实也比较简单。这里先看看动画效果。 View负责绘制显示的draw方法 因为View的draw方...

Ihesong ⋅ 04/16 ⋅ 0

Android自定义Tablayout下划线指示器Indicator:设置宽高、圆角、渐变颜色

Android自定义Tablayout下划线指示器Indicator:设置宽高、圆角、渐变颜色 Android原生的Tablayout下面有一个指示器(指示线、下划线),如图所示: 详情见附录1。 但是Android原生的Tablayo...

zhangphil ⋅ 04/27 ⋅ 0

Android 动画效果学习笔记

Android渐变效果实现: 在drawable中创建新的share_background.xml文件,编写代码如下 <?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/a......

SRain215 ⋅ 2016/03/11 ⋅ 0

Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:【张鸿洋的博客】 很久以前也过一个html5的刮刮卡效果 上次看到有人写Android的刮刮卡效果于是乎...

lmj623565791 ⋅ 2014/10/27 ⋅ 0

Android 实用技巧知识合集(持续更新)

Google 和 Baidu 常用的搜索技巧 1. 例子源码永久更新 http://www.javaapk.com/demo 2. 实战知识库 http://wuxiaolong.me/2015/08/10/android-small-knowledge-base/ 3. Android学习资源大整......

jdfkldjlkjdl ⋅ 2017/05/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

两道面试题,带你解析Java类加载机制

在许多Java面试中,我们经常会看到关于Java类加载机制的考察,例如下面这道题: class Grandpa{ static { System.out.println("爷爷在静态代码块"); }} cl...

1527 ⋅ 14分钟前 ⋅ 0

SpringCloud(Data Flow)

dataflow-server

赵-猛 ⋅ 24分钟前 ⋅ 0

深入理解Java虚拟机

这本书我读到第8章,之后就是在读不下去了。 读到后面是一种痛苦的体验,太多的东西是不全面的,大量的专有名词是没有解释的,读到最后很多东西仅仅是一个侧面,所以我觉得,这本书不适合初学...

颖伙虫 ⋅ 30分钟前 ⋅ 0

B树和B+树的总结

B树 为什么要B树 磁盘中有两个机械运动的部分,分别是盘片旋转和磁臂移动。盘片旋转就是我们市面上所提到的多少转每分钟,而磁盘移动则是在盘片旋转到指定位置以后,移动磁臂后开始进行数据的...

浮躁的码农 ⋅ 32分钟前 ⋅ 0

NanoPi NEO core/ Ubuntu16.04单网卡配置3个IP地址(2个静态,1个动态)

配置 root@NanoPi-NEO-Core:/etc/network# cat interfacesauto loiface lo inet loopbackallow-hotplug eth0iface eth0 inet static address 172.31.188.249 netmask 255.......

SamXIAO ⋅ 59分钟前 ⋅ 0

三步为你的App集成LivePhoto功能

摘要:LivePhoto是iOS9新推出的一种拍照方式,类似于拍摄Gif图或录制视频片段生成图片。如果没有画面感,可以联想《哈利波特》霍格沃茨城堡的壁画,哈哈,很炫酷有木有,但坑爹的是只有iphone6S以...

壹峰 ⋅ 今天 ⋅ 0

centos7 git安装

由于centos中的源仓库中git不是最新版本,需要进行源码安装。 1、查看yum仓库git信息 [root@iZm5e3d4r5i5ml889vh6esZ zh]# yum info gitLoaded plugins: fastestmirrorLoading mirror s...

xixingzhe ⋅ 今天 ⋅ 0

input file 重复上传同一张图片失效的解决办法

解决办法 方法一:来回切换input[type='file']的type属性值,可以是‘text’,'button','button'....,然后再切换回来‘file’ 方法二:每次取消图片预览后,重置input[type='file']的value的...

时刻在奔跑 ⋅ 今天 ⋅ 0

Mahout推荐算法API详解

前言 用Mahout来构建推荐系统,是一件既简单又困难的事情。简单是因为Mahout完整地封装了“协同过滤”算法,并实现了并行化,提供非常简单的API接口;困难是因为我们不了解算法细节,很难去根...

xiaomin0322 ⋅ 今天 ⋅ 0

WampServer默认web服务器根目录位置

安装WampServer之后的web服务器根目录默认位置在WampServer安装目录下的www:

临江仙卜算子 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部