iOS開發UICollectionViewFlowLayout進行布局使用簡書(借鑒)

一,引言

UICollectionView的簡單使用:http://my.oschina.net/u/2340880/blog/522613

UICollectionView相關協議方法:http://my.oschina.net/u/2340880/blog/522613

二、將九宮格式的布局進行升級

在第一篇博客中,通過UICollectionView,我們很輕松的完成了一個九宮格的布局,但是如此中規中矩的布局方式,有時候并不能滿足我們的需求,有時我們需要每一個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];

}

//設置每個item的大小,雙數的為5050 單數的為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);

}

}

//代理相應方法

-(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相關屬性方法

UICollectionViewFlowLayout是系統提供給我們一個封裝好的流布局設置類,其中有一些布局屬性我們可以進行設置:

設置行與行之間的間距最小距離

@property (nonatomic) CGFloat minimumLineSpacing;

設置列與列之間的間距最小距離

@property (nonatomic) CGFloat minimumInteritemSpacing;

設置每個item的大小

@property (nonatomic) CGSize itemSize;

設置每個Item的估計大小,一般不需要設置

@property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0);

設置布局方向

@property (nonatomic) UICollectionViewScrollDirection scrollDirection;

這個UICollectionViewScrollDirection的枚舉如下:

typedef NS_ENUM(NSInteger, UICollectionViewScrollDirection) {

UICollectionViewScrollDirectionVertical,//水平布局

UICollectionViewScrollDirectionHorizontal//垂直布局

};

設置頭視圖尺寸大小

@property (nonatomic) CGSize headerReferenceSize;

設置尾視圖尺寸大小

@property (nonatomic) CGSize footerReferenceSize;

設置分區的EdgeInset

@property (nonatomic) UIEdgeInsets sectionInset;

這個屬性可以設置分區的偏移量,例如我們在剛才的例子中添加如下設置:

layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);

效果如下,會看到分區的邊界閃出了20像素

下面這兩個方法設置分區的頭視圖和尾視圖是否始終固定在屏幕上邊和下邊

@property (nonatomic) BOOL sectionHeadersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);

@property (nonatomic) BOOL sectionFootersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);

四、動態的配置layout的相關屬性UICollectionViewDelegateFlowLayout

上面的方法在創建FlowLayout時靜態的進行設置,如果我們需要動態的設置這些屬性,就像我們例子中的,每個item的大小會有差異,我們可以通過代理來實現。

UICollectionViewDelegateFlowLayout是UICollectionViewDelegate的子協議,其中常用方法如下,我們只需要實現我們需要的即可:

動態設置每個Item的尺寸大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

動態設置每個分區的EdgeInsets

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;

動態設置每行的間距大小

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;

動態設置每列的間距大小

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;

動態設置某個分區頭視圖大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;

動態設置某個分區尾視圖大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容