仿QQ--讨论组头像

DDYHeader.jpg

请关注，防止你用了，我改了，有问题连个商量的人都找不到...

DDYHeader.h

#import <UIKit/UIKit.h>

#define headerClipAngle 60 // 默认裁剪角度

static inline float change2Radians(double degrees) { return degrees * M_PI / 180; }
static inline float change2Angle(double rad) { return rad *  180 / M_PI; }

@interface DDYHeader : UIView
/** 占位图（本地图片） */
@property (nonatomic, strong) NSArray <UIImage *>*imgArray;
/** URL（网络图片） */
@property (nonatomic, strong) NSArray <NSString *>*urlArray;

+ (instancetype)headerWithHeaderWH:(CGFloat)headerWH;

@end

DDYHeader.m

#import "DDYHeader.h"

//-------------------------------- layer --------------------------------//
@interface DDYHeaderLayer : CAShapeLayer
/** 因为统一裁剪，所以旋转一定角度 */
@property (nonatomic, assign) CGFloat angle;
/** 是否裁剪 */
@property (nonatomic, assign) BOOL isClip;
/** 裁剪角度 */
@property (nonatomic, assign) CGFloat clipHalfAngle;

+ (DDYHeaderLayer *)initWithAngle:(CGFloat)angle isClip:(BOOL)isClip;

@end

@implementation DDYHeaderLayer

- (instancetype)init {
    if (self = [super init]) {
        _angle = 0;
        _isClip = NO;
    }
    return self;
}

+ (DDYHeaderLayer *)initWithAngle:(CGFloat)angle isClip:(BOOL)isClip {
    DDYHeaderLayer *headerLayer = [DDYHeaderLayer layer];
    [headerLayer updateAngle:angle isClip:isClip];
    return headerLayer;
}

- (void)updateAngle:(CGFloat)angle isClip:(BOOL)isClip {
    _angle = angle;
    _isClip = isClip;
    _clipHalfAngle = headerClipAngle/2.;
    self.contentsScale = [UIScreen mainScreen].scale;
}

- (void)drawInContext:(CGContextRef)ctx {
    [super drawInContext:ctx];
    
    CGFloat width  = self.bounds.size.width;
    CGFloat height = self.bounds.size.height;
    
    CGContextSetRGBFillColor(ctx, 0, 0, 0, 0);
    
    CGAffineTransform transform = CGAffineTransformIdentity;
    transform = CGAffineTransformTranslate(transform, CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
    transform = CGAffineTransformRotate(transform, change2Radians(_angle));
    transform = CGAffineTransformTranslate(transform, -CGRectGetMidX(self.bounds), -CGRectGetMidY(self.bounds));
    
    CGMutablePathRef path = CGPathCreateMutable();
    if (_isClip)
    {
        CGPathAddArc(path, &transform, width/2, height/2, width/2, change2Radians(90-_clipHalfAngle), change2Radians(90+_clipHalfAngle), true);
        CGPathAddArcToPoint(path,
                            &transform,
                            width/2,
                            height/2+(width/2*sin(change2Radians(90-_clipHalfAngle)) - width/2*sin(change2Radians(_clipHalfAngle))*tan(change2Radians(_clipHalfAngle))),
                            width/2+width/2*sin(change2Radians(_clipHalfAngle)), height/2+width/2*sin(change2Radians(90-_clipHalfAngle)),
                            width/2);
    }
    else
    {
        CGPathAddArc(path, &transform, width/2, height/2, width/2, change2Radians(90), change2Radians(90.01), true);
    }
    
    UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, [UIScreen mainScreen].scale);
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithCGPath:path];
    [bezierPath closePath];
    [bezierPath addClip];
    self.path = bezierPath.CGPath;
}

@end

//-------------------------------- view --------------------------------//
@implementation DDYHeader

+ (instancetype)headerWithHeaderWH:(CGFloat)headerWH {
    return [[self alloc] initWithFrame:CGRectMake(0, 0, headerWH, headerWH)];
}

