UICollectionView 表格视图

#import "ViewController.h"
#import "LQCollectionViewCell.h"
@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout, LQCollectionViewCellDelegate>

/**集合视图*/
@property (nonatomic,strong)UICollectionView * coll;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    // UICollectionView
//    self.view.backgroundColor = [UIColor whiteColor];
    [self createCollectionView];
    
    
    
    
}
//实例化一个collectionView

- (void)createCollectionView{
    
    //实例化collectionView
    //流式布局
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
#warning 元素的属性
    //每个元素的大小  元素的大小最好跟手机屏幕进行匹配  如果超出部分，会进行换行处理
//    layout.itemSize = CGSizeMake(100, 100);
    
    //设置每一个元素的最小间隔, 默认10
    //如果设置成水平方向的滚动，则竖着的间隔为行间距，横着的是元素间距
    //如果设置成垂直方向的滚动，则横着的间隔为行间距，竖着的为元素间距
//    layout.minimumInteritemSpacing = 0; //每行元素之间的间距
//    layout.minimumLineSpacing = 0; // 行间距
    layout.minimumInteritemSpacing  = 10;
    layout.minimumLineSpacing = 0;
    
    //设置滚动方向
    /**
     UICollectionViewScrollDirectionVertical,//垂直的方向
     UICollectionViewScrollDirectionHorizontal//水平的方向
     
     */
    layout.scrollDirection =  UICollectionViewScrollDirectionVertical;
    //设置元素与边界的间距
#warning 上左下右
    layout.sectionInset =UIEdgeInsetsMake(0, 0, 0, 0) ;
    
    
    
    //collectionView 在实例化的时候，需要设置一个样式布局
    
    self.coll = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];

    //collectionView 类似tableView
    //如果想显示内容，也是需要设置delegate dataSoure
    self.coll.dataSource =self;
    self.coll.delegate = self;
    
    //注册一个cell,collectionView必须先注册，在使用
    [self.coll registerClass:[LQCollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
    //UICollectionElementKindSectionHeader 组头
    //UICollectionElementKindSectionFooter 组尾
    //注册一个ReusableView 作为组头
    [self.coll registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
    //注册一个ReusableView 作为组尾
    [self.coll registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"foot"];
    //默认是黑色的  不像其他视图 是透明的
    [self.view addSubview:self.coll];
    
    
}

#pragma mark ---UIcollectionView DataSource---
//items ：表示显示的元素个数，类似于tableview里面的row
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    
    return 100;
    
}

// 每一个元素里面需要显示什么样的内容

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    //collectionCell  使用时，也需要复用
    LQCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
//    if (cell == nil) {
//        cell = [UICollectionViewCell alloc]
//    }
    
    //collectionViewCell 的复用
#warning collectionCell 必须要先注册cell 或者自定义 才能够正常使用 UICollectionReusableView 注册的时候使用这个类来注册的
    
#warning 重点方法
    
    
    float red = arc4random() % 256;
    float blue = arc4random() % 256;
    float green = arc4random() % 256;
    cell.backgroundColor = [UIColor colorWithRed:red / 255.f green:green / 255.f blue:blue / 255.f alpha:1];
    
#warning 再每个元素上显示什么内容
    //在每个单元格上显示文字  因为CollectionViewCel只是一个的 没有自带的其他属性，像tableViewCell  中cell.text 等等
    //MVC
    //M:indexPath
    //V:cell
    //C: 把cell要显示的数据，告诉cell
    
    cell.indexPath = indexPath;
    //最后是视图显示了  那么cell怎么知道要显示什么数据呢
#warning block 方式
//    [cell setShowLog:^(NSIndexPath * index) {
//        NSLog(@"点击了第%zd组，第%zd 行",index.section,index.item);
//    }];

#warning  代理方式  注意这里要用复用的cell 不用再去实例新的cell  不然就是另外的一个对象
//    cell.delegate = self;
    
#warning 通知
//    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(showCelllog:) name:@"lqcell" object:nil];
    
#warning target-action

    cell.target = self;
    cell.selector = @selector(showLog:);
    return cell;
    
}
- (void)showCelllog:(NSNotification *)noti{
    
    NSDictionary *userInfro = noti.userInfo;
    NSIndexPath *indexPath = userInfro[@"lqcell"];
    NSLog(@"点击了第%zd组，第%zd 行",indexPath.section,indexPath.item);
}
#warning  代理协议方法
- (void)showLog:(NSIndexPath *)indexPath {
    NSLog(@"进来饿了");
    NSLog(@"点击了第%zd组，第%zd 行",indexPath.section,indexPath.item);

    
}

//组头组尾视图  组头没有悬屏效果 这于tableView不一样
// collectionView 的组头组尾  也是需要复用 这个与tableView不同
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
 
   
    if (kind == UICollectionElementKindSectionHeader  ) {
        //1.取出可复用的视图
        UICollectionReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];
         view.backgroundColor = [UIColor whiteColor];
        //在添加label 之前，先移除原来上面的label
        for (UIView *subView in view.subviews) {
            [subView removeFromSuperview];
        }
        //添加一个label，显示标题
