【iOS】UICollectionView自己定义Layout之蜂窝布局
网上的UICollectionView的Layout布局,其cell的形状多为矩形和圆形。
本篇博文将正六边形作为cell的基本形状,为您展现独特的蜂窝布局效果及实现源代码。
帮助您让自己的App脱颖而出,更加与众不同。
最新完整代码下载地址:https://github.com/duzixi/Varied-Layouts
博文首发地址:http://blog.csdn.net/duzixi
实现效果图:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZHV6aXhp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" height="300" alt="">
核心源码:
自己定义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
【iOS】UICollectionView自己定义Layout之蜂窝布局的更多相关文章
- iOS开发之蜂窝布局—Swift
前言 最近项目中用到了类似蜂窝的六边形布局,在这里分享出来抛砖引玉,供大家参考学习.本文提供了2种思路实现效果,第一种方式使用UICollectionView实现,第二种方式使用UIScrollVie ...
- iOS UICollectionView(转二)
UICollectionView的布局是可以自己定义的,在这篇博客中先在上篇博客的基础上进行扩充,我们先使用UICollectionViewFlowLayout,然后好好的介绍一下UICollecti ...
- Auto Layout之创建布局约束
上篇文章给大家介绍了AutoLayout 的由来及OC中关于AutoLayout 的类.这篇文章将向大家介绍,在iOS 编程中怎样使用Auto Layout 构建布局约束. 创建布局约束 创建布局约束 ...
- android 分区layout以及虚拟内存布局-小结
摘要 简述启动过程的内存分配,各个映像的烧写,加载,logo的刷新,文件系统mount. DRAM:外部RAM: ISRAM:内部RAM(128K),(PL会跑在ISRAM里面,去初始化DRAM,lo ...
- Android自己定义之流式布局
流式布局,优点就是父类布局能够自己主动的推断子孩子是不是须要换行,什么时候须要换行,能够做到网页版的标签的效果. 今天就是简单的做了自己定义的流式布局. 详细效果: 原理: 事实上非常easy,Mea ...
- ios UICollectionView reloadData无法更新的奇怪问题。
报错 Assertion failure in -[UICollectionViewData invalidateItemsAtIndexPaths:] 近来偶尔用到UICollectionVi ...
- Android Studio分类整理res/Layout中的布局文件(创建子目录)
res/layout中的布局文件太杂,没有层次感,受不了的我治好想办法解决这个问题. 前几天看博客说可以使用插件分组,可惜我没找到.知道看到另一篇博客时,才知道这个方法不能用了. 不能用插件,那就手动 ...
- Best Practices for Performance_3.Improving Layout Performance 优化布局
http://developer.android.com/training/improving-layouts/index.html 1. 优化布局层次 1) 每增加一个View或者布局,都会增加额 ...
- IOS UICollectionView基础+UICollectionViewFlowLayout基础
UICollectionView在众多控件中也算是比较常用的了,像淘宝在浏览宝贝时采用的就是UICollectionView,对于UICollectionView->UICollectionVi ...
随机推荐
- Android适屏
总结一下自己的适屏经验,仅仅希望自己不断进步,不断完好,假设有热心肠的"前辈"指导一下,不胜感激! Android5.0已经出来了,说是这个版本号对Android屏幕适配做了非常多 ...
- 利用反射api查找一个类的具体信息
讲到这个实例,首先介绍下本人,我是一个php程序猿.从事drupal开发2年多.能够说从实习開始就接触这个,至今没有换过.drupal给我的感觉是俩字"强大",今天写一个views ...
- @Autowired 凝视遇到的问题,@Qualifier 帮助解决这个问题
当候选 Bean 数目不为 1 时的应对方法 在默认情况下使用 @Autowired 凝视进行自己主动注入时,Spring 容器中匹配的候选 Bean 数目必须有且仅有一个. 当找不到一个匹配的 Be ...
- 【Java集合源代码剖析】LinkedList源代码剖析
转载请注明出处:http://blog.csdn.net/ns_code/article/details/35787253 您好.我正在參加CSDN博文大赛.假设您喜欢我的文章,希望您能帮我投一票,谢 ...
- angularjs1-3,工具方法,bootstrap,多个module,引入jquery
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 20.QT文本文件读写
#include "mainwindow.h" #include "ui_mainwindow.h" #include <QFile> #inclu ...
- BZOJ 2821 分块+二分
题意: N个数,M组询问,每次问[l,r]中有多少个数出现正偶数次. 思路: 把N个数分成sqrt(n)块,预处理d[i][j]表示第i块起点到第j块末尾的答案 枚举起点i,并维护一个数组记录每个数到 ...
- C++ MAP使用
1. map的构造函数map<int,string> maphai;map<char,int> maphai;map<string,char> mapstring; ...
- Repeater控件使用小结持续更新
Repeater嵌套Repeater绑定数据 前台代码 <!--注意层级关系不要写错了--> <asp:Repeater ID="rpGroup" runat=& ...
- vue中使用UEditor编辑器 -- 2
1:下载ueditor下来,放在vue项目中的static文件夹下 2:创建ueditor编辑界面 3:椰~~~~~此时已经可以使用了 但是你会发现 (黑人脸)what the fuck??? ...