- (void)setUrlArray:(NSArray *)urlArray {
    _urlArray = urlArray;
    [self.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    if (urlArray.count == 1) {
        [self view1];
    } else if (urlArray.count == 2) {
        [self view2];
    } else if (urlArray.count == 3) {
        [self view3];
    } else if (urlArray.count == 4) {
        [self view4];
    } else if (urlArray.count >= 5) {
        [self view5];
    }
}

#pragma mark 一张图片
- (void)view1 {
    DDYHeaderLayer *layer0 = [DDYHeaderLayer initWithAngle:0 isClip:NO];
    UIImageView *view0 = [self imgViewWithCenter:CGPointMake(self.ddy_h/2, self.ddy_h/2) size:CGSizeMake(self.ddy_w, self.ddy_h) layer:layer0];
    [view0 sd_setImageWithURL:[NSURL URLWithString:_urlArray[0]] placeholderImage:[self getPlaceholderImg:0]];
    [self addSubview:view0];
}

#pragma mark 两张图片
- (void)view2 {
    CGFloat diameter = self.ddy_w + self.ddy_w- sqrtf(2)*self.ddy_w;
    CGFloat r = diameter/2;
    
    DDYHeaderLayer *layer0 = [DDYHeaderLayer initWithAngle:0 isClip:NO];
    UIImageView *view0 = [self imgViewWithCenter:CGPointMake(r, r) size:CGSizeMake(diameter, diameter) layer:layer0];
    [view0 sd_setImageWithURL:[NSURL URLWithString:_urlArray[0]] placeholderImage:[self getPlaceholderImg:0]];
    [self addSubview:view0];
    
    DDYHeaderLayer *layer1 = [DDYHeaderLayer initWithAngle:180-45 isClip:YES];
    UIImageView *view1 = [self imgViewWithCenter:CGPointMake(r+sqrtf(2)*diameter/2, r+sqrtf(2)*diameter/2) size:CGSizeMake(diameter, diameter) layer:layer1];
    [view1 sd_setImageWithURL:[NSURL URLWithString:_urlArray[1]] placeholderImage:[self getPlaceholderImg:1]];
    [self addSubview:view1];
}

#pragma mark 三张图片
- (void)view3 {
    CGFloat diameter = self.ddy_w/2;
    CGPoint center0 = CGPointMake(diameter, diameter / 2);
    CGPoint center1 = CGPointMake(center0.x - diameter * sin(change2Radians(30)), diameter / 2 + diameter * cos(change2Radians(30)));
    CGPoint center2 = CGPointMake(center1.x + diameter, center1.y);
    
    self.ddy_h = diameter+sqrtf(3)/2*diameter;
    
    DDYHeaderLayer *layer0 = [DDYHeaderLayer initWithAngle:30 isClip:YES];
    UIImageView *view0 = [self imgViewWithCenter:center0 size:CGSizeMake(diameter, diameter) layer:layer0];
    [view0 sd_setImageWithURL:[NSURL URLWithString:_urlArray[0]] placeholderImage:[self getPlaceholderImg:0]];
    [self addSubview:view0];
    
    DDYHeaderLayer *layer1 = [DDYHeaderLayer initWithAngle:270 isClip:YES];
    UIImageView *view1 = [self imgViewWithCenter:center1 size:CGSizeMake(diameter, diameter) layer:layer1];
    [view1 sd_setImageWithURL:[NSURL URLWithString:_urlArray[1]] placeholderImage:[self getPlaceholderImg:1]];
    [self addSubview:view1];
    
    DDYHeaderLayer *layer2 = [DDYHeaderLayer initWithAngle:150 isClip:YES];
    UIImageView *view2 = [self imgViewWithCenter:center2 size:CGSizeMake(diameter, diameter) layer:layer2];
    [view2 sd_setImageWithURL:[NSURL URLWithString:_urlArray[2]] placeholderImage:[self getPlaceholderImg:2]];
    [self addSubview:view2];
}

#pragma mark 四张图片
- (void)view4 {
    CGFloat diameter = self.ddy_w/2;
    CGPoint center0 = CGPointMake(diameter/2, diameter/2);
    CGPoint center1 = CGPointMake(center0.x, center0.y + diameter);
    CGPoint center2 = CGPointMake(center1.x + diameter, center1.y);
    CGPoint center3 = CGPointMake(center2.x, center2.y - diameter);
    
    DDYHeaderLayer *layer0 = [DDYHeaderLayer initWithAngle:0 isClip:YES];
    UIImageView *view0 = [self imgViewWithCenter:center0 size:CGSizeMake(diameter, diameter) layer:layer0];
    [view0 sd_setImageWithURL:[NSURL URLWithString:_urlArray[0]] placeholderImage:[self getPlaceholderImg:0]];
    [self addSubview:view0];
    
    DDYHeaderLayer *layer1 = [DDYHeaderLayer initWithAngle:270 isClip:YES];
    UIImageView *view1 = [self imgViewWithCenter:center1 size:CGSizeMake(diameter, diameter) layer:layer1];
    [view1 sd_setImageWithURL:[NSURL URLWithString:_urlArray[1]] placeholderImage:[self getPlaceholderImg:1]];
    [self addSubview:view1];
    
    DDYHeaderLayer *layer2 = [DDYHeaderLayer initWithAngle:180 isClip:YES];
    UIImageView *view2 = [self imgViewWithCenter:center2 size:CGSizeMake(diameter, diameter) layer:layer2];
    [view2 sd_setImageWithURL:[NSURL URLWithString:_urlArray[2]] placeholderImage:[self getPlaceholderImg:2]];
    [self addSubview:view2];
    
    DDYHeaderLayer *layer3 = [DDYHeaderLayer initWithAngle:90 isClip:YES];
    UIImageView *view3 = [self imgViewWithCenter:center3 size:CGSizeMake(diameter, diameter) layer:layer3];
    [view3 sd_setImageWithURL:[NSURL URLWithString:_urlArray[3]] placeholderImage:[self getPlaceholderImg:3]];
    [self addSubview:view3];
}

#pragma mark 五张图片
- (void)view5 {
    CGFloat r = self.ddy_w / 2 / ( 2*sin(change2Radians(54)) + 1 );
    CGFloat diameter = r * 2;
    CGPoint center0 = CGPointMake(self.ddy_w/2, r);
    CGPoint center1 = CGPointMake(center0.x - diameter * sin(change2Radians(54)), center0.y + diameter * cos(change2Radians(54)));
    CGPoint center2 = CGPointMake(center1.x + diameter * cos(change2Radians(72)), center1.y + diameter * sin(change2Radians(72)));
    CGPoint center3 = CGPointMake(center2.x + diameter, center2.y);
    CGPoint center4 = CGPointMake(center3.x + diameter * cos(change2Radians(72)), center3.y - diameter * sin(change2Radians(72)));
    
    DDYHeaderLayer *layer0 = [DDYHeaderLayer initWithAngle:54 isClip:YES];
    UIImageView *view0 = [self imgViewWithCenter:center0 size:CGSizeMake(diameter, diameter) layer:layer0];
    [view0 sd_setImageWithURL:[NSURL URLWithString:_urlArray[0]] placeholderImage:[self getPlaceholderImg:0]];
    [self addSubview:view0];
    
    DDYHeaderLayer *layer1 = [DDYHeaderLayer initWithAngle:270+72 isClip:YES];
    UIImageView *view1 = [self imgViewWithCenter:center1 size:CGSizeMake(diameter, diameter) layer:layer1];
    [view1 sd_setImageWithURL:[NSURL URLWithString:_urlArray[1]] placeholderImage:[self getPlaceholderImg:1]];
    [self addSubview:view1];
    
    DDYHeaderLayer *layer2 = [DDYHeaderLayer initWithAngle:270 isClip:YES];
    UIImageView *view2 = [self imgViewWithCenter:center2 size:CGSizeMake(diameter, diameter) layer:layer2];
    [view2 sd_setImageWithURL:[NSURL URLWithString:_urlArray[2]] placeholderImage:[self getPlaceholderImg:2]];
    [self addSubview:view2];
    
    DDYHeaderLayer *layer3 = [DDYHeaderLayer initWithAngle:180+18 isClip:YES];
    UIImageView *view3 = [self imgViewWithCenter:center3 size:CGSizeMake(diameter, diameter) layer:layer3];
    [view3 sd_setImageWithURL:[NSURL URLWithString:_urlArray[3]] placeholderImage:[self getPlaceholderImg:3]];
    [self addSubview:view3];
    
    DDYHeaderLayer *layer4 = [DDYHeaderLayer initWithAngle:90+36 isClip:YES];
    UIImageView *view4 = [self imgViewWithCenter:center4 size:CGSizeMake(diameter, diameter) layer:layer4];
    [view4 sd_setImageWithURL:[NSURL URLWithString:_urlArray[4]] placeholderImage:[self getPlaceholderImg:4]];
    [self addSubview:view4];
}

#pragma mark 得到imageView
- (UIImageView *)imgViewWithCenter:(CGPoint)center size:(CGSize)size layer:(DDYHeaderLayer *)layer {
    CGRect frame = CGRectMake(center.x - size.width/2, center.y - size.height/2, size.width, size.height);
    UIImageView *imgView = [[UIImageView alloc] initWithFrame:frame];
    imgView.contentMode = UIViewContentModeScaleAspectFill;
    layer.frame = imgView.bounds;
    imgView.layer.mask = layer;
    [layer setNeedsDisplay];
    return imgView;
}

#pragma mark 取占位图
- (UIImage *)getPlaceholderImg:(NSInteger)index {
    return (_imgArray[index]&&[_imgArray[index] isKindOfClass:[UIImage class]]) ? _imgArray[index] : [UIImage imageNamed:@"icon_head_defaul"];
}

@end

应用

   CGFloat headerWH = 150;
    DDYHeader *header1 = [DDYHeader headerWithHeaderWH:headerWH];
    header1.imageURLArray = @[@"http://upload-images.jianshu.io/upload_images/1465510-5a5b07561e664349.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"];;
    header1.center = CGPointMake(self.view.ddy_w/2+80, self.view.ddy_h/2+160);
    header1.backgroundColor = DDY_LightGray;
    [self.view addSubview:header1];

码农不易点星星 scan DDYPulseView code

最后编辑于：2017.11.22 15:27:12

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 157,198评论 4赞 359
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 66,663评论 1赞 290
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 106,985评论 0赞 237
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,673评论 0赞 202
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 51,994评论 3赞 285
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,399评论 1赞 211
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,717评论 2赞 310
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,407评论 0赞 194
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,112评论 1赞 239
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,371评论 2赞 241
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 31,891评论 1赞 256
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,255评论 2赞 250
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,881评论 3赞 233
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,010评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,764评论 0赞 192
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,412评论 2赞 269
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,299评论 2赞 260

仿QQ--讨论组头像

推荐阅读更多精彩内容