收集一些 Collection view 的效果 .集成到自己的Demo中.侵立删. 有帮助到大家的,记得 start 。 点start的人最帅了 ~
先理解UICollectionView 和 UICollectionViewLayout
UICollectionView 基础
UICollectionViewLayout 属性和方法
- 圆形布局
圆形布局Demo地址
实现要点:
- 确定一个中心点.一般都是collection view 的center
- 根据中心点得到每个item的位置. 根据半径*正弦和余弦分别得到y和x
/* 返回指定indexPath的item的布局信息 */
- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
/* 设置item的size */
attributes.size = CGSizeMake(ITEM_SIZE, ITEM_SIZE);
/* 设置item的中心点.根据半径*正弦和余弦分别得到y和x */
attributes.center = CGPointMake(_center.x + _radius * cosf(2 * indexPath.item * M_PI / _cellCount),
_center.y + _radius * sinf(2 * indexPath.item * M_PI / _cellCount));
return attributes;
}
- 水平分屏滑动
水平分屏滑动Demo地址
实现要点:
- 确定每页显示多少个,和一共分几页
- 得到每个item在每一页的位置，确保一页的数据不会超出屏幕
- 设置collection view 分屏显示
collection.pagingEnabled = YES
- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewLayoutAttributes *attributes = [super layoutAttributesForItemAtIndexPath:indexPath];
/* 第几页 */
NSUInteger curPage = indexPath.row / self.numberOfItemsInPage;
// 当前cell所在当页的index
NSUInteger curIndex = indexPath.row - curPage * self.numberOfItemsInPage;
// 当前cell所在当页的行
NSUInteger curColumn = curIndex % self.columnsInPage;
// 当前cell所在当页的列
NSUInteger curRow = curIndex / self.columnsInPage;
// 调整attributes（大小不变，位置改变）
CGRect rect = attributes.frame;
CGFloat point_x = self.collectionView.bounds.size.width * curPage + self.pageInset.left + curColumn * self.itemSize.width + curColumn * self.minimumLineSpacing;
CGFloat point_y = self.pageInset.top + curRow * self.itemSize.height + curRow * self.minimumInteritemSpacing;
attributes.frame = CGRectMake(point_x, point_y, rect.size.width, rect.size.height);
return attributes;
}
效果图
- 标签云
标签云Demo地址
实现要点:
- 初始化数据的时候得到item的宽度
- 在布局类中确定一行显示多少个和换行显示的问题.
- (nullable UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewLayoutAttributes *attributes = [super layoutAttributesForItemAtIndexPath:indexPath];
/** 得到item的size */
CGSize itemSize = [self.delegate collectionView:self.collectionView layout:self sizeForItemAtIndexPath:indexPath];
/** 得到下一个item的x */
nextOffset += (self.minimumInteritemSpacing + itemSize.width);
/** 换行 */
//当x轴减去item行间距大于 collection width - 内容右边距的时候换行,否则继续排列
if (nextOffset - self.minimumInteritemSpacing > self.collectionView.bounds.size.width - self.sectionInset.right)
{
xOffset = self.sectionInset.left;
nextOffset = (self.sectionInset.left + self.minimumInteritemSpacing + itemSize.width);
yOffset += (itemSize.height + self.minimumLineSpacing);
}else{
xOffset = nextOffset - (self.minimumInteritemSpacing + itemSize.width);
}
attributes.frame = CGRectMake(xOffset, yOffset, itemSize.width, itemSize.height);
/** 计算出collectionview 的可滑动高度(全屏就省略) */
_contentHeight = MAX(_contentHeight, CGRectGetMaxY(attributes.frame));
if (_cellCount == indexPath.item + 1) {
_contentHeight += self.sectionInset.bottom;
}
return attributes;
}
效果图
- 卡片吸顶布局
卡片吸顶布局Demo地址
实现要点:
- 行间距
minimumLineSpacing设置一个负数,实现下item依附在上item的效果 - 当item的y值小于顶部的y值时,就将item的y值等于顶部的y值.让item停留在顶部
- 层级关系.
attributes.zIndex
//获取悬停处的y值
CGFloat minY = CGRectGetMinY(self.collectionView.bounds) + self.collectionView.contentInset.top;
//拿到布局属性应该出现的位置
CGFloat finalY = MAX(minY, attributes.frame.origin.y);
CGPoint origin = attributes.frame.origin;
origin.y = finalY;
attributes.frame = (CGRect){origin, attributes.frame.size};
//根据IndexPath设置zIndex能确立顶部悬停的cell被后来的cell覆盖的层级关系
attributes.zIndex = attributes.indexPath.row;
效果图
- Header悬浮效果
Header悬浮效果Demo地址
主要实现代码:
//获取当前header的frame
CGRect rect = attributes.frame;
//当前的滑动距离 + 因为导航栏产生的偏移量，默认为64（如果app需求不同，需自己设置）
CGFloat offset = self.collectionView.contentOffset.y + _naviHeight;
//第一个cell的y值 - 当前header的高度 - 可能存在的sectionInset的top
CGFloat headerY = firstItemAttributes.frame.origin.y - rect.size.height - self.sectionInset.top;
//哪个大取哪个，保证header悬停
//针对当前header基本上都是offset更加大，针对下一个header则会是headerY大，各自处理
CGFloat maxY = MAX(offset,headerY);
//最后一个cell的y值 + 最后一个cell的高度 + 可能存在的sectionInset的bottom - 当前header的高度
//当当前section的footer或者下一个section的header接触到当前header的底部，计算出的headerMissingY即为有效值
CGFloat headerMissingY = CGRectGetMaxY(lastItemAttributes.frame) + self.sectionInset.bottom - rect.size.height;
//给rect的y赋新值，因为在最后消失的临界点要跟谁消失，所以取小
rect.origin.y = MIN(maxY,headerMissingY);
//给header的结构信息的frame重新赋值
attributes.frame = rect;
- UICollectionView 单选,多选
单选,多选Demo地址
实现要点:
我这里只是简单的实现了下功能
- model类中设置一个
isSelectedItem属性 - 点击cell或点击右上角图标时,改变
isSelectedItem的值.多选刷新当前的Item, 单选先把所有状态变成未选中,选中的变成选中状态
//多选点击
- (void)didSelectItemCellWithIndexPath:(NSIndexPath*)indexPath
{
RadioModel *model = self.dataSoure[indexPath.item];
model.isSelectedItem = !model.isSelectedItem;
[self.collectionView reloadItemsAtIndexPaths:@[indexPath]];
}
//单选点击
- (void)didRadioSelectItemWithIndexPath:(NSIndexPath*)indexPath
{
[self emptyAllSelectState];
RadioModel *model = self.dataSoure[indexPath.item];
model.isSelectedItem = YES;
[self.collectionView reloadData];
}
