iOS中 UICollectionView UI_19

iOS中 UICollectionView UI_19

UICollectionView 是UITableView加強版

UITableView 和UICollectionView的設計思想：

1.布局：

UITableView 的布局可以由UITableView本身和UITableViewDelegate完成

UICollectionView的布局由UICollectionLayout的子類UICollectionFlowLayout和UICollectionLayoutDelegate完成

 

2.配置樣式

UITableView單列多行

UICollectionView支援多行多列

 

3.資料來源：

UITableView的資料來源是UITableViewDataSource

UICollectionView的資料來源是UICollectionViewDataSource

 

4.cell的樣式

UITableViewCell 系統提供的有四種樣式

UICollectionViewCell 只內建contentView，但是contentView什麼也沒有，所有你要顯示圖片，文字必須要自訂cell

 

5.cell的重用

UITableViewCell 和 UICollectionCell 都可以重用；先註冊後重用

 

6.頁首頁尾

UITableView 的頁首頁尾不可以重用，但是 UICollectionView的頁首頁尾是可以重用的

 

7.編輯

UITableView 支援編輯，添加、刪除和移動

UICollectionView 不支援編輯

 

8.父類

UITableView 和 UICollectionView 的父類都是UIScrollView

但是UITableView 只能豎直方向滾動，而UICollectionView支援豎直方向和水平方向滾動

——————————————————————————————————————————

 

AppDelegate.m

 

   self.window.rootViewController = [[[UINavigationController alloc]initWithRootViewController:[RootViewController new]]autorelease];

 

=======================UICollectionView系統內建的cell============================

 

RootViewController.m

 

#import RootViewController.h#import DetailViewController.h#define kItem  @item#define kHead @heaad#define kFooter @footer@interface RootViewController ()//遵循協議@end

