http://www.cnblogs.com/pigpigDD/p/3991742.html
这篇文章是我的【iOS开发每日小笔记】系列中的一片,记录的是今天在开发工作中遇到的,可以用很短的文章或很小的demo演示解释出来的小心得小技巧。它们可能会给用户体验、代码效率得到一些提升,或是之前自己没有接触过的技术,很开心的学到了,放在这里得瑟一下。90%的作用是帮助自己回顾、记忆、复习。
在上一篇文章中,我详细地回顾、复习了Core Graphics框架中利用Quartz 2D来绘制各种各样的图形,其实这些绘图就是绘制到了UIView的CALayer层上。这次,受到另一篇博文(http://www.cnblogs.com/kenshincui/p/3972100.html)的启发,我利用在CALayer层上设置“寄宿图”,重新优化了自己项目中的一个小控件。本篇文章将介绍在CALayer层上设置“寄宿图”。(demo地址:https://github.com/pigpigdaddy/CircleHeadViewDemo)
效果是这样的:用户的头像不再是一个矩形,而是一个有这白色边框,带边框阴影的圆形。类似的效果比如“唱吧”、“QQ”。
下面是我自己写的效果:(带有一点点阴影。)
以前,我们使用一个讨巧的方法,那就是让UI组给我们切一个“中间镂空”的图片,蒙在UIImageView(我们的头像)上面。这样做挺讨巧,但是水平未免也太低了,而且灵活度非常低。“边宽”、“边颜色”、“阴影”,要改变这些只能麻烦UI组的同学重新切图。总之非常不科学。
用于处理照片的类:
1 //
2 //CircleHeadView.h3 //CircleHeadViewDemo4 //
5 //Created by pigpigdaddy on 14-9-24.6 //Copyright (c) 2014年 pigpigdaddy. All rights reserved.7 //8
9 #import
10
11 typedef enum{12 CircleHeadViewContentResize,13 CircleHeadViewContentResizeAspect,14 CircleHeadViewContentResizeAspectFill15 } CircleHeadViewContentType;16
17 @interfaceCircleHeadView : UIView18
19 @property (nonatomic, strong)UIColor *strokeColor;20 @property (nonatomic, assign)CGFloat strokeWidth;21 @property (nonatomic, strong)UIImage *originalImage;22 @property (nonatomic, assign)BOOL needShadow;23 @property (nonatomic, assign)CircleHeadViewContentType contentType;24
25 - (void)setCircleImage:(UIImage *)image;26
27 @end
1 //
2 //CircleHeadView.m3 //CircleHeadViewDemo4 //
5 //Created by pigpigdaddy on 14-9-24.6 //Copyright (c) 2014年 pigpigdaddy. All rights reserved.7 //8
9 #import "CircleHeadView.h"
10
11 @implementationCircleHeadView12
13 - (id)initWithFrame:(CGRect)frame14 {15 self =[super initWithFrame:frame];16 if(self) {17 //Initialization code18 //设置默认值
19 self.needShadow =NO;20 self.strokeColor =[UIColor whiteColor];21 self.strokeWidth = 2.0;22 self.contentType =CircleHeadViewContentResize;23 }24 returnself;25 }26
27 //设置原始图片
28 - (void)setCircleImage:(UIImage *)image29 {30 self.originalImage =image;31
32 //正圆形
33 CGRect bounds=CGRectMake(0, 0, self.bounds.size.height, self.bounds.size.height);34 CGFloat cornerRadius=self.bounds.size.height/2;35
36 if(self.needShadow) {37 //创建阴影层
38 [self createShadowLayer:bounds cornerRadius:cornerRadius];39 }40 //创建照片层
41 [self createImageLayer:bounds cornerRadius:cornerRadius];42 }43
44 - (void)createShadowLayer:(CGRect)bounds cornerRadius:(CGFloat)cornerRadius45 {46 CALayer *layerShadow=[[CALayer alloc]init];47 layerShadow.bounds=bounds;48 layerShadow.position=CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);49 layerShadow.cornerRadius=cornerRadius;50 layerShadow.shadowColor=[UIColor grayColor].CGColor;51 layerShadow.shadowOffset=CGSizeMake(2, 2);52 layerShadow.shadowOpacity=0.7;53 layerShadow.borderColor=self.strokeColor.CGColor;54 layerShadow.borderWidth=self.strokeWidth;55 [self.layer addSublayer:layerShadow];56 }57
58 - (void)createImageLayer:(CGRect)bounds cornerRadius:(CGFloat)cornerRadius59 {60 CALayer *layer=[[CALayer alloc]init];61 layer.bounds=bounds;62 layer.position=CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);63 layer.backgroundColor=[UIColor blackColor].CGColor;64 layer.cornerRadius=cornerRadius;65 layer.masksToBounds=YES;66 layer.borderColor=self.strokeColor.CGColor;67 layer.borderWidth=self.strokeWidth;68 layer.contents=(id)self.originalImage.CGImage;69 [self.layer addSublayer:layer];70
71 //设置照片的平铺方式
72 switch(self.contentType) {73 caseCircleHeadViewContentResize:74 {75 layer.contentsGravity =kCAGravityResize;76 }77 break;78 caseCircleHeadViewContentResizeAspect:79 {80 layer.contentsGravity =kCAGravityResizeAspect;81 }82 break;83 caseCircleHeadViewContentResizeAspectFill:84 {85 layer.contentsGravity =kCAGravityResizeAspectFill;86 }87 break;88
89 default:90 break;91 }92 }93
94 @end
我用了两个CALayer层,来分别绘制“阴影”和“照片”。
调用方法:
1 CircleHeadView *view = [[CircleHeadView alloc] initWithFrame:CGRectMake(50, 50, 80, 80)];2 view.needShadow =YES;3 view.strokeWidth = 2.0;4 view.strokeColor =[UIColor whiteColor];5 view.contentType =CircleHeadViewContentResizeAspectFill;6 [view setCircleImage:[UIImage imageNamed:@"photo.png"]];7 [self.view addSubview:view];
很简单,也很灵活,可以设置“阴影”、“边宽”、“边颜色”、“平铺类型”。其实还可以设置的更多,因为CALayer可以自定义的东西有很多。在此就不一一扩展了。
参考文章: