Sian 发表于 2014-5-30 16:09:09

UICollectionView的使用(与UITableView的比较)

本帖最后由 Sian 于 2014-5-30 16:16 编辑

1、先看两者比较的效果图

   

2、特点:

2.1、都继承自UIScrollView,因此这两者可以说是兄弟关系,都是用于数据展示方面都是非凡的表现,并且UICollectionView自iOS6以来才支持;

2.2、Collection View的整体构成元素,共有三个要素,分别如下

[*]Cells(单元格)
[*]Supplementary Views(补充的view,相当于TableView的页眉和页脚)
[*]Decoration Views(装饰View,用于装饰整个CollectionView的

2.3、数据模型(数据提供者UICollectionViewDataSource),主要功能:

[*]Section数目
[*]Section里面有多少item
[*]提供Cell和supplementary view设置

分别为:
numberOfSectionsInCollectionView:

collectionView:numberOfItemsInSection:

collectionView:cellForItemAtIndexPath:
2.4、Cell和View的重用
在iOS6中,Cell重用改善,我们可以更加方便的使用Cell,系统总是为我们初始化Cell。我们可以直接使用。只需要简单的按照两步走即可:

1)必须使用下面的方法进行Cell类的注册:
- (void)registerClass:forCellWithReuseIdentifier:

- (void)registerClass:forSupplementaryViewOfKind:withReuseIdentifier:

- (void)registerNib:forCellWithReuseIdentifier:

- (void)registerNib:forSupplementaryViewOfKind:withReuseIdentifier:
2)从队列中取出一个Cell,具体方法如下:
-(id)dequeueReusableCellWithReuseIdentifier:forIndexPath:

-(id)dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:
2.5、界面布局
collectionView与tableView最大的不同点就在于此,collectionView必须要使用自己的layout(UICollectionViewLayout)
如:
    UICollectionViewFlowLayout *flowLayout = [ init];
    flowLayout.itemSize = CGSizeMake(52, 52);               // cell大小
    flowLayout.minimumInteritemSpacing = 1;               // cell间距
    flowLayout.minimumLineSpacing = 1;                      // cell行距
    flowLayout.sectionInset = (UIEdgeInsets){81,1,1,1};   // cell边距
创建collectionView需要带Layout的初始化方法:
- (id)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout;
3、示例//
//CarLicenseView.m
//RouteMapInformation
//
//Created by yusian on 14-5-29.
//Copyright (c) 2014年 yusian. All rights reserved.
//

#import "CarLicenseView.h"

/****************************Cell定义*********************************/

@interface SALicenseCell : UICollectionViewCell

@property (nonatomic, strong) UILabel *label;

@end

@implementation SALicenseCell

- (id)initWithFrame:(CGRect)frame
{
    self = ;
    if (self) {
      
      // 键盘文字设置
      self.label = [ init];
      self.label.backgroundColor = ;// 透明颜色
      self.label.textAlignment = NSTextAlignmentCenter;   // 文字居中
      self.label.frame = CGRectMake(0, 0, 52, 52);      // 位置大小
      self.label.font = ;   // 文字大小
      self.backgroundColor = ;      // 背景颜色
      
      
      ;
    }
    return self;
}

+ (NSString *)ID
{
    return @"licenseCellID";
}

@end

/****************************Cell定义*********************************/

@interface CarLicenseView () <UICollectionViewDataSource, UICollectionViewDelegate, UIAlertViewDelegate>

@end

@implementation CarLicenseView

#pragma mark 界面初始化
- (id)initWithFrame:(CGRect)frame
{
    // 1、键盘按钮布局
    UICollectionViewFlowLayout *flowLayout = [ init];
    flowLayout.itemSize = CGSizeMake(52, 52);               // 按键大小
    flowLayout.minimumInteritemSpacing = 1;               // 按键间距
    flowLayout.minimumLineSpacing = 1;                      // 按键行距
    flowLayout.sectionInset = (UIEdgeInsets){81,1,1,1};   // 按键边距
   
    // 2、键盘附加视图
    self = ;
    if (self) {
      // 键盘背景色
      self.backgroundColor = ;
      
    }
   
    // 3、注册按钮类(内部处理机制)
    forCellWithReuseIdentifier:];
    self.delegate = self;
    self.dataSource = self;
   
    return self;
}

#pragma mark 界面绘制方法
#pragma mark 键盘按键数目
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 30;
}

#pragma mark 键盘按键文字
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    SALicenseCell *cell = forIndexPath:indexPath];
    cell.backgroundColor = ;
    return cell;
}


@end

参考链接:http://www.howzhi.com/group/iosDevelop/discuss/10134

页: [1]
查看完整版本: UICollectionView的使用(与UITableView的比较)