一些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地址
效果图
网友评论