Cellular Matrix 蜂窩矩陣（一）

c4ibD3發表於2020-04-06
矩陣

Cellular Matrix 蜂窩矩陣（一）

起源

最近的新專案要在興趣選擇的標籤上做一些文章，看了一些國內需要興趣選擇的APP的樣式，基本都是不規則的橫向排列標籤選擇模式，基本都是用CollectionView配合著自己重新寫的FLowLayout進行重新的佈局排布。然而，虎嗅APP的興趣選擇標籤的樣式倒是很獨特，用了一種類似蜂窩樣式的排布來進行選擇，同時還配合動畫效果，進一步的提升了使用者的體驗感受。但是隻是在安卓版本的虎嗅APP才有，iOS版本的並沒有體驗到。

前期調研

因為那個動畫只有在你首次安裝APP的時候才會觸發，這樣我們就要經過好多次的除錯。我們總結為是把所有的標籤都寫在了本地。那麼，現在就是要把這些六邊形一個個的寫進去，就可以了。

建立一個不規則的座標系

Cellular Matrix 蜂窩矩陣（一）
因為六邊形畫的不他好就用了圓形來代替，就是建立一個這樣的座標系來代替每個六邊形在檢視中的位置，這樣我們就不用去計算每一個六邊形的位置了，只要知道了它的座標，那就可以知道它的具體的位置。

實現

把每一個六邊形看成一個資料模型，建立一個六邊形模型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這個函式 去判斷觸控的點是不是在你繪製的六邊形之內就可以了。這樣的處理網上有很多。

相關文章