Ios教程網 >> IOS編程開發 >> IOS開發綜合 >> iOS中 UICollectionView UI_19

iOS中 UICollectionView UI_19

編輯：IOS開發綜合

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

頁眉圖片：

最終效果：

上一頁:iOS --- 使用CoreTelephony來獲取運營商信息
下一頁:如何實現iOS圖書動畫-第2部分(上)

IOS開發綜合

如何實現IOS_SearchBar搜索欄及關鍵字高亮搜索框的效果演示:這個就是所謂的搜索框了,那麼接下來我們看看

iOS UITableView(二) 本文主要內容：1.純代碼創建自定義cell;2.Xib創建自

Xcode8 Xcode 8包括所有你需要的東西,去創建令人驚歎的iPho

IOS編程開發

IOS開發基礎 IOS編程技術 IOS開發綜合

iOS 中 XML 數據交換格式