iOS基礎之CollectionView(集合視圖)

標籤：

　　在iOS6.0之後，蘋果推出了?個新的繼承於UIScrolleriew的一個視 圖，UICollectionView，也被稱之為集合視圖。和UITableView共同作為 在開發中常常用的兩個視圖，常常作為項目的主介面出現。

　　代碼示範：

　　

#import "YourCollectionViewCell.h"@implementation YourCollectionViewCell-(instancetype)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        //擷取整體item的寬和高        CGFloat totalWidth = frame.size.width;        CGFloat totalHeight = frame.size.height;        self.numberLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 10, totalWidth, totalHeight - 20)];        self.numberLabel.textAlignment = NSTextAlignmentCenter;        self.numberLabel.font = [UIFont boldSystemFontOfSize:36];        [self.contentView addSubview:self.numberLabel];                                  }return self;}@end#import "MyCollectionReusableView.h"@implementation MyCollectionReusableView- (instancetype)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        self.headerLabel = [[UILabel alloc]initWithFrame:self.bounds];        self.headerLabel.textAlignment = NSTextAlignmentCenter;        self.headerLabel.font = [UIFont boldSystemFontOfSize:36];        [self addSubview:self.headerLabel];    }return self;}@end#import "ViewController.h"#import "YourCollectionViewCell.h"#import "MyCollectionReusableView.h"#define kReuse @"reuse"#define kWidth self.view.frame.size.width@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    //建立一個布局對象，採用系統布局類UICollectionViewFlowLayout     UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];    /*    //設定最小行間距    layout.minimumLineSpacing = 20;    //設定item與item之間的間距    layout.minimumInteritemSpacing = 10;    layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);    //設定每一個item的尺寸    CGFloat totalWidth = self.view.frame.size.width;    layout.itemSize = CGSizeMake((totalWidth - 40)/3, 80);    */    //設定滑動方向    layout.scrollDirection = UICollectionViewScrollDirectionVertical;    //集合視圖的建立必須指定布局，如果沒有布局，顯示不了任何東西    UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[[UIScreen mainScreen]bounds] collectionViewLayout:layout];    collectionView.dataSource = self;    collectionView.delegate = self;    //集合視圖如果想要顯示內容，必須要將cell進行註冊    [collectionView registerClass:[YourCollectionViewCell class] forCellWithReuseIdentifier:kReuse];    //集合視圖如果想要分區頭視圖顯示 ，必須註冊增廣視圖    [collectionView registerClass:[MyCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];    //給頭視圖布局    layout.headerReferenceSize = CGSizeMake(kWidth, 40);        [self.view addSubview:collectionView];        }- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{    return CGSizeMake((kWidth - 40)/3, 80);}- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{    return UIEdgeInsetsMake(0, 0, 0, 0);}- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{    return 20;}//- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{//    return 20;//}- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}#pragma mark -------集合視圖資料來源協議-------- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{    return 15;}- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{        YourCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kReuse forIndexPath:indexPath];    cell.contentView.backgroundColor = [UIColor colorWithRed:arc4random() %256 / 255.0 green:arc4random() %256 / 255.0  blue:arc4random() %256 / 255.0  alpha:1.0];    cell.numberLabel.text = [NSString stringWithFormat:@"%ld",indexPath.row];    return cell;}//返回增廣視圖，也就是集合視圖的頭視圖或者尾視圖-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{    MyCollectionReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];    view.headerLabel.text = [NSString stringWithFormat:@"當前分區為:%ld",indexPath.section];    view.backgroundColor = [UIColor yellowColor];    return view;}//設定分區個數-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{    return 10;}#pragma mark -------集合視圖代理方法------(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{    NSLog(@"%ld,%ld",indexPath.section,indexPath.row);}@end

 

iOS基礎之CollectionView(集合視圖)