一,引言
UICollectionView的簡單使用:http://my.oschina.net/u/2340880/blog/522613
UICollectionView相關(guān)協(xié)議方法:http://my.oschina.net/u/2340880/blog/522613
二、將九宮格式的布局進行升級
在第一篇博客中织阳,通過UICollectionView眶蕉,我們很輕松的完成了一個九宮格的布局,但是如此中規(guī)中矩的布局方式唧躲,有時候并不能滿足我們的需求造挽,有時我們需要每一個Item展示不同的大小,代碼如下:
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
UICollectionView *collect = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, 320, 400) collectionViewLayout:layout];
collect.delegate=self;
collect.dataSource=self;
[collect registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellid"];
;
[self.view addSubview:collect];
}
//設(shè)置每個item的大小弄痹,雙數(shù)的為5050 單數(shù)的為100100
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
if (indexPath.row%2==0) {
return CGSizeMake(50, 50);
}else{
return CGSizeMake(100, 100);
}
}
//代理相應(yīng)方法
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 100;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellid" forIndexPath:indexPath];
cell.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];
return cell;
}
三刽宪、UICollectionViewFlowLayout相關(guān)屬性方法
UICollectionViewFlowLayout是系統(tǒng)提供給我們一個封裝好的流布局設(shè)置類,其中有一些布局屬性我們可以進行設(shè)置:
設(shè)置行與行之間的間距最小距離
@property (nonatomic) CGFloat minimumLineSpacing;
設(shè)置列與列之間的間距最小距離
@property (nonatomic) CGFloat minimumInteritemSpacing;
設(shè)置每個item的大小
@property (nonatomic) CGSize itemSize;
設(shè)置每個Item的估計大小界酒,一般不需要設(shè)置
@property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0);
設(shè)置布局方向
@property (nonatomic) UICollectionViewScrollDirection scrollDirection;
這個UICollectionViewScrollDirection的枚舉如下:
typedef NS_ENUM(NSInteger, UICollectionViewScrollDirection) {
UICollectionViewScrollDirectionVertical,//水平布局
UICollectionViewScrollDirectionHorizontal//垂直布局
};
設(shè)置頭視圖尺寸大小
@property (nonatomic) CGSize headerReferenceSize;
設(shè)置尾視圖尺寸大小
@property (nonatomic) CGSize footerReferenceSize;
設(shè)置分區(qū)的EdgeInset
@property (nonatomic) UIEdgeInsets sectionInset;
這個屬性可以設(shè)置分區(qū)的偏移量,例如我們在剛才的例子中添加如下設(shè)置:
layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
效果如下嘴秸,會看到分區(qū)的邊界閃出了20像素
下面這兩個方法設(shè)置分區(qū)的頭視圖和尾視圖是否始終固定在屏幕上邊和下邊
@property (nonatomic) BOOL sectionHeadersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);
@property (nonatomic) BOOL sectionFootersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);
四毁欣、動態(tài)的配置layout的相關(guān)屬性UICollectionViewDelegateFlowLayout
上面的方法在創(chuàng)建FlowLayout時靜態(tài)的進行設(shè)置,如果我們需要動態(tài)的設(shè)置這些屬性岳掐,就像我們例子中的凭疮,每個item的大小會有差異,我們可以通過代理來實現(xiàn)串述。
UICollectionViewDelegateFlowLayout是UICollectionViewDelegate的子協(xié)議执解,其中常用方法如下,我們只需要實現(xiàn)我們需要的即可:
動態(tài)設(shè)置每個Item的尺寸大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
動態(tài)設(shè)置每個分區(qū)的EdgeInsets
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
動態(tài)設(shè)置每行的間距大小
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
動態(tài)設(shè)置每列的間距大小
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
動態(tài)設(shè)置某個分區(qū)頭視圖大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;
動態(tài)設(shè)置某個分區(qū)尾視圖大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;