#warning 子视图的frame 是相对于父视图的
        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(50, 50, 300, 30)];
        label.text = [NSString stringWithFormat:@"这是第%zd组的组头", arc4random () % 10];
        
        
        [view addSubview:label];
        return view;
    }
    else{
        NSLog(@"进来了");
        UICollectionReusableView *footView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"foot" forIndexPath:indexPath];
        footView.backgroundColor = [UIColor whiteColor];

        for (UIView *fooview in footView.subviews) {
            [fooview removeFromSuperview];
        }
        
        //添加一个label，显示标题
        //label的大小事相对于每个的位置的，所以这里要注意一下y值大小的设定(0, 50, 200, 30)
        UILabel *footlabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 50, 200, 30)];
        footlabel.text = [NSString stringWithFormat:@"%d组尾",arc4random () % 10];
        footlabel.backgroundColor = [UIColor redColor];
        [footView addSubview:footlabel];
        return footView;
    }
    
    //没有显示的原因是因为没有设置组头的大小  根tableView 一样
    
    
}
#warning 设置组头 和元素大小的时候要遵从这个协议UICollectionViewDelegateFlowLayout
// 设置组头大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    //为什么要返回一个CGSize
    //是为了适应不同的滚动的方向如果是水平方向的滚动，则宽有意义，高无意义，如果是垂直方向的滚动，则高有意义，宽无意义
    return CGSizeMake(100, 100);
}
//动态修改每个元素的大小  元素不一致的画面
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    //获取当前显示的第几个元素
    // indexPath.section 获取分组
    //indexPath.item 获取第几个元素
    if (indexPath.item % 2 == 0) {
        //偶数
        return CGSizeMake(100, 100);
    }
    else{
        //奇数
        return CGSizeMake(50, 50);
        
    }

}

//组尾的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{
     
    return CGSizeMake(100, 300);
}
@end

#import <UIKit/UIKit.h>
#warning 代理协议
@protocol LQCollectionViewCellDelegate <NSObject>
- (void)showLog:(NSIndexPath *) indexPath;
@end

@interface LQCollectionViewCell : UICollectionViewCell
//用来接收传过来的要显示数据
@property (nonatomic,strong)NSIndexPath *indexPath;
//warning target-action
@property (nonatomic, strong) id target;
@property (nonatomic, assign) SEL selector;
//声明一个block
@property (nonatomic,strong)void(^showLog) (NSIndexPath * indexPaeh);
@property (nonatomic,weak)id <LQCollectionViewCellDelegate>delegate;
@end

#import "LQCollectionViewCell.h"
#import "ViewController.h"


@interface LQCollectionViewCell ()
#warning 尽量把界面上显示的元素，声明到.m里面  因为如果在.h里面 可以访问他的属性，造成数据不安全
@property (nonatomic,strong)UILabel *label;
@property (nonatomic,strong)UIButton *button;

@end

@implementation LQCollectionViewCell

- (void)setIndexPath:(NSIndexPath *)indexPath{
    
    _indexPath = indexPath;
    
    self.label.text = [NSString stringWithFormat:@"%zd--->%zd",indexPath.section,indexPath.row];
    //调用一下2button的getter这个方法，不然界面上不会显示
    [self button];
    //超出部分裁剪
    self.contentView.clipsToBounds = YES;
}

#warning cell里面的元素实例化，写懒加载是最重要的

- (UILabel *)label{
    if (_label == nil) {
        _label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
        
        
        //_label.font
        //_label.textColor
        [self.contentView addSubview:_label];
    }
    
    return _label;
}

- (UIButton *)button{
    
    if (_button == nil) {
        _button = [UIButton buttonWithType:UIButtonTypeCustom];
        _button.frame = CGRectMake(0, 50, 100, 50);
        [_button addTarget:self action:@selector(buttonACtion:) forControlEvents:UIControlEventTouchUpInside];
        _button.backgroundColor = [UIColor redColor];
        [self.contentView addSubview:_button];
    }
    return _button;
}

- (void)buttonACtion:(UIButton *)button{
    //点击cell里面的button 在Viewcoller里面执行响应的事件
    //代理协议
    //block
    //通知
    //target - action  执行事件的主体
#warning block方法
//    if (self.showLog) {
//        self.showLog(self.indexPath);
//    }

#warning 代理方法 
//    NSLog(@"进来了");
//    if ([_delegate respondsToSelector:@selector(showLog:)]){
//         [self.delegate showLog:self.indexPath];
//    }
#warning 通知
//    [[NSNotificationCenter defaultCenter] postNotificationName:@"lqcell" object:nil userInfo:@{@"lqcell":self.indexPath}];
#warning 用target调用SEL方法, 传递indexPath值

    [self.target performSelector:self.selector withObject:self.indexPath];
}
@end

UICollectionView 表格视图.png