相信了解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. Matalab之模糊KMeans原理

    对Kmeans方法相信大家都会不陌生,这是一种广泛被应用的基于划分的聚类算法.首先对它的核心思想做一个简单的介绍: 算法把n个向量xj(1,2…,n)分为c个组Gi(i=1,2,…,c),并求每组的聚 ...

  2. 多级列表——ExpandableListView

    ExpandableListView控件提供的是一个多级列表(一般是两级),我们先来看一下效果图,如图4.18所示为头部列表,单击其中的每一项下面会显示第二级列表,如图4.19所示. 从图4.18和图 ...

  3. docker 镜像管理

    docker:/root# docker search centos NAME DESCRIPTION STARS OFFICIAL AUTOMATED centos The official bui ...

  4. Longge的问题(欧拉,思维)

     Longge的问题 Submit Status Practice HYSBZ 2705 Description Longge的数学成绩非常好,并且他非常乐于挑战高难度的数学问题.现在问题来了:给定一 ...

  5. [caffe]深度学习之图像分类模型AlexNet解读

    在imagenet上的图像分类challenge上Alex提出的alexnet网络结构模型赢得了2012届的冠军.要研究CNN类型DL网络模型在图像分类上的应用,就逃不开研究alexnet.这是CNN ...

  6. 三十、Java图形化界面设计——布局管理器之BorderLayout(边界布局)

    边界布局管理器把容器的的布局分为五个位置:CENTER.EAST.WEST.NORTH.SOUTH.依次相应为:上北(NORTH).下南(SOUTH).左西(WEST).右东(EAST),中(CENT ...

  7. 从U盘安装win8系统

    http://blog.csdn.net/pipisorry/article/details/40662397 lz提示,下面也能够用于win7.linux等操作系统的安装 一.下载windows安装 ...

  8. CSS 浏览器默认样式

    不要再说div天生就是block——这句话应该换成:浏览器默认样式天生规定了div是block——所以才导致了div是block!是默认样式规定的,不是浏览器的内核规定的. 没有设置block的元素, ...

  9. 解决 Boot Camp 虚拟机升级到 Windows 10 后 Parallels Desktop 不能识别的问题

    最近几天 Win10 正式版开始推送了,对于喜欢折腾的博主,在第一时间就把 Mac 中 Boot Camp 从 Win7 升级到 Win10,初步体验还不错,等博主用过一段时间之后,再来给大家分享使用 ...

  10. hdu1711Number Sequence

    Problem Description Given two sequences of numbers : a[1], a[2], ...... , a[N], and b[1], b[2], .... ...