起源

最近的新项目要在兴趣选择的标签上做一些文章，看了一些国内需要兴趣选择的APP的样式，基本都是不规则的横向排列标签选择模式，基本都是用CollectionView配合着自己重新写的FLowLayout进行重新的布局排布。然而，虎嗅APP的兴趣选择标签的样式倒是很独特，用了一种类似蜂窝样式的排布来进行选择，同时还配合动画效果，进一步的提升了用户的体验感受。但是只是在安卓版本的虎嗅APP才有，iOS版本的并没有体验到。

前期调研

因为那个动画只有在你首次安装APP的时候才会触发，这样我们就要经过好多次的调试。我们总结为是把所有的标签都写在了本地。那么，现在就是要把这些六边形一个个的写进去，就可以了。

建立一个不规则的坐标系

因为六边形画的不他好就用了圆形来代替，就是建立一个这样的坐标系来代替每个六边形在视图中的位置，这样我们就不用去计算每一个六边形的位置了，只要知道了它的坐标，那就可以知道它的具体的位置。

实现

把每一个六边形看成一个数据模型，创建一个六边形模型HexPointModel，现在先给两个属性X和Y。

#import <Foundation/Foundation.h>

NS_ASSUME_NONNULL_BEGIN

@interface HexPointModel : NSObject

@property (nonatomic, assign) NSInteger X;

@property (nonatomic, assign) NSInteger Y;

@end

NS_ASSUME_NONNULL_END

然后我们写个统一的方法方便我们创建数据模型

- (HexPointModel *)createModelWithX:(NSInteger)X Y:(NSInteger)Y{
    HexPointModel *model = [[HexPointModel alloc]init];
    model.X = X;
    model.Y = Y;
    return model;
}

然后我们在 -(void)viewDidLoad{}中简单的先给几个坐标来显示一下效果：

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.interestScrollView = [[UIScrollView alloc]initWithFrame:self.view.bounds];
    [self.view addSubview:self.interestScrollView];
    self.nodeArray = [NSMutableArray new];
    HexPointModel *model0 = [self createModelWithX:0 Y:0];
    [self.nodeArray addObject:model0];
    HexPointModel *model1 = [self createModelWithX:0 Y:1];
    [self.nodeArray addObject:model1];
    HexPointModel *model2 = [self createModelWithX:5 Y:5];
    [self.nodeArray addObject:model2];

    [self creatHexagonViewWith:self.nodeArray];
}

- (void)creatHexagonViewWith:(NSMutableArray*)array{

    CGFloat side = 100;
    CGFloat marginTop = 80;
    CGFloat marginLeft = 50;

    CGFloat maxX = 0;
    CGFloat maxY = 0;


    for (HexPointModel *point  in array) {

        CGFloat xPoint = side * point.X + (point.Y % 2 == 0 ? 0 : marginLeft);
        CGFloat yPoint = marginTop * point.Y;

        HexagonalView *hexView = [[HexagonalView alloc]initWithFrame:CGRectMake(xPoint, yPoint, side, side)];
        hexView.backgroundColor = [UIColor yellowColor];
        hexView.isDraw = YES;
        hexView.delegate = self;
        [hexView setViewDataWith:point];
        [self.interestScrollView addSubview:hexView];

        if (maxX < point.X) {
            maxX = point.X;
        }
        if (maxY < point.Y) {
            maxY = point.Y;
        }

    }

    CGFloat sizeX = maxX * side + 100 + 50;
    CGFloat sizeY = maxY * marginTop + 100 + 50;
    if (self.interestScrollView.contentSize.width > sizeX) {
        sizeX = self.interestScrollView.contentSize.width;
    }
    if (self.interestScrollView.contentSize.height > sizeY) {
        sizeY = self.interestScrollView.contentSize.height;
    }
    self.interestScrollView.contentSize = CGSizeMake(sizeX, sizeY);

}

这样就可以实现这个功能了。然后就是自定义的去绘制一个六边形，然后用- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event这个函数 去判断触摸的点是不是在你绘制的六边形之内就可以了。这样的处理网上有很多。