UICollectionView基础教学

标签：

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

https://github.com/dingpuyu/WaterFall

https://github.com/zhangsuya/SYStickHeaderWaterFall

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

文件目录：

思路步骤：

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基础教学

标签：

原文地址：http://www.cnblogs.com/bdlfbj/p/5521644.html