UICollectionViewLayout 示列

2017-05-24 本文已影响255人态度哥

收集一些 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];
   }

UICollectionViewLayout 示列

实现要点:

实现要点:

实现要点:

实现要点:

主要实现代码:

实现要点:

--------- 以上是自己收集的一些效果,侵立删. 有不对的地方望指正 -------

猜你喜欢

热点阅读