一些app會有此類效果驰唬，我按照自己的理解仿寫了一個
![]()
如圖
如圖
1.如何繪制單個正六邊形
使用繼承于CAShapeLayer的YYHexagonsLayer設(shè)置路徑來繪制單個六邊形
//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;
//構(gòu)造方法
+ (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:方法創(chuàng)建layer缝呕，設(shè)置position并添加到superLayer上常挚，一個正六邊形就出現(xiàn)了彼宠。
YYHexagonsLayer *layer = [YYHexagonsLayer layerWithSideLength:30];
layer.normalColor = UIColor.orangeColor;
layer.position = CGPointMake(100, 100);
[self.view.layer addSublayer:layer];
一個正六邊形
到此第一步就算完成了频丘。
2.如何將多個正六邊形堆疊在一起
每個正六邊形的position的計算都要用到三角函數(shù)變換郁稍，并不難辜梳，只是麻煩了一些粱甫。
//首先，我仿照UITableView作瞄，為YYHexagonsGroupView添加了數(shù)據(jù)源茶宵、代理方法
@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中的實現(xiàn)
使用一個字典來存放所有的六邊形，key值為@(index)
//屬性
@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) NSMutableDictionary<NSNumber *,YYHexagonsLayer *> *hexagonsLayers;
創(chuàng)建子視圖
//創(chuàng)建子視圖
- (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];
}];
}
創(chuàng)建正六邊形, 并計算position和_scrollView的contentSize
//創(chuàng)建正六邊形方法
- (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，轉(zhuǎn)換坐標(biāo)系獲得convertPoint抖锥，遍歷_hexagonsLayers字典宵喂，看convertPoint在哪一個六邊形的路徑path內(nèi)糠赦，使用到的函數(shù)是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
//創(chuàng)建
_groupView = [[YYHexagonsGroupView alloc] init];
_groupView.translatesAutoresizingMaskIntoConstraints = NO;
_groupView.utilWidth = 15;
_groupView.margin = 2;
_groupView.delegate = self;
...設(shè)置約束代碼略去
//實現(xiàn)代理方法
- (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];
}
到此第三步就結(jié)束了
最后放上效果圖和demo地址
效果圖
