写这篇文章的目的 一个原因是想把在开发中遇到的一些常见的问题通过文章的形式记录和保留 以后可以没事上来看看 一个原因是因为对TableView不能任意随我定制“深恶痛绝” 特意对CollectionView进行改造让他能被我为所欲为 甚至替代UITableView
代码地址 https://github.com/evernoteHW/UICollectionViewLayoutDemo/tree/master/UICollectionViewLayoutDemo
简单描述下我的思路 方便剁手党 特意贴出代码
1 利用Runtime机制扩展属性
创建UICollectionView 类目 Category 添加两个属性headerView和footerView
- (UIView *)hw_collectionHeaderView
{
return objc_getAssociatedObject(self, _cmd);
}
- (void)setHw_collectionHeaderView:(UIView *)hw_collectionHeaderView
{
[self.hw_collectionHeaderView removeFromSuperview];
objc_setAssociatedObject(self, @selector(hw_collectionHeaderView), hw_collectionHeaderView, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
[self addSubview:hw_collectionHeaderView];
[self.collectionViewLayout invalidateLayout];
}
- (UIView *)hw_collectionFooterView
{
return objc_getAssociatedObject(self, _cmd);
}
- (void)setHw_collectionFooterView:(UIView *)hw_collectionFooterView
{
[self.hw_collectionFooterView removeFromSuperview];
objc_setAssociatedObject(self, @selector(hw_collectionFooterView), hw_collectionFooterView, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
[self addSubview:hw_collectionFooterView];
[self.collectionViewLayout invalidateLayout];
}
2 子类化 SubClass UICollectionViewLayout
第一步 改写prepareLayout
第一小步 设定Item大小
for (NSInteger item = 0; item < itemCount; item++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:item inSection:section];
UICollectionViewLayoutAttributes *itemAttributes =
[UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
CGFloat item_x = self.itemInsets.left;
CGFloat item_y = top + itemHeight + self.itemInsets.top;
CGFloat item_width = self.itemSize.width - self.itemInsets.left - self.itemInsets.right;
CGFloat item_height = self.itemSize.height - self.itemInsets.top - self.itemInsets.bottom;
itemAttributes.frame = CGRectMake(item_x,item_y, item_width, item_height);
cellLayoutInfo[indexPath] = itemAttributes;
itemHeight += (self.itemSize.height);
}
第二小步 设定Header大小
NSIndexPath *headerIndexPath = [NSIndexPath indexPathForItem:0 inSection:section];
UICollectionViewLayoutAttributes *headerAttributes = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:HWCollectionElementKindSectionHeader withIndexPath:headerIndexPath];
CGFloat headerHeight = self.headerHeight;
if ([self.layoutDelegate respondsToSelector:@selector(collectionView:layout:referenceSizeForHeaderInSection:)]) {
headerHeight = [self.layoutDelegate collectionView:self.collectionView layout:self referenceSizeForHeaderInSection:section];
}
headerAttributes.frame = CGRectMake(0, top, self.itemSize.width, headerHeight);
headerLayoutInfo[headerIndexPath] = headerAttributes;
top += headerHeight;
第三小步 设定Footer大小
NSIndexPath *footerIndexPath = [NSIndexPath indexPathForItem:itemCount - 1 inSection:section];
UICollectionViewLayoutAttributes *footerAttributes = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:HWCollectionElementKindSectionFooter withIndexPath:footerIndexPath];
CGFloat footerHeight = self.footerHeight;
if ([self.layoutDelegate respondsToSelector:@selector(collectionView:layout:referenceSizeForHeaderInSection:)]) {
footerHeight = [self.layoutDelegate collectionView:self.collectionView layout:self referenceSizeForFooterInSection:section];
}
footerAttributes.frame = CGRectMake(0, top, self.itemSize.width, footerHeight);
footerLayoutInfo[footerIndexPath] = footerAttributes;
top += footerHeight;
第四小步 设定 装饰视图(用处:设定组与组的背景) 这个比较特殊或者分割线 比如类似这样的 组的背景可能是个图片可能组头视图和组所有的cell公用一个背景图 这个比较特殊
NSIndexPath *decorationIndexPath = [NSIndexPath indexPathForItem:0 inSection:section];
UICollectionViewLayoutAttributes *decorationAttributes = [UICollectionViewLayoutAttributes layoutAttributesForDecorationViewOfKind:HWCollectionElementKindSectionDecoration withIndexPath:decorationIndexPath];
CGFloat decorationHeight = CGRectGetMaxY(footerAttributes.frame) - CGRectGetMinY(headerAttributes.frame);
decorationAttributes.frame = CGRectMake(0, CGRectGetMinY(headerAttributes.frame), self.itemSize.width, decorationHeight);
decorationAttributes.zIndex = -1;
decorationLayoutInfo[decorationIndexPath] = decorationAttributes;
这里需要说明的是 zIndex = -1 总是处于最底端
第五小步 确定collectionHeaderView和collectionFooterView 位置
和普通的组头部不同 这个可以类似对比UITableView的tableHeaderView和tableFooterView 也很简单 如下
collectionHeaderView
CGFloat top = 0.0;
if (self.collectionView.hw_collectionHeaderView) {
top += self.collectionView.hw_collectionHeaderView.bounds.size.height;
}
CollectionFooterView
if (self.collectionView.hw_collectionFooterView) {
self.collectionView.hw_collectionFooterView.frame = CGRectMake(self.collectionView.hw_collectionFooterView.frame.origin.x, top , self.collectionView.hw_collectionFooterView.frame.size.width, self.collectionView.hw_collectionFooterView.frame.size.height)
;
top += self.collectionView.hw_collectionFooterView.bounds.size.height;
}
第六小步 将设定的大小全部存储起来
我和别人的比较特殊很多使用二位数组的方式 我是用字典 字典这样的存储方式的好处是我可以任意添加一个Kind类型 然后设置对于的Attribute大小 在任何地方加入都可以 最好存起来 还有一个好处是会在下面的 layoutAttributesForElementsInRect中体现出来
newLayoutInfo[HWLayoutItemCellKind] = cellLayoutInfo;
newLayoutInfo[HWLayoutHeaderKind] = headerLayoutInfo;
newLayoutInfo[HWLayoutFooterKind] = footerLayoutInfo;
newLayoutInfo[HWLayoutDecorationKind] = decorationLayoutInfo;
self.layoutInfo = newLayoutInfo;
第二步 确定在Rect范围内返回的Attribute数组
第二个好处是 这个方法是通用的不管你PrePareLayout方法怎么干 这些都一成不变的 这个方法的含义是在Rect范围内 意思是说 只是返回Recf范围内的Attribute数组 不是所有的 这个注意一下
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
NSMutableArray *allAttributes = [NSMutableArray arrayWithCapacity:self.layoutInfo.count];
[self.layoutInfo enumerateKeysAndObjectsUsingBlock:^(NSString *elementIdentifier,
NSDictionary *elementsInfo,
BOOL *stop) {
[elementsInfo enumerateKeysAndObjectsUsingBlock:^(NSIndexPath *indexPath,
UICollectionViewLayoutAttributes *attributes,
BOOL *innerStop) {
if (CGRectIntersectsRect(rect, attributes.frame)) {
[allAttributes addObject:attributes];
}
}];
}];
return allAttributes;
}
第三步 确定 collectionViewContentSize
之前设定的 第三个好处是 我再取得 collectionViewContentSize 取得最后一个Attribute 拿到 CGRectGetMaxY 如果有我之前通过类目方法扩展的collectionHeaderView 做一个判断即可
- (CGSize)collectionViewContentSize
{
NSInteger sectionCount = [self.collectionView numberOfSections];
if (sectionCount <= 0) return [super collectionViewContentSize];
NSInteger numberOfItemsInSection = [self.collectionView numberOfItemsInSection:sectionCount - 1];
UICollectionViewLayoutAttributes *footAttributes = nil;
NSDictionary *dic = self.layoutInfo[HWLayoutFooterKind];
if (dic.count > 0) {
footAttributes = self.layoutInfo[HWLayoutFooterKind][[NSIndexPath indexPathForRow:numberOfItemsInSection - 1 inSection:sectionCount - 1]];
}else{
footAttributes = self.layoutInfo[HWLayoutItemCellKind][[NSIndexPath indexPathForRow:numberOfItemsInSection - 1 inSection:sectionCount - 1]];
}
CGFloat height = CGRectGetMaxY(footAttributes.frame);
if (self.collectionView.hw_collectionFooterView) {
height += CGRectGetHeight(self.collectionView.hw_collectionFooterView.frame);
}
return CGSizeMake(self.collectionView.bounds.size.width, height);
}
第四步 设定Layout代理 改装外部可以控制
设定代理 代理方法如下 当如你如果是比如固定大小的可以通过设定诸如
@property (nonatomic) UIEdgeInsets itemInsets;
@property (nonatomic) CGSize itemSize;
@property (nonatomic) CGFloat interItemSpacingY;
@property (nonatomic) NSInteger numberOfColumns;
@property (nonatomic, assign) CGFloat headerHeight;
@property (nonatomic, assign) CGFloat footerHeight;
也可以通过设定代理随意定制
@protocol HWCollectionViewWaterfallLayoutDelegate
@optional
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(HWCollectionViewWaterfallLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(HWCollectionViewWaterfallLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(HWCollectionViewWaterfallLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
//组与组的最小距离
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(HWCollectionViewWaterfallLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
//组头高度
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(HWCollectionViewWaterfallLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;
//组尾高度
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(HWCollectionViewWaterfallLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;
@end
End ----
项目效果图
image.png
至此所有的工作都做完了
注意: 我这个只是针对TableView的仿造还没有对流式布局进行进一步处理 下一篇文章说明 如何定制 比如苹果自带浏览器图片等功能 有什么问题可以私信我或者在在下面评论 如果还不错给个Star吧