UICollectionView和UICollectionReusableView的使用(集合視圖)

這裏寫圖片描述

這裏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的類裏面不需要寫什麼

這裏寫圖片描述

發佈了48 篇原創文章 · 獲贊 1 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章