The origin of

In my recent new project, I need to make some articles on the label of interest selection. I have seen some domestic apps that need interest selection. Basically, they are irregular horizontal arrangement of label selection mode, and the layout is rearranged by CollectionView and FLowLayout rewritten by myself. However, huxun APP’s interest selection label style is very unique, using a similar honeycomb pattern to select, but also with animation effect, to further improve the user experience. But it’s only available in the Android version of the Tiger Sniff APP, not in the iOS version.

The early stage of the research

Because that animation only triggers when you first install the APP, we have to go through a lot of debugging. We concluded that all the tags were written locally. So, now all I have to do is put in these hexons one by one, and that’s it.

Create an irregular coordinate system

implementation

Treating each hexagon as a data model, create a HexPointModel, now giving two attributes X and 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
Copy the code

And then let’s write a unified way to create our data model

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

ViewDidLoad {} -(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];
}
Copy the code

- (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);
    
}
Copy the code

That’s how it works. To draw a hexagon, use the function – (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event to determine whether the touch point is within the hexagon you are drawing. There are many such treatments on the Internet.