美文网首页iOS进阶之路
仿QQ--讨论组头像

仿QQ--讨论组头像

作者: DDY | 来源:发表于2017-11-17 11:26 被阅读165次
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 = @[@"https://img.haomeiwen.com/i1465510/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

相关文章

  • 仿QQ--讨论组头像

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

  • Flutter仿QQ讨论组头像

    前言 上篇文章分享了Flutter仿微信/微博九宫格。已实现类似微信/微博展示图片九宫格，拖拽排序，微信群组头像，...

  • Flutter 高仿QQ讨论组头像

    View宽D，蓝色小圆半径r，红色大圆半径R，Y轴上偏移量dy，头像数量n。 正文 一、计算每个小圆的中心坐标 首...

  • QQ讨论组头像

    去年应项目需要，要实现QQ讨论组圆形组合头像，你大爷的，国内外网站溜达了遍没找到合适，寻思怎么也要实现吧，就...

  • [Android] 自定义View之仿QQ讨论组头像

    转载文章作者：一息尚存 原文链接：http://www.jianshu.com/p/349aa6153fcc 效...

  • [Android] 自定义View之仿QQ讨论组头像

    在以前的一个项目中，需要实现类似QQ讨论组头像的控件，只是头像数量和布局有一小点不一样：一是最头像数是4个，二是头...

  • android 仿iphone 头像效果

    仿iOS头像选择效果 今天分享一个《仿iOS头像选择效果》的视频课程，主要有下面几点知识点： 自定义圆形Image...

  • 仿QQ头像裁剪头像效果

    项目中用到头像裁剪需求，于是仿照QQ的效果自己写了一个裁剪图片的控制器，支持设置裁剪区域和蒙版样式，放大和缩小图片...

  • iOS 如何加入讨论组

    讨论组不能自己加入，需要在讨论组成员邀请加入。 /*! 讨论组加人，将用户加入讨论组 @param discuss...

  • 爬虫很有可能把你们的老板送进监狱！

    讨论组 960410445 讨论组 960410445 讨论组 960410445 千万的注意了 ，各位小伙伴们！

网友评论

    本文标题：仿QQ--讨论组头像

    本文链接：https://www.haomeiwen.com/subject/qqodvxtx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    iOS进阶之路

    关于我们|服务条款|联系我们|仿QQ--讨论组头像|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！