IOS-—UICollectionView使用综述（二 ）（基础篇--画廊展示图片，瀑布流展示图片）

效果图 ：

画廊：

瀑布流：

 

1、画廊

1.1 简述

这里是通过纯代码的方式进行添加操作

1.2 创建设置uicollectionview

 

#import "viewcontroller.h"
#import "appcell.h"
#import "appflowlayout.h"

@interface viewcontroller ()

@end
//重用标识符
static nsstring *identifier = @"cell";

@implementation viewcontroller

- (void)viewdidload {
    [super viewdidload];

    //实例化一个自定义flowlayout
    appflowlayout *flowlayout = [[appflowlayout alloc]init];
    
    //实例化创建一个collectionview
    uicollectionview *collectionview = [[uicollectionview alloc]initwithframe:cgrectmake(0
, 200, 375, 300) collectionviewlayout:flowlayout];

    //设置数据源代理
    collectionview.datasource = self;
    
    
    //注册cell

    [collectionview registerclass:[appcell class] forcellwithreuseidentifier:identifier];
    
    //添加到控制器上
    [self.view addsubview:collectionview];
}



//组
-(nsinteger)numberofsectionsincollectionview:(uicollectionview *)collectionview{
    return 1;
}
//行
-(nsinteger)collectionview:(uicollectionview *)collectionview numberofitemsinsection:(nsinteger)section{
    return 10;
}
//内容
-(uicollectionviewcell *)collectionview:(uicollectionview *)collectionview cellforitematindexpath:(nsindexpath *)indexpath{
    appcell *collection =[collectionview dequeuereusablecellwithreuseidentifier:identifier forindexpath:indexpath];
    
    return collection;
}

@end

 

1.3 自定义cell

appcell.h

 

#import 

@interface appcell : uicollectionviewcell

@end

 

appcell.m

 

#import "appcell.h"

@implementation appcell

-(instancetype)initwithframe:(cgrect)frame{
    if (self =[super initwithframe:frame]) {
        //初始化创建uiimageview
        uiimageview *imageview =[[uiimageview alloc]initwithframe:self.contentview.bounds];
        //设置默认图片
        imageview.image = [uiimage imagenamed:@"aqs"];
        [self.contentview addsubview:imageview];
        
    }
    return self;
} 
@end

 

 

1.4 自定义流式布局

appflowlayout.h

 

#import 

@interface appflowlayout : uicollectionviewflowlayout

@end

 

appflowlayout.m

#import "appflowlayout.h"

@implementation photoflowlayout

//在这个方法中，uicollectionview还没有实例化，所以取不到其对应的frame
-(instancetype)init{
    if (self == [super init]) {
       
    }
    return self;
}
//当布局刷新的时候会自动调用这个方法
-(void)preparelayout{
    [super preparelayout];
    //修改滚动方向 为水平方向来滚动
    self.scrolldirection = uicollectionviewscrolldirectionhorizontal;
    //获取对应uicollectionview的size
    cgsize collectionsize = self.collectionview.frame.size;
    
    //定义显示item的 宽 高
    cgfloat itemwidth = collectionsize.height*0.6;
    cgfloat itemheight = collectionsize.height*0.8;
    
    //修改item大小
    self.itemsize = cgsizemake(itemwidth, itemheight);

    //设置头部和尾部的初始间距
    cgfloat topmargin = collectionsize.width/2-itemwidth/2;
    self.sectioninset = uiedgeinsetsmake(0, topmargin, 0, topmargin);

}

//返回所的有的item对应的属性设置
-(nsarray *)layoutattributesforelementsinrect:(cgrect)rect{
    //取出所有的item对应的属性
    nsarray *superattributesarray = [super layoutattributesforelementsinrect:rect];
    
    //计算中心点
    cgfloat screencenter = self.collectionview.contentoffset.x+self.collectionview.frame.size.width/2;
    //循环设置item 的属性
    
    for (uicollectionviewlayoutattributes  *attributes in superattributesarray) {
        //计算 差值
        cgfloat deltamargin = abs(screencenter - attributes.center.x);
        //计算放大比例
        cgfloat scale = 1 - deltamargin/(self.collectionview.frame.size.width/2+attributes.size.width);
        //设置
        attributes.transform = cgaffinetransformmakescale(scale, scale);
    }
    return superattributesarray;
}

//当手指离开屏幕时会调用此方法
-(cgpoint)targetcontentoffsetforproposedcontentoffset:(cgpoint)proposedcontentoffset withscrollingvelocity:(cgpoint)velocity{
    //取出屏幕的中心点
    cgfloat screencenter = proposedcontentoffset.x +self.collectionview.frame.size.width/2;
    //取出可见范围内的cell
    cgrect visiblerect = cgrectzero;
    visiblerect.size = self.collectionview.frame.size;
    visiblerect.origin = proposedcontentoffset;
    
    nsarray *visiblearray = [super layoutattributesforelementsinrect:visiblerect];
    
    cgfloat minmargin = maxfloat;
    
    for (uicollectionviewlayoutattributes *attributes in visiblearray) {
        cgfloat deltamargin = attributes.center.x -screencenter;
        if (abs(minmargin)>abs(deltamargin)) {
            minmargin = deltamargin;
        }
    }
    return cgpointmake(proposedcontentoffset.x+ minmargin, proposedcontentoffset.y);
}

//当屏幕的可见范围发生变化 的时候
//重新刷新视图
-(bool)shouldinvalidatelayoutforboundschange:(cgrect)newbounds{
    return yes;
}
@end