iOS flow layout uicollectionview use FlowLayout for more flexible layouts

First, Introduction

The previous blog introduces Uicollectionview methods and their protocols, but does not focus on the layout of the management class Uicollectionviewflowlayout, this blog describes the layout of the relevant settings and property methods.

Simple use of Uicollectionview: http://my.oschina.net/u/2340880/blog/522613

Uicollectionview Related protocol method: http://my.oschina.net/u/2340880/blog/522613

With layout settings, we can write more flexible layouts.

Second, the layout of the nine format to upgrade

In the first blog, through Uicollectionview, we easily completed a nine-gongge layout, but such a good layout, sometimes does not meet our needs, sometimes we need each item to show a different size, the code is as follows:

-(void) viewdidload {   [super viewdidload];    //do any additional setup after loading the view, Ty Pically 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];    }//sets the size of each item, even if the 50*50 singular is 100*100-(cgsize) CollectionView: (Uicollectionview *) CollectionView layout :(uicollectionviewlayout *) collectionviewlayout Sizeforitematindexpath: (Nsindexpath *) indexPath{   if ( indexpath.row%2==0) {       return Cgsizemake (),    }else{       return Cgsizemake (+),    }}//agent corresponding Method-(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;}

The effect is as follows:

Now the layout effect is not a lot of cool.

Three, Uicollectionviewflowlayout correlation attribute method

Uicollectionviewflowlayout is the system that provides us with a packaged flow layout setting class with some layout properties that we can set:

Set the minimum distance between lines and rows

@property (nonatomic) CGFloat minimumLineSpacing;

Set the minimum distance between columns and column

@property (nonatomic) CGFloat minimumInteritemSpacing;

Set the size of each item

@property (nonatomic) CGSize itemSize;

Set the estimated size of each item, generally do not need to set

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

Set layout orientation

@property (nonatomic) UICollectionViewScrollDirection scrollDirection;

The enumeration of this uicollectionviewscrolldirection is as follows:

typedef NS_ENUM(NSInteger, UICollectionViewScrollDirection) {    UICollectionViewScrollDirectionVertical,//水平布局    UICollectionViewScrollDirectionHorizontal//垂直布局};

Set head view dimension size

@property (nonatomic) CGSize headerReferenceSize;

Set tail view dimension size

@property (nonatomic) CGSize footerReferenceSize;

Setting the Edgeinset of a partition

@property (nonatomic) UIEdgeInsets sectionInset;

This property can set the offset of the partition, for example, we add the following setting in the example:

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

The results are as follows, and you'll see the boundaries of the partitions flash 20 pixels.

The following two methods set whether the header and tail views of a partition are always pinned to the top and bottom of the screen

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

Four, dynamic configuration layout of the relevant properties Uicollectionviewdelegateflowlayout

The above method is statically set when creating FlowLayout, and if we need to set these properties dynamically, as in our example, the size of each item will be different, and we can do it by proxy.

Uicollectionviewdelegateflowlayout is the sub-Protocol of Uicollectionviewdelegate, the common method is as follows, we just need to achieve what we want:

Dynamically set the size of each item

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

Dynamically set edgeinsets for each partition

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

Dynamically set the amount of space per row

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

Dynamically set the amount of space per column

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

Dynamically set a partition header view size

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

Dynamically set a section footer view size

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

iOS flow layout uicollectionview use FlowLayout for more flexible layouts