相信了解UICollectionView的也一定听过瀑布流吧,开始之前先提供两个瀑布流,有时间的可以深入研究研究

https://github.com/dingpuyu/WaterFall

https://github.com/zhangsuya/SYStickHeaderWaterFall

这两个瀑布流都非常好。其中第二个工程使用了CocoaPods,注意:使用 .xcworkspace文件来打开工程,而不是使用以前的.xcodeproj文件;有些人可能不太了解,再给大家一个介绍CocoaPods的链接供大家参考:http://www.jianshu.com/p/6e5c0f78200a

直接上代码吧,里面有注释,工程效果图:

文件目录:

思路步骤:

1.创建RootViewController,将RootViewController作为Window的根视图:代码的实现在AppDelegate.m中

self.window  = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
   
UINavigationController *rootNav = [[UINavigationController alloc]
initWithRootViewController:[[RootViewController alloc] init]];
    self.window.rootViewController = rootNav;

2.创建视图RootView替换RootViewController自带的view:在RootViewController.m中实现

- (void)loadView {
    self.rootView = [[RootView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.view = self.rootView;
}

3.创建自定义cell。

各文件的具体代码如下:

RootViewController.h

#import "RootViewController.h"
#import "RootView.h"
#import "RootCell.h"
#import "HeaderReusableView.h"
#import "SecondViewController.h"

@interface RootViewController ()<UICollectionViewDataSource, UICollectionViewDelegate>//要遵循的代理

@property (nonatomic, strong) RootView *rootView;

@end

@implementation RootViewController
//定义全局的重用标识符
static NSString *const identifier_cell = @"identifier_cell";

- (void)loadView {
    
    self.rootView = [[RootView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.view = self.rootView;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    //设置代理
    self.rootView.collectionView.delegate = self;
    self.rootView.collectionView.dataSource = self;
    //第一步:注册cell
    [self.rootView.collectionView registerClass:[RootCell class] forCellWithReuseIdentifier:identifier_cell];
    
    //注册头视图
//   
[self.rootView.collectionView registerClass:[UICollectionReusableView
class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader
withReuseIdentifier:@"headerView"];
    
    //注册尾视图
   
[self.rootView.collectionView registerClass:[UICollectionReusableView
class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter
withReuseIdentifier:@"footerView"];
    
    //注册自定义头视图
   
[self.rootView.collectionView registerClass:[HeaderReusableView class]
forSupplementaryViewOfKind:UICollectionElementKindSectionHeader
withReuseIdentifier:@"headerView"];
    
}

#pragma mark UICollectionViewDataSource Method------------
//设置多少个分区
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 4;
}

//设置每个分区里面有几个item(必须实现)
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 5;
    
}

//返回每个item的cell对象(必须实现)

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    //第二步:重用cell
    RootCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier_cell forIndexPath:indexPath];
    cell.backgroundColor = [UIColor orangeColor];
    
    switch (indexPath.section) {
        case 0:{
            cell.photoImage.image = [UIImage imageNamed:@"22"];
            return cell;
        }
        case 1:{
            cell.photoImage.image = [UIImage imageNamed:@"5"];
            return cell;
        }
            
    }
    cell.photoImage.image = [UIImage imageNamed:@"33"];
    return cell;
    
}

//返回头视图和尾视图
-
(UICollectionReusableView *)collectionView:(UICollectionView
*)collectionView viewForSupplementaryElementOfKind:(NSString *)kind
atIndexPath:(NSIndexPath *)indexPath {
    //判断是头视图还是尾视图
    //头视图
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
      
HeaderReusableView *headerView = [collectionView
dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader
withReuseIdentifier:@"headerView" forIndexPath:indexPath];
        //headerView.backgroundColor = [UIColor redColor];
        headerView.headerLabel.text = @"海贼王";
        return headerView;
    }
    //尾视图
    if ([kind isEqualToString:UICollectionElementKindSectionFooter]) {
       
UICollectionReusableView *footerView = [collectionView
dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter
withReuseIdentifier:@"footerView" forIndexPath:indexPath];
        footerView.backgroundColor = [UIColor whiteColor];
        return footerView;
    }
    return nil;
}

//点击Item实现跳转
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    
    SecondViewController *secondVC = [[SecondViewController alloc] init];
    [self.navigationController pushViewController:secondVC animated:YES];
}

