iOS-正六边形堆叠

一些app会有此类效果，我按照自己的理解仿写了一个

如图

1.如何绘制单个正六边形

使用继承于CAShapeLayer的YYHexagonsLayer设置路径来绘制单个六边形
//YYHexagonsLayer的属性与方法
@property (nonatomic, strong) UIColor *normalColor;
@property (nonatomic, strong) UIColor *highlightColor;
@property (nonatomic, assign, readonly) CGFloat sideLength;
@property (nonatomic, assign, getter=isSelected) BOOL selected;
+ (instancetype)layerWithSideLength:(CGFloat)sideLength;

//构造方法
+ (instancetype)layerWithSideLength:(CGFloat)sideLength {
    YYHexagonsLayer *layer = [YYHexagonsLayer layer];
    
    CGFloat utilAngle = M_PI / 3;
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(cos(utilAngle * 0.5) * sideLength, sin(utilAngle * 0.5) * sideLength)];
    
    [path addLineToPoint:CGPointMake(cos(utilAngle * 1.5) * sideLength, sin(utilAngle * 1.5) * sideLength)];
    [path addLineToPoint:CGPointMake(cos(utilAngle * 2.5) * sideLength, sin(utilAngle * 2.5) * sideLength)];
    [path addLineToPoint:CGPointMake(cos(utilAngle * 3.5) * sideLength, sin(utilAngle * 3.5) * sideLength)];
    [path addLineToPoint:CGPointMake(cos(utilAngle * 4.5) * sideLength, sin(utilAngle * 4.5) * sideLength)];
    [path addLineToPoint:CGPointMake(cos(utilAngle * 5.5) * sideLength, sin(utilAngle * 5.5) * sideLength)];
    
    layer.path = path.CGPath;
    layer.fillColor = UIColor.orangeColor.CGColor;
    layer.bounds = CGRectMake(0, 0, sideLength * 2, sin(utilAngle * 1) * sideLength * 2);
    
    layer->_sideLength = sideLength;
    
    return layer;
}
有了YYHexagonsLayer之后，使用layerWithSideLength:方法创建layer，设置position并添加到superLayer上，一个正六边形就出现了。
YYHexagonsLayer *layer = [YYHexagonsLayer layerWithSideLength:30];
layer.normalColor = UIColor.orangeColor;
layer.position = CGPointMake(100, 100);
[self.view.layer addSublayer:layer];
一个正六边形
到此第一步就算完成了。

2.如何将多个正六边形堆叠在一起

每个正六边形的position的计算都要用到三角函数变换，并不难，只是麻烦了一些。
//首先，我仿照UITableView，为YYHexagonsGroupView添加了数据源、代理方法
@protocol YYHexagonsGroupViewDelegate <NSObject>

@required
- (NSInteger)numberOfHexagonsInGroupView:(YYHexagonsGroupView *)hexagonsGroupView;
- (YYHexagonsLayer *)hexagonsGroupView:(YYHexagonsGroupView *)hexagonsGroupView hexagonsForRowAtIndex:(NSInteger)index;

@optional
- (void)hexagonsGroupView:(YYHexagonsGroupView *)hexagonsGroupView didSelectRowAtIndex:(NSInteger)index;

@end

//下面是属性与方法
@property (nonatomic, weak) id<YYHexagonsGroupViewDelegate> delegate;
@property (nonatomic, assign) CGFloat utilWidth;
@property (nonatomic, assign) CGFloat margin;
//添加了刷新所有和刷新某几个视图的方法
- (void)reloadData;
- (void)reloadIndexs:(NSArray<NSNumber *> *)indexs;

