iOSUICollectionView自己定义Layout之蜂窝布局
Posted brucemengbm
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iOSUICollectionView自己定义Layout之蜂窝布局相关的知识,希望对你有一定的参考价值。
网上的UICollectionView的Layout布局,其cell的形状多为矩形和圆形。
本篇博文将正六边形作为cell的基本形状,为您展现独特的蜂窝布局效果及实现源代码。
帮助您让自己的App脱颖而出,更加与众不同。
最新完整代码下载地址:https://github.com/duzixi/Varied-Layouts
博文首发地址:http://blog.csdn.net/duzixi
实现效果图:
核心源码:
自己定义Layout
// // HoneyCombLayout.h // Demo-Layouts // // Created by 杜子兮(duzixi) on 14-9-1. // Copyright (c) 2014年 lanou3g.com All rights reserved. // #import <UIKit/UIKit.h> @interface HoneyCombLayout : UICollectionViewLayout @property (nonatomic, assign) NSInteger margin; @property (nonatomic, assign) NSInteger oX; @property (nonatomic, assign) NSInteger oY; @end
// // HoneyCombLayout.m // Demo-Layouts // // Created by 杜子兮(duzixi) on 14-9-1. // Copyright (c) 2014年 lanou3g.com All rights reserved. // #import "HoneyCombLayout.h" @implementation HoneyCombLayout /// 返回内容大小。用于推断是否须要加快滑动 -(CGSize)collectionViewContentSize { float height = (SIZE + self.margin) * ([self.collectionView numberOfItemsInSection:0] / 4 + 1); return CGSizeMake(320, height); } /// 返回YES,改变布局 /* - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds { return YES; } */ #pragma mark - UICollectionViewLayout /// 为每个Item生成布局特性 - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath]; UICollectionView *collection = self.collectionView; float x = (SIZE + self.margin) * (indexPath.item % COL + 1) * 0.75; float y = (SIZE + self.margin) * (indexPath.item / COL + 0.5) * cos(M_PI * 30.0f / 180.0f); if (indexPath.item % 2 == 1) { y += (SIZE + self.margin) * 0.5 * cosf(M_PI * 30.0f / 180.0f); } x += self.oX; y += self.oY; attributes.center = CGPointMake(x + collection.contentOffset.x, y + collection.contentOffset.y); attributes.size = CGSizeMake(SIZE, SIZE * cos(M_PI * 30.0f / 180.0f)); return attributes; } -(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect { NSArray *arr = [super layoutAttributesForElementsInRect:rect]; if ([arr count] > 0) { return arr; } NSMutableArray *attributes = [NSMutableArray array]; for (NSInteger i = 0 ; i < [self.collectionView numberOfItemsInSection:0 ]; i++) { NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0]; [attributes addObject:[self layoutAttributesForItemAtIndexPath:indexPath]]; } return attributes; } @end
自己定义cell:
// // HoneycombViewCell.h // Demo-Layouts // // Created by 杜子兮(duzixi) on 14-9-1. // Copyright (c) 2014年 lanou3g.com All rights reserved. // #import <UIKit/UIKit.h> @interface HoneycombViewCell : UICollectionViewCell @property (nonatomic,strong) UILabel *titleLabel; @end
// // HoneycombViewCell.m // Demo-Layouts // // Created by 杜子兮(duzixi) on 14-9-1. // Copyright (c) 2014年 lanou3g.com All rights reserved. // #import "HoneycombViewCell.h" @implementation HoneycombViewCell - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { // Initialization code self.titleLabel = [[UILabel alloc] init]; self.titleLabel.textColor = [UIColor whiteColor]; [self.contentView addSubview:self.titleLabel]; } return self; } -(void)layoutSubviews { [super layoutSubviews]; // step 1: 生成六边形路径 CGFloat longSide = SIZE * 0.5 * cosf(M_PI * 30 / 180); CGFloat shortSide = SIZE * 0.5 * sin(M_PI * 30 / 180); UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(0, longSide)]; [path addLineToPoint:CGPointMake(shortSide, 0)]; [path addLineToPoint:CGPointMake(shortSide + SIZE * 0.5, 0)]; [path addLineToPoint:CGPointMake(SIZE, longSide)]; [path addLineToPoint:CGPointMake(shortSide + SIZE * 0.5, longSide * 2)]; [path addLineToPoint:CGPointMake(shortSide, longSide * 2)]; [path closePath]; // step 2: 依据路径生成蒙板 CAShapeLayer *maskLayer = [CAShapeLayer layer]; maskLayer.path = [path CGPath]; // step 3: 给cell加入模版 self.layer.mask = maskLayer; self.backgroundColor = [UIColor orangeColor]; self.titleLabel.textAlignment = NSTextAlignmentCenter; self.titleLabel.frame = self.contentView.frame; } /* // Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance during animation. - (void)drawRect:(CGRect)rect { // Drawing code } */ @end
以上是关于iOSUICollectionView自己定义Layout之蜂窝布局的主要内容,如果未能解决你的问题,请参考以下文章
iOS UICollectionView:具有交替网格对齐的圆形视图的单元格
自己定义控件三部曲视图篇——FlowLayout自适应容器实现
Linux Bash 脚本:自己定义延迟代码块(裸数据保存方案)
css 自定义选择。第一部分是IE10。 En anteriores se sigue viendo la flecha propia del SO yyarestá。