美文网首页
自定义UICollectionViewLayout-瀑布流效果、

自定义UICollectionViewLayout-瀑布流效果、

作者: 綪天de汰陽 | 来源:发表于2019-06-17 17:22 被阅读0次

    XCCollectionViewLayout

    UICollectionView瀑布流效果、仿射放大、滚动放大效果,支持水平、垂直滚动

    all.gif

    使用pod导入文件或下载解压后将XCollectionViewLayout文件夹导入项目中

    pod 'XCollectionViewLayout'

    导入头文件
    //瀑布流样式 UICollectionViewLayout
    #import "XCWaterCollectionViewLayout.h"
    
    //滑动放大、仿射放大样式 UICollectionViewLayout
    #import "XCollectionViewLayout.h"
    
    
    滚动方向 效果图
    滚动仿射放大效果 affine.gif
    滚动放大效果 lineLayout.gif
    垂直滚动 vertical.gif
    水平滚动 horizontal.gif

    导入XCollectionViewLayout.h

    XCollectionViewLayout属性及代理

    typedef NS_ENUM(NSInteger,XCollectionViewLayoutTransformStyle){
    XCollectionViewLayout_LinerTransform,//线性放大
    XCollectionViewLayout_AffineTranform,//仿射旋转放大
    };
    
    //滚动放大模式(只支持横向滚动)
    @interface XCollectionViewLayout : UICollectionViewFlowLayout
    
    @property (nonatomic) XCollectionViewLayoutTransformStyle transformStyle;
    @property (nonatomic) CGFloat                             scaleCoefficient;//缩小系数,default 0.8,建议0.6~0.8
    
    @end
    

    滚动仿射放大效果

    XCollectionViewLayout *layout = [[XCollectionViewLayout alloc] init];
    layout.transformStyle = XCollectionViewLayout_AffineTranform;
    _collectView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
    _collectView.backgroundColor = [UIColor whiteColor];
    _collectView.delegate = self;
    _collectView.dataSource = self;
    [_collectView registerNib:[UINib nibWithNibName:@"LayoutControlCell" bundle:nil] forCellWithReuseIdentifier:NSStringFromClass([LayoutControlCell class])];
    [self.view addSubview:_collectView];
    

    滚动放大效果

    XCollectionViewLayout *layout = [[XCollectionViewLayout alloc] init];
    layout.transformStyle = XCollectionViewLayout_LinerTransform;
    _collectView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
    _collectView.backgroundColor = [UIColor whiteColor];
    _collectView.delegate = self;
    _collectView.dataSource = self;
    [_collectView registerNib:[UINib nibWithNibName:@"LayoutControlCell" bundle:nil] forCellWithReuseIdentifier:NSStringFromClass([LayoutControlCell class])];
    [self.view addSubview:_collectView];
    

    瀑布流效果

    导入XCWaterCollectionViewLayout.h

    XCTransformFlowLayout *layout = [[XCTransformFlowLayout alloc] init];
    _collectView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
    _collectView.backgroundColor = [UIColor lightGrayColor];
    _collectView.delegate = self;
    _collectView.dataSource = self;
    [_collectView registerNib:[UINib nibWithNibName:@"LayoutControlCell" bundle:nil] forCellWithReuseIdentifier:NSStringFromClass([LayoutControlCell class])];
        [self.view addSubview:_collectView];
    
    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    return CGSizeMake(CGRectGetWidth(collectionView.frame) * 0.7, CGRectGetHeight(collectionView.frame) * 0.2);
    }
    - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(CGRectGetHeight(collectionView.frame) * 0.4, 0, CGRectGetHeight(collectionView.frame) * 0.4, 0);
    }
    
    - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
    }
    
    - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 20;
    }
    
    - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    LayoutControlCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([LayoutControlCell class]) forIndexPath:indexPath];
    cell.numlabel.text = [NSString stringWithFormat:@"%ld",(long)indexPath.item];
    
    return cell;
    }
    

    XCWaterCollectionViewLayout属性及代理

    
    @protocol XCWaterCollectionViewLayoutDelegate <NSObject>
    
    /** 列数 */
    - (NSInteger)itemColumns;
    
    /** item与item之间 水平间距 */
    - (CGFloat)itemSpaceAtSectioin:(NSInteger)section;
    
    /** item与item之间 垂直间距 */
    - (CGFloat)itemLineSpaceAtSection:(NSInteger)section;
    
    - (UIEdgeInsets)sectionInsetsAtSection:(NSInteger)section;
    
    /** item 高度,XCWaterCollectionViewScrollDirectionVertical模式下返回item宽度 */
    - (CGFloat)itemHeightAtIndexPath:(NSIndexPath *)indexPath;
    
    /** header view */
    - (CGSize)headerViewSizeAtSection:(NSInteger)section;
    
    /** footer view */
    - (CGSize)footerViewSizeAtSection:(NSInteger)section;
    
    
    @end
    
    @interface XCWaterCollectionViewLayout : UICollectionViewLayout
    
    @property (nonatomic) NSInteger itemColumns;/**< default 2 */
    @property (nonatomic) CGFloat itemSpace;/**< itemSpaceAtSectioin: */
    @property (nonatomic) CGFloat lineSpace;/**< itemLineSpaceAtSection: */
    @property (nonatomic) CGSize  headerViewSize;/**< headerViewSizeAtSection: */
    @property (nonatomic) CGSize  footerSize;/**< footerViewSizeAtSection: */
    @property (nonatomic) UIEdgeInsets sectioinInsets;/**< sectionInsetsAtSection: */
    @property (nonatomic) CGFloat itemWidthOrHeight;/**< itemHeightAtIndexPath */
    
    @property (nonatomic) XCWaterCollectionViewScrollDirection scrollDirection;//default XCWaterCollectionViewScrollDirectionVertical
    
    @end
    
    

    下载地址XCCollectionViewLayout

    相关文章

      网友评论

          本文标题:自定义UICollectionViewLayout-瀑布流效果、

          本文链接:https://www.haomeiwen.com/subject/iulzfctx.html