- (YYHexagonsLayer *)hexagonsLayerWithIndex:(NSInteger)index;
在YYHexagonsGroupView.m中的实现
使用一个字典来存放所有的六边形，key值为@(index) 
//属性
@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) NSMutableDictionary<NSNumber *,YYHexagonsLayer *> *hexagonsLayers;
创建子视图
//创建子视图
- (void)createSubviews {
    _scrollView = [[UIScrollView alloc] init];
    [_scrollView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap:)]];
    [self addSubview:_scrollView];
}
刷新方法
//刷新方法
- (void)reloadData {
    [_hexagonsLayers enumerateKeysAndObjectsUsingBlock:^(NSNumber * _Nonnull key, YYHexagonsLayer * _Nonnull obj, BOOL * _Nonnull stop) {
        [obj removeFromSuperlayer];
    }];
    [_hexagonsLayers removeAllObjects];
    
    [self createSublayers];
}

- (void)reloadIndexs:(NSArray<NSNumber *> *)indexs {
    [indexs enumerateObjectsUsingBlock:^(NSNumber * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        [_hexagonsLayers removeObjectForKey:obj];
        [_hexagonsLayers[obj] removeFromSuperlayer];
        _hexagonsLayers[obj] = [_delegate hexagonsGroupView:self hexagonsForRowAtIndex:obj.integerValue];
    }];
    
}
创建正六边形, 并计算position和_scrollView的contentSize 
//创建正六边形方法
- (void)createSublayers {
    if (!_hexagonsLayers) {
        _hexagonsLayers = [NSMutableDictionary dictionary];
    }
    
    NSInteger MaxCount = 0;
    if ([_delegate respondsToSelector:@selector(numberOfHexagonsInGroupView:)]) {
        MaxCount = [_delegate numberOfHexagonsInGroupView:self];
    } else {
        //此处为测试时的代码，可删掉
        CGFloat width = self.frame.size.width;
        CGFloat height = self.frame.size.height;
        
        CGFloat utilWidth = _utilWidth;
        CGFloat margin = _margin;
        
        NSInteger MaxI = floor((width - (0.5 * utilWidth * 2 * sin(M_PI / 3))) / (utilWidth * 2 * sin(M_PI / 3) + margin));
        
        MaxCount = floor((height - utilWidth) / (utilWidth + cos(M_PI/3) * (utilWidth + margin))) * MaxI;
    }
    CGFloat maxY = 0;
    for (NSInteger i = 0; i < MaxCount; i ++) {
        maxY = [self addSublayerWithIndex:i];
    }
    
    _scrollView.contentSize = CGSizeMake(self.bounds.size.width, maxY + _utilWidth);
    
}

- (CGFloat)addSublayerWithIndex:(NSInteger)index {
    
    NSInteger row = 0, i = 0;
    
    CGFloat width = self.frame.size.width;
    CGFloat height = self.frame.size.height;
    
    CGFloat utilWidth = _utilWidth;
    CGFloat margin = _margin;
    
    NSInteger MaxI = floor((width - (0.5 * utilWidth * 2 * sin(M_PI / 3))) / (utilWidth * 2 * sin(M_PI / 3) + margin));
    
    row = index / MaxI;
    i = index % MaxI;
    
    if (row * MaxI + i > [_delegate numberOfHexagonsInGroupView:self]) {
        return _scrollView.contentSize.height;
    }
    
    NSInteger MaxRow = 0;
    if ([_delegate respondsToSelector:@selector(numberOfHexagonsInGroupView:)]) {
        MaxRow = ceil([_delegate numberOfHexagonsInGroupView:self] / (double)MaxI);
    } else {
        //此处为测试时的代码，可删掉
        MaxRow = floor((height - utilWidth) / (utilWidth + cos(M_PI/3) * (utilWidth + margin)));
    }
    
    
    CGFloat positionY = utilWidth * 2 + (utilWidth + cos(M_PI/3) * (utilWidth + margin)) * row;
    YYHexagonsLayer *layer = nil;
    
    if ([_delegate respondsToSelector:@selector(hexagonsGroupView:hexagonsForRowAtIndex:)]) {
        layer = [_delegate hexagonsGroupView:self hexagonsForRowAtIndex:row * MaxI + i];
    } else {
        //此处为测试时的代码，可删掉
        layer = [YYHexagonsLayer layerWithSideLength:utilWidth];
        layer.normalColor = UIColor.orangeColor;
        layer.highlightColor = UIColor.cyanColor;
    }
    
    CGFloat x_offset = 0;
    if (row % 2 == 0) {
        x_offset = utilWidth * 2;
    } else {
        x_offset = utilWidth + margin * 0.5;
    }
    
    CGFloat positionX = (i + 0.5) * utilWidth * 2 * sin(M_PI / 3) + i * margin + x_offset;
    layer.position = CGPointMake(positionX, positionY);
    
    [_scrollView.layer addSublayer:layer];
    return layer.position.y;
}

