UICollectionView和UICollectionReusableView的使用(集合视图)

来源:互联网 发布:格伦罗宾逊数据 编辑:程序博客网 时间:2024/06/06 00:51

这里写图片描述

这里UICollectionReusableView即是UICollectionView的Header,可以跟随整体一起滑动的。这个效果类似UITableView的header。

1.我是以xib的形式创建的

这里写图片描述
这里写图片描述

2.接下来就是主要的代码了

#import "ViewController.h"#import "MyCell.h"#import "SuppleView.h"#define Width [UIScreen mainScreen].bounds.size.width#define Height [UIScreen mainScreen].bounds.size.height@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>@property (retain) UICollectionView* collectionView;@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view, typically from a nib.    self.automaticallyAdjustsScrollViewInsets = NO;    UICollectionViewFlowLayout* layout = [[UICollectionViewFlowLayout alloc]init];    //[layout setScrollDirection:UICollectionViewScrollDirectionHorizontal];    [layout setScrollDirection:UICollectionViewScrollDirectionVertical];    layout.minimumLineSpacing = 3;//纵向的最小间隔 (可以直接调节)    layout.minimumInteritemSpacing = 0; //横向的最小间隔(结合UIEageInsets调节)    //初始化集合视图,传入布局对象    _collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 64, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height-64) collectionViewLayout:layout];    _collectionView.backgroundColor = [UIColor grayColor];    //设置代理    _collectionView.delegate = self;    _collectionView.dataSource = self;    [_collectionView registerNib:[UINib nibWithNibName:@"MyCell" bundle:nil] forCellWithReuseIdentifier:@"Cell"];    [_collectionView registerClass:[SuppleView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"Supple"];    [_collectionView registerClass:[SuppleView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"Supple"];    [self.view addSubview:_collectionView];}#pragma mark - UICollectionViewDelegate//选中某一个item后,触发的方法- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{    NSLog(@"select section:%ld item:%ld",indexPath.section,indexPath.item);}#pragma mark - UICollectionViewDataSoure//集合视图有多少个分区- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{    return 2;}//每个分区有多少个数据- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{    return 4;}-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{    static NSString* cellID = @"Cell";    MyCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];    cell.image.image = [UIImage imageNamed:@"0.png"];    cell.label.text = @"天下第一帅";    return cell;}//collectionView对header和footer会自动创建,我们需要对header和footer赋不同的值- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{    static NSString *viewIde = @"Supple";    //从重用队列中取header和footerview 取不到会自动创建    SuppleView *view = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:viewIde forIndexPath:indexPath];    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {        view.backgroundColor = [UIColor yellowColor];    }else if ([kind isEqualToString:UICollectionElementKindSectionFooter]){        view.backgroundColor = [UIColor blueColor];    }    return view;}//布局协议对应的方法实现#pragma mark - UICollectionViewDelegateFlowLayout//设置每个一个Item(cell)的大小- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{    //每个item也可以调成不同的大小    return CGSizeMake(150,120);}//设置所有的cell组成的视图与section 上、左、下、右的间隔- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{    return UIEdgeInsetsMake(10,7, 10, 7);}//设置footer呈现的size, 如果布局是垂直方向的话,size只需设置高度,宽与collectionView一致- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{    return CGSizeMake(0,20);}- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{    return CGSizeMake(0,20);}- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}@end

3.还有要记得创建一个继承 UICollectionReusableView的类里面不需要写什么

这里写图片描述