0°

Android圆角图片最简单的实现方法详解

内容预览:
  • Android圆角图片最简单的实现方法详解&;&; 由   分享 每日英...~
  • wrap_content 简单的映射关系: wrap_content -> MeasureSpec.AT_MOST...~
  • 推荐阅读 小密圈这里聚集了业界内的大牛,值得各位大牛的加入! 看完本...~

始发于微信公众号: 程序员小乐

分享编程技能、互联网技术、生活感悟、打造干货分享平台,将总结的技术、心得、经验分享给大家,这里不只限于技术!学无止境,不求尽如人意,但求问心无愧。让学习成为一种美、一种习惯。值得爱学习的你去关注,感觉有帮助转发分享让更多的人去关注!点击上方 蓝字 关注!


作者:Dawish_大D

链接:http://blog.csdn.net/u010072711/article/details/52072721
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Android圆角图片最简单的实现方法详解—– 由   分享


每日英语

Life is always let us was black and blue all over, but afterwards, the injured local will become our most strong place. 

生活总是让我们遍体鳞伤,但到后来,那些受伤的地方一定会变成我们最强壮的地方。

前言



在平时的开发中,我们在显示图片是有时候需要显示圆角图片,我们应该都知道圆角显示肯定是更加耗费内存和性能,会导致图片的过度绘制等问题。但是有时候产品的设计就是这样,我们开发也不得不做,本篇文章讲一下最基本的圆角图片实现方法:


原理讲解之Paint.setXfermode



2.1 Paint.setXfermode就是本次实现圆角图片的关键地方:


Android圆角图片最简单的实现方法详解


这个方法很复杂,我这里只是为本次使用做出解释,这个方法大概的意思就是:设置画笔在绘制时图形堆叠时候的显示模式。画笔在绘制时图形堆叠时候的显示模式有16种之多,google也给出了图文解释: 


Android圆角图片最简单的实现方法详解 
看上图就可以知道,就是两个view堆叠在一起的时候是怎么现实的,是显示交集部分,非交集部分,交集部分的上层还是下层等等。 
具体的PorterDuff.Mode请看:


Android圆角图片最简单的实现方法详解

Android圆角图片最简单的实现方法详解


2.2 圆角图片实现原理:


Android圆角图片最简单的实现方法详解


3 代码讲解

自定义控件的基本步骤就是测量控件大小,确定控件位置,绘制控件,我们这个圆角图片控件是不需要确定控件位置。


3.1 createRoundConerImage把源图片圆角显示:


原理上面讲了,先绘制一个圆角矩形,再把我们的源图片绘制在这个圆角矩形的画布上,画笔的显示模式是SRC_IN,取上层交集部分,直接看代码:


Android圆角图片最简单的实现方法详解

Android圆角图片最简单的实现方法详解


需要注意,我们在绘制第二层,也就是我们的源图片的时候,所需要的绘制矩形的宽高一定是跟我们测量的宽高是一直的,要是图片的本身的宽高与测量得到的宽高不一致时,我们就对源图片进行缩放,所以会有下面的代码:


Android圆角图片最简单的实现方法详解


3.2 onMeasure测量控件大小:


Android圆角图片最简单的实现方法详解

Android圆角图片最简单的实现方法详解


宽高分两次测量,下面简单介绍一下控件的测量: 
控件的测量就是处理我们在创建控件时设置的宽高大小,一般非为三种情况,具体宽高值、填满父控件,包含内容。在OnMeasure方法中我们使用MeasureSpec来获取控件宽高到底是哪一种情况。


一个MeasureSpec封装了父布局传递给子布局的布局要求,每个MeasureSpec代表了一组宽度和高度的要求。

三种测量模式解释:


  • UNSPECIFIED:父布局没有给子布局任何限制,子布局可以任意大小。

  • EXACTLY:父布局决定子布局的确切大小。不论子布局多大,它都必须限制在这个界限里。match_parent

  • AT_MOST:此时子控件尺寸只要不超过父控件允许的最大尺寸,子布局可以根据自己的大小选择任意大小。wrap_content


简单的映射关系:


  • wrap_content -> MeasureSpec.AT_MOST

  • match_parent -> MeasureSpec.EXACTLY

  • 具体值 -> MeasureSpec.EXACTLY

3.3 onDraw绘制控件:


Android圆角图片最简单的实现方法详解

4. 全部代码:


Android圆角图片最简单的实现方法详解

Android圆角图片最简单的实现方法详解

Android圆角图片最简单的实现方法详解

Android圆角图片最简单的实现方法详解

Android圆角图片最简单的实现方法详解

Android圆角图片最简单的实现方法详解

Android圆角图片最简单的实现方法详解

Android圆角图片最简单的实现方法详解


5. 效果图和源码地址:

GitHub源码地址https://github.com/Dawish

三种宽高设置模式都有:

xml布局文件:


Android圆角图片最简单的实现方法详解

Android圆角图片最简单的实现方法详解


attrs文件:


Android圆角图片最简单的实现方法详解


效果图:


Android圆角图片最简单的实现方法详解


如果您觉得不错,请别忘了分享到您的朋友圈让更多的人看到!! 您的举手之劳,就是对我最好的支持,非常感谢!

Android圆角图片最简单的实现方法详解

每日掏心话

人最大的对手,往往不是别人,而是自己的懒惰。别指望撞大运,运气不可能永远在你身上,任何时候都要靠本事吃饭。


Android圆角图片最简单的实现方法详解


推荐阅读





小密圈
这里聚集了业界内的大牛,值得各位大牛的加入!

Android圆角图片最简单的实现方法详解

看完本文有收获?请转发分享给更多人
关注「杨守乐」,提升编程技能

【QQ技术群】279126311 []
【QQ技术群】484572225 [未]

以上就是:Android圆角图片最简单的实现方法详解 的全部内容。

本站部分内容来源于互联网和用户投稿,如有侵权请联系我们删除,谢谢。
Email:[email protected]


0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论