网上的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

  1. //
  2. // HoneyCombLayout.h
  3. // Demo-Layouts
  4. //
  5. // Created by 杜子兮(duzixi) on 14-9-1.
  6. // Copyright (c) 2014年 lanou3g.com All rights reserved.
  7. //
  8.  
  9. #import <UIKit/UIKit.h>
  10.  
  11. @interface HoneyCombLayout : UICollectionViewLayout
  12.  
  13. @property (nonatomic, assign) NSInteger margin;
  14. @property (nonatomic, assign) NSInteger oX;
  15. @property (nonatomic, assign) NSInteger oY;
  16.  
  17. @end
  1. //
  2. // HoneyCombLayout.m
  3. // Demo-Layouts
  4. //
  5. // Created by 杜子兮(duzixi) on 14-9-1.
  6. // Copyright (c) 2014年 lanou3g.com All rights reserved.
  7. //
  8.  
  9. #import "HoneyCombLayout.h"
  10.  
  11. @implementation HoneyCombLayout
  12.  
  13. /// 返回内容大小。用于推断是否须要加快滑动
  14.  
  15. -(CGSize)collectionViewContentSize
  16. {
  17. float height = (SIZE + self.margin) * ([self.collectionView numberOfItemsInSection:0] / 4 + 1);
  18. return CGSizeMake(320, height);
  19. }
  20.  
  21. /// 返回YES,改变布局
  22. /*
  23. - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
  24. {
  25. return YES;
  26. }
  27. */
  28. #pragma mark - UICollectionViewLayout
  29. /// 为每个Item生成布局特性
  30. - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
  31. {
  32. UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
  33.  
  34. UICollectionView *collection = self.collectionView;
  35.  
  36. float x = (SIZE + self.margin) * (indexPath.item % COL + 1) * 0.75;
  37. float y = (SIZE + self.margin) * (indexPath.item / COL + 0.5) * cos(M_PI * 30.0f / 180.0f);
  38. if (indexPath.item % 2 == 1) {
  39. y += (SIZE + self.margin) * 0.5 * cosf(M_PI * 30.0f / 180.0f);
  40. }
  41.  
  42. x += self.oX;
  43. y += self.oY;
  44.  
  45. attributes.center = CGPointMake(x + collection.contentOffset.x, y + collection.contentOffset.y);
  46. attributes.size = CGSizeMake(SIZE, SIZE * cos(M_PI * 30.0f / 180.0f));
  47.  
  48. return attributes;
  49. }
  50.  
  51. -(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
  52. {
  53. NSArray *arr = [super layoutAttributesForElementsInRect:rect];
  54. if ([arr count] > 0) {
  55. return arr;
  56. }
  57. NSMutableArray *attributes = [NSMutableArray array];
  58. for (NSInteger i = 0 ; i < [self.collectionView numberOfItemsInSection:0 ]; i++) {
  59. NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
  60. [attributes addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
  61. }
  62. return attributes;
  63. }
  64.  
  65. @end

自己定义cell:

  1. //
  2. // HoneycombViewCell.h
  3. // Demo-Layouts
  4. //
  5. // Created by 杜子兮(duzixi) on 14-9-1.
  6. // Copyright (c) 2014年 lanou3g.com All rights reserved.
  7. //
  8.  
  9. #import <UIKit/UIKit.h>
  10.  
  11. @interface HoneycombViewCell : UICollectionViewCell
  12.  
  13. @property (nonatomic,strong) UILabel *titleLabel;
  14.  
  15. @end
  1. //
  2. // HoneycombViewCell.m
  3. // Demo-Layouts
  4. //
  5. // Created by 杜子兮(duzixi) on 14-9-1.
  6. // Copyright (c) 2014年 lanou3g.com All rights reserved.
  7. //
  8.  
  9. #import "HoneycombViewCell.h"
  10.  
  11. @implementation HoneycombViewCell
  12.  
  13. - (id)initWithFrame:(CGRect)frame
  14. {
  15. self = [super initWithFrame:frame];
  16. if (self) {
  17. // Initialization code
  18. self.titleLabel = [[UILabel alloc] init];
  19. self.titleLabel.textColor = [UIColor whiteColor];
  20. [self.contentView addSubview:self.titleLabel];
  21. }
  22. return self;
  23. }
  24.  
  25. -(void)layoutSubviews
  26. {
  27. [super layoutSubviews];
  28. // step 1: 生成六边形路径
  29. CGFloat longSide = SIZE * 0.5 * cosf(M_PI * 30 / 180);
  30. CGFloat shortSide = SIZE * 0.5 * sin(M_PI * 30 / 180);
  31. UIBezierPath *path = [UIBezierPath bezierPath];
  32. [path moveToPoint:CGPointMake(0, longSide)];
  33. [path addLineToPoint:CGPointMake(shortSide, 0)];
  34. [path addLineToPoint:CGPointMake(shortSide + SIZE * 0.5, 0)];
  35. [path addLineToPoint:CGPointMake(SIZE, longSide)];
  36. [path addLineToPoint:CGPointMake(shortSide + SIZE * 0.5, longSide * 2)];
  37. [path addLineToPoint:CGPointMake(shortSide, longSide * 2)];
  38. [path closePath];
  39.  
  40. // step 2: 依据路径生成蒙板
  41. CAShapeLayer *maskLayer = [CAShapeLayer layer];
  42. maskLayer.path = [path CGPath];
  43.  
  44. // step 3: 给cell加入模版
  45. self.layer.mask = maskLayer;
  46.  
  47. self.backgroundColor = [UIColor orangeColor];
  48. self.titleLabel.textAlignment = NSTextAlignmentCenter;
  49. self.titleLabel.frame = self.contentView.frame;
  50.  
  51. }
  52.  
  53. /*
  54. // Only override drawRect: if you perform custom drawing.
  55. // An empty implementation adversely affects performance during animation.
  56. - (void)drawRect:(CGRect)rect
  57. {
  58. // Drawing code
  59. }
  60. */
  61.  
  62. @end

【iOS】UICollectionView自己定义Layout之蜂窝布局的更多相关文章

  1. iOS开发之蜂窝布局—Swift

    前言 最近项目中用到了类似蜂窝的六边形布局,在这里分享出来抛砖引玉,供大家参考学习.本文提供了2种思路实现效果,第一种方式使用UICollectionView实现,第二种方式使用UIScrollVie ...

  2. iOS UICollectionView(转二)

    UICollectionView的布局是可以自己定义的,在这篇博客中先在上篇博客的基础上进行扩充,我们先使用UICollectionViewFlowLayout,然后好好的介绍一下UICollecti ...

  3. Auto Layout之创建布局约束

    上篇文章给大家介绍了AutoLayout 的由来及OC中关于AutoLayout 的类.这篇文章将向大家介绍,在iOS 编程中怎样使用Auto Layout 构建布局约束. 创建布局约束 创建布局约束 ...

  4. android 分区layout以及虚拟内存布局-小结

    摘要 简述启动过程的内存分配,各个映像的烧写,加载,logo的刷新,文件系统mount. DRAM:外部RAM: ISRAM:内部RAM(128K),(PL会跑在ISRAM里面,去初始化DRAM,lo ...

  5. Android自己定义之流式布局

    流式布局,优点就是父类布局能够自己主动的推断子孩子是不是须要换行,什么时候须要换行,能够做到网页版的标签的效果. 今天就是简单的做了自己定义的流式布局. 详细效果: 原理: 事实上非常easy,Mea ...

  6. ios UICollectionView reloadData无法更新的奇怪问题。

    报错    Assertion failure in -[UICollectionViewData invalidateItemsAtIndexPaths:] 近来偶尔用到UICollectionVi ...

  7. Android Studio分类整理res/Layout中的布局文件(创建子目录)

    res/layout中的布局文件太杂,没有层次感,受不了的我治好想办法解决这个问题. 前几天看博客说可以使用插件分组,可惜我没找到.知道看到另一篇博客时,才知道这个方法不能用了. 不能用插件,那就手动 ...

  8. Best Practices for Performance_3.Improving Layout Performance 优化布局

    http://developer.android.com/training/improving-layouts/index.html 1. 优化布局层次 1)  每增加一个View或者布局,都会增加额 ...

  9. IOS UICollectionView基础+UICollectionViewFlowLayout基础

    UICollectionView在众多控件中也算是比较常用的了,像淘宝在浏览宝贝时采用的就是UICollectionView,对于UICollectionView->UICollectionVi ...

随机推荐

  1. Android适屏

    总结一下自己的适屏经验,仅仅希望自己不断进步,不断完好,假设有热心肠的"前辈"指导一下,不胜感激! Android5.0已经出来了,说是这个版本号对Android屏幕适配做了非常多 ...

  2. 利用反射api查找一个类的具体信息

    讲到这个实例,首先介绍下本人,我是一个php程序猿.从事drupal开发2年多.能够说从实习開始就接触这个,至今没有换过.drupal给我的感觉是俩字"强大",今天写一个views ...

  3. @Autowired 凝视遇到的问题,@Qualifier 帮助解决这个问题

    当候选 Bean 数目不为 1 时的应对方法 在默认情况下使用 @Autowired 凝视进行自己主动注入时,Spring 容器中匹配的候选 Bean 数目必须有且仅有一个. 当找不到一个匹配的 Be ...

  4. 【Java集合源代码剖析】LinkedList源代码剖析

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/35787253 您好.我正在參加CSDN博文大赛.假设您喜欢我的文章,希望您能帮我投一票,谢 ...

  5. angularjs1-3,工具方法,bootstrap,多个module,引入jquery

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 20.QT文本文件读写

    #include "mainwindow.h" #include "ui_mainwindow.h" #include <QFile> #inclu ...

  7. BZOJ 2821 分块+二分

    题意: N个数,M组询问,每次问[l,r]中有多少个数出现正偶数次. 思路: 把N个数分成sqrt(n)块,预处理d[i][j]表示第i块起点到第j块末尾的答案 枚举起点i,并维护一个数组记录每个数到 ...

  8. C++ MAP使用

    1. map的构造函数map<int,string> maphai;map<char,int> maphai;map<string,char> mapstring; ...

  9. Repeater控件使用小结持续更新

    Repeater嵌套Repeater绑定数据 前台代码 <!--注意层级关系不要写错了--> <asp:Repeater ID="rpGroup" runat=& ...

  10. vue中使用UEditor编辑器 -- 2

    1:下载ueditor下来,放在vue项目中的static文件夹下   2:创建ueditor编辑界面 3:椰~~~~~此时已经可以使用了 但是你会发现   (黑人脸)what the fuck??? ...