概述
UIcollectionView是一個十分強大的控件,可以實現各種網格布局,簡單的說基本沒有 UIcollectionView 不能實現的布局,接下來我會先簡單介紹一下使用過程中涉及到的一些類和
布局
UIcollectionView在初始化的時候必須要指定一個布局,布局是用來指定 cell 的位置,尺寸等.
好消息是蘋果已經給我們提供了一種簡單的流水布局--UICollectionViewFlowLayout,其繼承自UICollectionViewLayout,當想實現一些比較特殊的布局時,我們就需要自定義布局,這個在下篇教程中我們在詳細展開.現在我們來看一下UICollectionViewFlowLayout的屬性
// iOS6.0以后才有的
NS_CLASS_AVAILABLE_IOS(6_0) @interface UICollectionViewFlowLayout : UICollectionViewLayout
// 行之間的最小間距
@property (nonatomic) CGFloat minimumLineSpacing;
// item之間的最小間距
@property (nonatomic) CGFloat minimumInteritemSpacing;
// 如果cell的大小是固定的，應該直接設置此屬性，就不用實現代理
@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，用于設置與上、左、底、右的間隔
@property (nonatomic) UIEdgeInsets sectionInset;
// 9.0以后才有的屬性，用于設置header/footer與tableview的section效果一樣。
// 可以懸停
@property (nonatomic) BOOL sectionHeadersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);
@property (nonatomic) BOOL sectionFootersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);
@end
數據源
UIcollectionView 的設計原理和 UItableVIew一樣,都是通過數據源和給其提供數據,讓我們看看常用的數據源方法
//定義展示的UICollectionViewCell的個數
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 30;
}
//定義展示的Section的個數
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
//每個UICollectionView展示的內容
-(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被選中時調用的方法
-(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
好了,看到這里的朋友,相信你們已經熟悉了 UIcollectionView的基本屬性,接下來讓我們一起做個小例子,來練習一下吧
效果圖
切換占位文字顏色.gif
1. 創建一個 UICollectionViewController,重寫其init方法,初始化流水布局
// 使用UICollectionView步驟
// 1.設置流水布局
// 2.UICollectionViewCell只能注冊
- (instancetype)init
{
// 流水布局
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
// 設置cell的尺寸
layout.itemSize = CGSizeMake(150, 100);
// 設置每一行的間距
layout.minimumLineSpacing = 40;
// 設置每個cell的間距
layout.minimumInteritemSpacing = 20;
// 設置每組的內邊距
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. 實現數據源方法
#pragma mark - UICollectionView數據源
// 返回有多少個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;
}
小結
UIcollectionView 的簡單使用就是這樣了,下篇來自定義布局來實現一些復雜的布局
