iOS 不规则的ImageView
2016-02-19 14:01
706 查看
iOS 不规则的ImageView
时间 2014-11-16 19:08:50 CSDN博客原文 http://blog.csdn.net/johnzhjfly/article/details/41175015
主题 技术
我们在做iOS开发的时候,往往需要实现不规则形状的头像,如:
那如何去实现?
通常图片都是矩形的,如果想在客户端去实现不规则的头像,需要自己去实现。
1.使用layer去实现,
imageView.layer.cornerRadius = 10;
2.使用CAShapeLayer, CALayer如何去实现
我们来看看如何使用CAShapeLayer去实现,
定义一个ShapedImageView,继承于UIView, 代码如下:
#import "ShapedImageView.h" @interface ShapedImageView() { CALayer *_contentLayer; CAShapeLayer *_maskLayer; } @end @implementation ShapedImageView - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { [self setup]; } return self; } - (void)setup { _maskLayer = [CAShapeLayer layer]; _maskLayer.path = [UIBezierPath bezierPathWithOvalInRect:self.bounds].CGPath; _maskLayer.fillColor = [UIColor blackColor].CGColor; _maskLayer.strokeColor = [UIColor redColor].CGColor; _maskLayer.frame = self.bounds; _maskLayer.contentsCenter = CGRectMake(0.5, 0.5, 0.1, 0.1); _maskLayer.contentsScale = [UIScreen mainScreen].scale; _contentLayer = [CALayer layer]; _contentLayer.mask = _maskLayer; _contentLayer.frame = self.bounds; [self.layer addSublayer:_contentLayer]; } - (void)setImage:(UIImage *)image { _contentLayer.contents = (id)image.CGImage; } @end
声明了用于maskLayer个CAShapedLayer, CAShapedLayer有个path的属性,将内容Layer的mask设置为maskLayer, 就可以获取到我们想要的形状。
path我们可以使用CAMutablePath任意的构造,上述的代码运行想过如下:
如果将代码改成
_maskLayer = [CAShapeLayer layer]; _maskLayer.path = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:20].CGPath; _maskLayer.fillColor = [UIColor blackColor].CGColor; _maskLayer.strokeColor = [UIColor redColor].CGColor; _maskLayer.frame = self.bounds; _maskLayer.contentsCenter = CGRectMake(0.5, 0.5, 0.1, 0.1); _maskLayer.contentsScale = [UIScreen mainScreen].scale; //非常关键设置自动拉伸的效果且不变形 _contentLayer = [CALayer layer]; _contentLayer.mask = _maskLayer; _contentLayer.frame = self.bounds; [self.layer addSublayer:_contentLayer];
的效果:
如果将代码改成:
CGMutablePathRef path = CGPathCreateMutable(); CGPoint origin = self.bounds.origin; CGFloat radius = CGRectGetWidth(self.bounds) / 2; CGPathMoveToPoint(path, NULL, origin.x, origin.y + 2 *radius); CGPathMoveToPoint(path, NULL, origin.x, origin.y + radius); CGPathAddArcToPoint(path, NULL, origin.x, origin.y, origin.x + radius, origin.y, radius); CGPathAddArcToPoint(path, NULL, origin.x + 2 * radius, origin.y, origin.x + 2 * radius, origin.y + radius, radius); CGPathAddArcToPoint(path, NULL, origin.x + 2 * radius, origin.y + 2 * radius, origin.x + radius, origin.y + 2 * radius, radius); CGPathAddLineToPoint(path, NULL, origin.x, origin.y + 2 * radius); _maskLayer = [CAShapeLayer layer]; _maskLayer.path = path; _maskLayer.fillColor = [UIColor blackColor].CGColor; _maskLayer.strokeColor = [UIColor clearColor].CGColor; _maskLayer.frame = self.bounds; _maskLayer.contentsCenter = CGRectMake(0.5, 0.5, 0.1, 0.1); _maskLayer.contentsScale = [UIScreen mainScreen].scale; //非常关键设置自动拉伸的效果且不变形 _contentLayer = [CALayer layer]; _contentLayer.mask = _maskLayer; _contentLayer.frame = self.bounds; [self.layer addSublayer:_contentLayer];
将是这个效果:
理论上我们可以构造出任意想要的形状,但是有些形状如果你不熟悉几何知识的话是构造不出正确的
path的,从代码上我们可以看到我们可以通过设置CALayer的contents属性来设置显示的内容,那我们
是不是可以通过设置CAShapedLayer的contents来设置maskLayer呢?答案是肯定的,代码如下:
_maskLayer = [CAShapeLayer layer]; _maskLayer.fillColor = [UIColor blackColor].CGColor; _maskLayer.strokeColor = [UIColor clearColor].CGColor; _maskLayer.frame = self.bounds; _maskLayer.contentsCenter = CGRectMake(0.5, 0.5, 0.1, 0.1); _maskLayer.contentsScale = [UIScreen mainScreen].scale; //非常关键设置自动拉伸的效果且不变形 _maskLayer.contents = (id)[UIImage imageNamed:@"gray_bubble_right@2x.png"].CGImage; _contentLayer = [CALayer layer]; _contentLayer.mask = _maskLayer; _contentLayer.frame = self.bounds; [self.layer addSublayer:_contentLayer];
gray_bubble_right就是你想要的形状,运行效果如下:
相关文章推荐
- iOS 复杂动画的简单原理(一)
- iOS 斯坦福大学公开课地址
- ios AFNetworking 有用篇
- 关于苹果开发证书失效的解决方案(2016年2月14日Failed to locate or generate matching signing assets)
- iOS 此证书签发者无效 解决办法
- iOS @Strongify @Weakify
- iOS APP开发集成Apple Pay与银联SDK开发教程(附示例代码)
- iOS开发-常用第三方开源框架介绍(你了解的ios只是冰山一角)
- IOS中 Block简介与用法
- Missing iOS Distribution signing identity for XXXXXX
- iOS上传语音到服务器
- IOS开发基础知识--碎片34
- iOS上传视频到服务器
- iOS 外部常量(extern)的最佳使用方法
- iOS 开发小记 (九)
- ios 开发中零碎易错知识点
- iOS响应链和传递机制
- iOS的影片播放 MediaPlayer 和 AVPlayer
- 【iOS提高】单例模式在OC的使用
- iOS程序main函数之前发生了什么