@end

RootView.h

@interface RootView : UIView
//声明集合视图属性
@property (nonatomic, strong) UICollectionView *collectionView;
//专门给cllectionView布局的(必须有)
@property (nonatomic, strong) UICollectionViewFlowLayout *myFlowLayout;

@end

RootView.m

#import "RootView.h"

@implementation RootView

-(instancetype)initWithFrame:(CGRect)frame {
    
    self = [super initWithFrame:frame];
    if (self) {
        //初始化布局
        [self initLayout];
    }
    
    return self;
}
//初始化布局
- (void)initLayout {
    //1.定义collectionView的样式
    self.myFlowLayout = [[UICollectionViewFlowLayout alloc] init];
    //设置属性
    //给定item的大小
    self.myFlowLayout.itemSize = CGSizeMake((self.bounds.size.width - 40.1) / 3, (self.bounds.size.width - 40.1) / 3);
    //垂直滚动的间隙:任意两个item的最小间隙
    self.myFlowLayout.minimumInteritemSpacing = 10;
    //水平滚动的间隙:任意两个item的最小间隙
    self.myFlowLayout.minimumLineSpacing = 10;
    //设置滚动方向
    self.myFlowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;//垂直方向
    //设置视图的内边距(上左下右)
    self.myFlowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
    //指定头视图的尺寸
    self.myFlowLayout.headerReferenceSize = CGSizeMake(100, 100);//默认是屏幕的宽度,高度自己设定
    //指定尾视图的尺寸
    self.myFlowLayout.footerReferenceSize = CGSizeMake(100, 10);//默认是屏幕的宽度,高度自己设定

//2.布局collectionView
    //创建对象并指定样式
    self.collectionView = [[UICollectionView alloc] initWithFrame:self.bounds collectionViewLayout:self.myFlowLayout];
    self.collectionView.backgroundColor = [UIColor greenColor];
    //添加到父视图
    [self addSubview:self.collectionView];
}

@end
RootCell.h

#import <UIKit/UIKit.h>

@interface RootCell : UICollectionViewCell
//声明imageView的子控件
@property (nonatomic, strong) UIImageView *photoImage;

@end

RootCell.m

#import "RootCell.h"

@implementation RootCell

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self initLayout];
    }
    return self;
}
//布局子视图
- (void)initLayout {
    self.photoImage = [[UIImageView alloc] initWithFrame:self.bounds];
    [self.contentView addSubview:self.photoImage];
    
}

@end

上面只是UICollectionView的一点基础操作,内容比较简单,但都是一些最基本的属性、方法的应用,至于复杂的功能实现,网络上有好
多,根据自己的需求下载demo进行参考:最后再提供一个酷炫demo的链接:https://github.com/panghaijiao
/HJCarouselDemo

