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链接