博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【iOS】UICollectionView自己定义Layout之蜂窝布局
阅读量:5024 次
发布时间:2019-06-12

本文共 4343 字,大约阅读时间需要 14 分钟。

网上的UICollectionView的Layout布局,其cell的形状多为矩形和圆形。

本篇博文将正六边形作为cell的基本形状,为您展现独特的蜂窝布局效果及实现源代码。

帮助您让自己的App脱颖而出,更加与众不同。

最新完整代码下载地址:

博文首发地址:

实现效果图:

核心源码:

自己定义Layout

////  HoneyCombLayout.h//  Demo-Layouts////  Created by 杜子兮(duzixi) on 14-9-1.//  Copyright (c) 2014年 lanou3g.com All rights reserved.//#import 
@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 
@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

转载于:https://www.cnblogs.com/brucemengbm/p/6915125.html

你可能感兴趣的文章
jQuery技巧大放送
查看>>
字符串转换成JSON的三种方式
查看>>
Hive时间函数笔记
查看>>
clojure-emacs-autocomplete
查看>>
一个自己写的判断2个相同对象的属性值差异的工具类
查看>>
10 华电内部文档搜索系统 search03
查看>>
[HIHO1149]回文字符序列(dp)
查看>>
[HDU1402]A * B Problem Plus(FFT)
查看>>
[CF803C] Maximal GCD(gcd,贪心,构造)
查看>>
逆时针旋转的矩阵变换
查看>>
第10周15/16/17
查看>>
【数据库】SQL两表之间:根据一个表的字段更新另一个表的字段
查看>>
四六级作文常见错误解析(转载)
查看>>
Tomcat
查看>>
./是当前目录 ../是当前的上一级目录。上上级就是../../一般绝对路径时候常用...
查看>>
linux支持FTP和SFTP服务【1】
查看>>
树的递归与非递归遍历方法
查看>>
每天一个Linux命令(6):rmdir命令
查看>>
oracle连接的三个配置文件(转)
查看>>
Vim配置文件(Vimrc)
查看>>