概述
UIcollectionView是一個十分強大的控件,可以實現(xiàn)各種網(wǎng)格布局,簡單的說基本沒有 UIcollectionView 不能實現(xiàn)的布局,接下來我會先簡單介紹一下使用過程中涉及到的一些類和
布局
UIcollectionView在初始化的時候必須要指定一個布局,布局是用來指定 cell 的位置,尺寸等.
好消息是蘋果已經(jīng)給我們提供了一種簡單的流水布局--UICollectionViewFlowLayout,其繼承自UICollectionViewLayout,當(dāng)想實現(xiàn)一些比較特殊的布局時,我們就需要自定義布局,這個在下篇教程中我們在詳細(xì)展開.現(xiàn)在我們來看一下UICollectionViewFlowLayout的屬性
// iOS6.0以后才有的
NS_CLASS_AVAILABLE_IOS(6_0) @interface UICollectionViewFlowLayout : UICollectionViewLayout
// 行之間的最小間距
@property (nonatomic) CGFloat minimumLineSpacing;
// item之間的最小間距
@property (nonatomic) CGFloat minimumInteritemSpacing;
// 如果cell的大小是固定的，應(yīng)該直接設(shè)置此屬性勤揩，就不用實現(xiàn)代理
@property (nonatomic) CGSize itemSize;
// 這是8.0后才能使用蹦狂，評估item的大小
@property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0);
// 支持兩種滾動方向祠饺，水平滾動和豎直功能
// 因此不要再想要使用橫向tableview冯吓，直接使用collectionview就okb
@property (nonatomic) UICollectionViewScrollDirection scrollDirection;
// header參考大小
@property (nonatomic) CGSize headerReferenceSize;
// footer參考大小
@property (nonatomic) CGSize footerReferenceSize;
// section的inset辩恼，用于設(shè)置與上选侨、左锐想、底、右的間隔
@property (nonatomic) UIEdgeInsets sectionInset;
// 9.0以后才有的屬性旺订，用于設(shè)置header/footer與tableview的section效果一樣弄企。
// 可以懸停
@property (nonatomic) BOOL sectionHeadersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);
@property (nonatomic) BOOL sectionFootersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);
@end
數(shù)據(jù)源
UIcollectionView 的設(shè)計原理和 UItableVIew一樣,都是通過數(shù)據(jù)源和給其提供數(shù)據(jù),讓我們看看常用的數(shù)據(jù)源方法
//定義展示的UICollectionViewCell的個數(shù)
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 30;
}
//定義展示的Section的個數(shù)
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
//每個UICollectionView展示的內(nèi)容
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
static NSString * CellIdentifier = @"GradientCell";
UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];
cell.backgroundColor = [UIColor colorWithRed:((10 * indexPath.row) / 255.0) green:((20 * indexPath.row)/255.0) blue:((30 * indexPath.row)/255.0) alpha:1.0f];
return cell;
}
代理
UIcollectionView 的代理與 UItableVIew 的代理方法一樣,用來處理點擊 cell 事件等
/UICollectionView被選中時調(diào)用的方法
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell * cell = (UICollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];
cell.backgroundColor = [UIColor whiteColor];
}
//返回這個UICollectionView是否可以被選擇
-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
return YES;
}
Demo
好了,看到這里的朋友,相信你們已經(jīng)熟悉了 UIcollectionView的基本屬性,接下來讓我們一起做個小例子,來練習(xí)一下吧
效果圖
切換占位文字顏色.gif
1. 創(chuàng)建一個 UICollectionViewController,重寫其init方法,初始化流水布局
// 使用UICollectionView步驟
// 1.設(shè)置流水布局
// 2.UICollectionViewCell只能注冊
- (instancetype)init
{
// 流水布局
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
// 設(shè)置cell的尺寸
layout.itemSize = CGSizeMake(150, 100);
// 設(shè)置每一行的間距
layout.minimumLineSpacing = 40;
// 設(shè)置每個cell的間距
layout.minimumInteritemSpacing = 20;
// 設(shè)置每組的內(nèi)邊距
layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
return [self initWithCollectionViewLayout:layout];
}
2. 注冊 cell
static NSString *ID = @"cell";
- (void)viewDidLoad {
[super viewDidLoad];
// 注意: self.collectionView != self.view
self.collectionView.backgroundColor = [UIColor whiteColor];
// 注冊cell
[self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:ID];
}
3. 實現(xiàn)數(shù)據(jù)源方法
#pragma mark - UICollectionView數(shù)據(jù)源
// 返回有多少個cell
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 30;
}
// 返回每個cell長什么樣子
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
cell.backgroundColor = [UIColor redColor];
return cell;
}
小結(jié)
UIcollectionView 的簡單使用就是這樣了,下篇來自定義布局來實現(xiàn)一些復(fù)雜的布局