UICollectionView基础学习的更多相关文章

  1. salesforce 零基础学习(五十二)Trigger使用篇(二)

    第十七篇的Trigger用法为通过Handler方式实现Trigger的封装,此种好处是一个Handler对应一个sObject,使本该在Trigger中写的代码分到Handler中,代码更加清晰. ...

  2. 如何从零基础学习VR

    转载请声明转载地址:http://www.cnblogs.com/Rodolfo/,违者必究. 近期很多搞技术的朋友问我,如何步入VR的圈子?如何从零基础系统性的学习VR技术? 本人将于2017年1月 ...

  3. IOS基础学习-2: UIButton

    IOS基础学习-2: UIButton   UIButton是一个标准的UIControl控件,UIKit提供了一组控件:UISwitch开关.UIButton按钮.UISegmentedContro ...

  4. HTML5零基础学习Web前端需要知道哪些?

    HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...

  5. python入门到精通[三]:基础学习(2)

    摘要:Python基础学习:列表.元组.字典.函数.序列化.正则.模块. 上一节学习了字符串.流程控制.文件及目录操作,这节介绍下列表.元组.字典.函数.序列化.正则.模块. 1.列表 python中 ...

  6. python入门到精通[二]:基础学习(1)

    摘要:Python基础学习: 注释.字符串操作.用户交互.流程控制.导入模块.文件操作.目录操作. 上一节讲了分别在windows下和linux下的环境配置,这节以linux为例学习基本语法.代码部分 ...

  7. CSS零基础学习笔记.

    酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...

  8. Yaf零基础学习总结5-Yaf类的自动加载

    Yaf零基础学习总结5-Yaf类的自动加载 框架的一个重要功能就是类的自动加载了,在第一个demo的时候我们就约定自己的项目的目录结构,框架就基于这个目录结构来自动加载需要的类文件. Yaf在自启动的 ...

  9. Yaf零基础学习总结4-Yaf的配置文件

    在上一节的hello yaf当中我们已经接触过了yaf的配置文件了, Yaf和用户共用一个配置空间, 也就是在Yaf_Application初始化时刻给出的配置文件中的配置. 作为区别, Yaf的配置 ...

随机推荐

  1. Nginx安装配置PHP(FastCGI)环境的教程

    这篇是Nginx安装配置PHP(FastCGI)环境的教程.Nginx不支持对外部程序的直接调用或者解析,所有的外部程序(包括PHP)必须通过FastCGI接口来调用. 一.什么是 FastCGI F ...

  2. GNU所有软件下载,其中最有意思的是octave

    http://ftp.gnu.org/gnu/ 最有意思的是octave:https://www.gnu.org/software/octave/http://ftp.gnu.org/gnu/octa ...

  3. 命令行解释器(shell)

    unix> ./hello hello world unix> ll 显示当前目录下文件信息. shell为命令行解释器,第一个单词可以是内置的外壳命令,也可以是一个可执行文件名.

  4. java中如何将char数组转化为String

    1.直接在构造String时建立. char data[] = {'s', 'g', 'k'}; String str = new String(data); 2.String有方法可以直接转换. S ...

  5. hdu 4711 Weather概率dp

    http://acm.hdu.edu.cn/showproblem.php?pid=4711 真的是坑吐血了,wa了5次  最后实在无语 把long long double 改成long double ...

  6. Object-c 单例模式中的 allocWithZone作用

    最 近因为在ios应用开发中,考虑到一些公共方法的封装使用,就决定使用单例模式的写法了..不知道,Object-c中的单例模式的写法是否和java中的写法是否有所区别? 于是阿堂从网上一搜,发现“ O ...

  7. paip.oracle10g dmp文件导入总结

    paip.oracle10g dmp文件导入总结 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net ...

  8. ecside使用笔记(1)

    1. 部分属性描写叙述: 属性: tableId 描写叙述:  设置列表的唯一标识,默觉得"ec",当一个页面内有多个ECSIDE列表时,必须为每一个列表指定不同的 tableId ...

  9. ubuntu高版本环境变量问题

    在ubuntu较高的版本(博主使用的是14.10)下,可以在/etc/environment中配置环境变量,这个环境变量可能会覆盖用户~/.bashrc中配置的环境变量,这个应该引起注意.

  10. C#核编之X++详解

    重点:当X++单独使用时,就是没有其他符号参与运算,这时X做自增运算,而当X++与其他运算符一起参与运算时,这时的X++因为运算优先级低,所以是最后一个参与运算的,所以看下面代码 ; x=x++;// ...