- (YYHexagonsLayer *)hexagonsLayerWithIndex:(NSInteger)index {
    YYHexagonsLayer *layer = _hexagonsLayers[@(index)];
    if (layer == nil) {
        layer = [YYHexagonsLayer layerWithSideLength:_utilWidth];
        _hexagonsLayers[@(index)] = layer;
        [self addSublayerWithIndex:index];
        NSLog(@"%ld--%ld", (long)index, _hexagonsLayers.count);
    }
    
    return layer;
}
点击事件，获取点击位置point，转换坐标系获得convertPoint，遍历_hexagonsLayers字典，看convertPoint在哪一个六边形的路径path内，使用到的函数是CG_EXTERN bool CGPathContainsPoint(CGPathRef cg_nullable path, const CGAffineTransform * __nullable m, CGPoint point, bool eoFill) 
//点击事件
- (void)tap:(UITapGestureRecognizer *)tap {
    CGPoint point = [tap locationInView:_scrollView];
    [_hexagonsLayers enumerateKeysAndObjectsUsingBlock:^(NSNumber * _Nonnull key, YYHexagonsLayer * _Nonnull layer, BOOL * _Nonnull stop) {
        CGPoint convertPoint = [layer convertPoint:point fromLayer:_scrollView.layer];
        if (CGPathContainsPoint(layer.path, NULL, convertPoint, NO)) {
            if ([_delegate respondsToSelector:@selector(hexagonsGroupView:didSelectRowAtIndex:)]) {
                [_delegate hexagonsGroupView:self didSelectRowAtIndex:key.integerValue];
            } else {
                layer.selected = !layer.isSelected;
            }
            *stop = YES;
        }
    }];
}

//layoutSubviews
- (void)layoutSubviews {
    [super layoutSubviews];
    _scrollView.frame = self.bounds;
    [self createSublayers];
}
到此第2步就完成了

3.使用YYHexagonsGroupView 

//创建
_groupView = [[YYHexagonsGroupView alloc] init];
_groupView.translatesAutoresizingMaskIntoConstraints = NO;
_groupView.utilWidth = 15;
_groupView.margin = 2;
_groupView.delegate = self;
...设置约束代码略去

//实现代理方法
- (NSInteger)numberOfHexagonsInGroupView:(YYHexagonsGroupView *)hexagonsGroupView {
    return _count;
}
- (YYHexagonsLayer *)hexagonsGroupView:(YYHexagonsGroupView *)hexagonsGroupView hexagonsForRowAtIndex:(NSInteger)index {
    YYHexagonsLayer *layer = [hexagonsGroupView hexagonsLayerWithIndex:index];
    layer.highlightColor = UIColor.cyanColor;
    layer.normalColor = UIColor.orangeColor;
    layer.selected = _selected[index];
    
    return layer;
}

- (void)hexagonsGroupView:(YYHexagonsGroupView *)hexagonsGroupView didSelectRowAtIndex:(NSInteger)index {
    _selected[index] = !_selected[index];
    [hexagonsGroupView reloadIndexs:@[@(index)]];
}

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

推荐阅读更多精彩内容