最近的新項目要在興趣選擇的標籤上作一些文章,看了一些國內須要興趣選擇的APP的樣式,基本都是不規則的橫向排列標籤選擇模式,基本都是用CollectionView
配合着本身從新寫的FLowLayout
進行從新的佈局排布。然而,虎嗅APP的興趣選擇標籤的樣式卻是很獨特,用了一種相似蜂窩樣式的排布來進行選擇,同時還配合動畫效果,進一步的提高了用戶的體驗感覺。可是隻是在安卓版本的虎嗅APP纔有,iOS版本的並無體驗到。node
由於那個動畫只有在你首次安裝APP的時候纔會觸發,這樣咱們就要通過好屢次的調試。咱們總結爲是把全部的標籤都寫在了本地。那麼,如今就是要把這些六邊形一個個的寫進去,就能夠了。ide
把每個六邊形當作一個數據模型,建立一個六邊形模型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
這個函數 去判斷觸摸的點是否是在你繪製的六邊形以內就能夠了。這樣的處理網上有不少。ui