- (void)viewDidLoad {    [super viewDidLoad];    self.title = @集合視圖;    self.view.backgroundColor = [UIColor whiteColor];    //調用CollectionView的布局方法     [self configureCollectionView];}

 

CollectionView的布局方法：

 

- (void)configureCollectionView{//    UICollectionViewLayout  是所有布局類的基類,是一個抽象的類，一般很少直接使用基類(不是視圖),都是使用基類的子類,所有 UICollectionView 的布局我們要使用 UICollectionViewFlowLayout 完成    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];    //1.設定Item的大小    flowLayout.itemSize = CGSizeMake(130, 150);    //2.設定Item的縮排量    flowLayout.sectionInset = UIEdgeInsetsMake(5, 10, 5, 10);    //3.設定最小行間距    flowLayout.minimumLineSpacing = 20.0;    //4.設定Item列間距    flowLayout.minimumInteritemSpacing = 20.0;    //5.設定CollectionView滾動方向//    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;  //水平滾動//    flowLayout.scrollDirection =  UICollectionViewScrollDirectionVertical;   //預設豎直方向滾動    //6.設定頁首的大小    flowLayout.headerReferenceSize = CGSizeMake(320, 40);    //7.設定頁尾的大小    flowLayout.footerReferenceSize = CGSizeMake(320, 40);            //建立一個UICollectionView對象    UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];    //配置collectionView的背景顏色    collectionView.backgroundColor = [UIColor greenColor];    //指定資料來源代理    collectionView.dataSource = self;    //註冊Cell    [collectionView registerClass:[UICollectionViewCell  class] forCellWithReuseIdentifier:kItem];    //註冊頁首和頁尾    //第一個參數：重用視圖的類    //第二個參數：重用是頁首和頁尾的種類    //第三個參數：重用的標識    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kHead];    //註冊頁尾    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kFooter];    //設定業務代理    collectionView.delegate = self;            //將collectionView添加到視圖控制器上    [self.view addSubview:collectionView];    [flowLayout release];    [collectionView release];    }

 

 

#pragma mark CollectionView 的資料來源代理方法

//返回每個分區Item的個數- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{    return 20;}//根據indexPath 返回cell- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{        UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kItem forIndexPath:indexPath];    //設定cell的顏色    cell.backgroundColor = [UIColor redColor];    NSLog(@%@,NSStringFromCGRect(cell.frame));        return cell;    }//返回collectionView分區的個數- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{        return 2;}//返回重用的頁首頁尾的方法- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{        UICollectionReusableView *view = nil;        //根據種類判斷要使用頁首還是頁尾    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {        //重用頁首         view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kHead forIndexPath:indexPath];        //設定頁首的顏色        view.backgroundColor = [UIColor orangeColor];        }else{        //重用頁尾        view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kFooter forIndexPath:indexPath];        //設定頁尾顏色        view.backgroundColor = [UIColor blackColor];            }    return view;}

#pragma mark CollectionView 的業務代理方法：

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{    //列印item的分區下標和item下標    NSLog( @%ld--%ld,indexPath.section,indexPath.item);        [self.navigationController pushViewController:[DetailViewController new] animated:YES];}

#pragma mark UICollectionViewFlowLayoutDelegate 的方法

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{    if (0 == indexPath.section % 2) {        return CGSizeMake(50, 50);    }else{        return CGSizeMake(130,130);    }        }//返回分區縮排量- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{    if (0 == section % 2) {        return UIEdgeInsetsMake(10, 10, 10, 10);    }else{        return UIEdgeInsetsMake(20, 20, 20, 20);    } }//返回每一行item之間的最小間距- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{        return 30;    }//返回item之間的最小列間距- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{    return 20;}//返回頁首的大小- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{    return CGSizeMake(320,100);}//返回頁尾的大小- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{        return CGSizeMake(320, 100);    }

 

 

===========================學習自訂的cell==================================

建立一個頁面在這裡學習自訂cell、自訂頁首和頁尾：

DetailViewController.m

 

#import NBViewCell.h#import HeaderView.h#import FooterView.h#define kNBcell @nb-cell#define kHeadView @head#define kFootView @foot@interface DetailViewController ()//遵循協議@end

- (void)viewDidLoad {    [super viewDidLoad];    self.view.backgroundColor = [UIColor orangeColor];        //調用配置CollectionView    [self configureCollectionView];}

 

 

配置CollectionView：

//配置CollectionView- (void)configureCollectionView{    //建立布局類    UICollectionViewFlowLayout *flowout = [[UICollectionViewFlowLayout alloc]init];    //設定item的大小    flowout.itemSize = CGSizeMake(90, 90);    //設定頁首的大小    flowout.headerReferenceSize =CGSizeMake(320, 100);    //設定頁尾的大小    flowout.footerReferenceSize = CGSizeMake(320, 80);    //設定分區縮排量    flowout.sectionInset = UIEdgeInsetsMake(5, 5, 5, 5);            //建立CollectionView對象    UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowout];    //配置資料來源代理    collectionView.dataSource = self;    //註冊cell    [collectionView registerClass:[NBViewCell class] forCellWithReuseIdentifier:kNBcell];    //註冊頁首    [collectionView registerClass:[HeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kHeadView];    //註冊頁尾    [collectionView registerClass:[FooterView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kFootView];    //配置背景顏色    collectionView.backgroundColor = [UIColor whiteColor];                //添加到父視圖    [self.view addSubview:collectionView];    [collectionView release];    [flowout release];}

#pragma mark 資料來源代理方法：

 

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{    return 100;}//- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{    NBViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kNBcell forIndexPath:indexPath];        cell.label.text = [NSString stringWithFormat:@%ld--%ld,indexPath.section,indexPath.item];    return cell;        }- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{    return 2;}- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{  //重用頁首    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {        HeaderView *view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kHeadView forIndexPath:indexPath];        view.photoView.image = [UIImage imageNamed:@2];        return view;    }else{        //重用頁尾        FooterView *view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kFootView forIndexPath:indexPath];        view.footerLabel.text = [NSString stringWithFormat:@第%ld個分區,indexPath.section];        return view;    }    }

準備一個自訂cell：

 

 

NBViewCell.h

@interface NBViewCell : UICollectionViewCell@property(nonatomic,retain)UILabel *label;@end

NBViewCell.m

@implementation NBViewCell- (void)dealloc{    self.label = nil;    [super dealloc ];}//重寫初始化方法- (id)initWithFrame:(CGRect)frame{    if (self = [super initWithFrame:frame]) {             [self.contentView addSubview:self.label];            }    return self;}- (UILabel *)label{        if (_label == nil) {        self.label = [[UILabel alloc]initWithFrame:self.bounds];        self.label.textAlignment = NSTextAlignmentCenter;        self.label.backgroundColor = [UIColor cyanColor];            }    return [[_label retain]autorelease];}@end

準備一個自訂頁首：

實現頁首顯示圖片

 

HeaderView.h

 

@interface HeaderView : UICollectionReusableView@property(nonatomic,retain)UIImageView *photoView;@end

HeaderView.m

@implementation HeaderView- (void)dealloc{    self.photoView = nil;    [super dealloc];}- (instancetype)initWithFrame:(CGRect)frame{    if (self = [super initWithFrame:frame]) {                [self addSubview:self.photoView];        }    return self;}- (UIImageView *)photoView{    if (_photoView == nil) {        self.photoView = [[UIImageView alloc]initWithFrame:self.bounds];//        self.photoView.image = [UIImage imageNamed:@a.jpg];        self.photoView.backgroundColor = [UIColor yellowColor];    }        return [[_photoView retain]autorelease]; }@end

準備一個自訂頁尾：

 

實現頁尾顯示分區

FooterView.h

@interface FooterView : UICollectionReusableView@property(nonatomic,retain)UILabel *footerLabel;@end

FooterView.m

@implementation FooterView- (void)dealloc{    self.footerLabel = nil;    [super dealloc];}- (instancetype)initWithFrame:(CGRect)frame{    if (self = [super initWithFrame:frame]) {                [self addSubview:self.footerLabel];            }        return self;}- (UILabel *)footerLabel{        if (_footerLabel == nil) {        self.footerLabel = [[UILabel alloc]initWithFrame:self.bounds];        self.footerLabel.backgroundColor = [UIColor redColor];            }    return [[_footerLabel retain]autorelease];}@end

頁首圖片：

 

最終效果：