"Official iOS document Translator" Uicollectionview and Uicollectionviewflowlayout

(a) Let's briefly review the Uicollectionview
The simple use of *uicollectionview can be seen in my previous blog post: The basic use of Uicollectionview

Uicollectionview is similar to UITableView and must implement two proxies: Uicollectionviewdatasource and Uicollectionviewdelegate, However, the content layout of the Uicollectionview display can be more varied and flexible than UITableView, which is mainly achieved by setting the Collectionviewlayout property of the Uicollectionview. Collectionviewlayout is an example of Uicollectionviewlayout abstract class, Apple's official introduction to Uicollectionviewlayout:

(ii)uicollectionviewlayout

The Uicollectionviewlayout class is an abstract class that you can inherit from and generate layout information for collection view. Its task is to determine the placement of cell, supplementary view, and decoration view (for these views, see Figure 1) and to respond to collection view's layout information request. Then collection view requests the layout information provided for the corresponding view so that they can be displayed on the screen.

Figure 1

According to Apple's official instructions above, it is necessary to create a new class that inherits from Uicollectionviewlayout, but before that, Apple let's look at the Uicollectionviewflowlayout class, This is an apple that has helped us to build a class that inherits from Uicollectionviewlayout, if our layout is not very special or complex, and is used as a flow layout (or grid layout), Using uicollectionviewflowlayout will make everything easier. Let's look at the official explanation for Uicollectionviewflowlayout:

(iii) uicollectionviewflowlayout

The Uicollectionviewflowlayout class is used to manage the specific layout of each project view, section header, and trailer view in a grid layout (collectively called a grid). Each row (or column) in the collection view is filled with as many cells as possible, and one row (or column) does not fit, flowing to the next row (or column), where each cell size can be the same or different. A flow layout together with the agent for collection view determines the size, head, and tail of each item in each section in the grid. Proxy objects must comply with the Uicollectionviewdelegateflowlayout protocol. You can use proxies to dynamically adjust layout information. For example, use a proxy object to illustrate that each cell in a grid uses a different size. If you do not provide a proxy, flow layout uses the value set by the object property as the default value. Flow layouts uses a fixed distance value in one Direction when arranging content, and a sliding distance value in another direction, for example, in a vertical sliding grid, the width of the content is fixed (limited by the width of the collection view). The height of the content is automatically adjusted based on the number of sections and item. Layout is set to vertical by default, and you can use the Scrolldirection property to modify the scrolling direction. Each section in flow layout can have a custom head or tail. In order to configure the head and tail view, you must set the size of the head or tail to not be 0. You can either implement the appropriate proxy method or set the appropriate values for the Headerreferencesize and Footerreferencesize properties. If the size of the head and tail is 0, the corresponding view is not added to the CollectionView.

(iv) The following is the official API forUicollectionviewflowlayoutSome of the common properties

@property (nonatomic) uicollectionviewscrolldirection Scrolldirectiongrid sliding Direction @property (nonatomic) CGFloat Minimumlinespacing the minimum distance between each row @property (nonatomic) cgfloat minimuminteritemspacing the smallest distance between each item in each row @property ( nonatomic) cgsize itemsize The default size of each items @property (nonatomic) cgsize estimateditemsize The estimated size of each items (attributes after iOS8, As long as the Estimateditemsize,collection view is set, the cell size is determined based on the AutoLayout constraint within the cell) @property (nonatomic) uiedgeinsets Sectioninsetsection Blank @property (nonatomic) cgsize headerreferencesizesection header default size @property (nonatomic) Cgsize default size of Footerreferencesizesectionsection tail

FiveUicollectionviewflowlayoutProperty instance

Let's use the sample code in the following blog post to Practice Uicollectionviewflowlayout:

Basic use of Uicollectionview: http://blog.csdn.net/dolacmeng/article/details/45583681

First look at the not set Uicollectionview The effect of the Collectionviewlayout property (but the original sample code uses the Sizeforitematindexpath method in the Uicollectionviewdelegateflowlayout proxy to set the size of the cell):

Then we try to use uicollectionviewflowlayout, We modify the Viewdidload method as follows:

-(void) viewdidload {    [super viewdidload];    Uicollectionviewflowlayout *floatlayout = [[Uicollectionviewflowlayout alloc] init];    Floatlayout.itemsize = cgsizemake (100, 100); Set the size of each cell    Floatlayout.sectioninset = Uiedgeinsetsmake (10, 10, 10, 10);//set padding for    content floatlayout.minimuminteritemspacing = 5;//Sets the minimum spacing between each cell    floatlayout.scrolldirection = uicollectionviewscrolldirectionhorizontal;//Setting the scroll direction    _collectionview.collectionviewlayout = floatLayout;}

* Because modifying the Uicollectionviewflowlayout property value is equivalent to modifying the corresponding default value, because the final layout is determined by the Uicollectionviewflowlayout and Uicollectionviewdelegateflowlayout proxy methods together, and we have implemented the Sizeforitematindexpath method, Overrides the value of the ItemSize property, so you also block out the Sizeforitematindexpath method:

-(Cgsize) CollectionView: (Uicollectionview *) CollectionView layout: (Uicollectionviewlayout *) Collectionviewlayout Sizeforitematindexpath: (Nsindexpath *) indexpath{//        return Cgsizemake (120, 120);/}

The effect is achieved after running (the cell size is reduced/the inner border is 10/horizontal scrolling):

(v) Uicollectionviewflowlayout Method Example

The above example simply modifies the properties of the view, sometimes we need to implement more display requirements, you can create a new class that inherits from Uicollectionviewflowlayout, and override Uicollectionviewflowlayout some of the methods in the parent class:

-(Cgsize) collectionviewcontentsize returns the content width and height of collection view (Nsarray *) Layoutattributesforelementsinrect: (CGRect) Rect returns the layout properties (Uicollectionviewlayoutattributes *) of all cells within a given range (rectangle) Layoutattributesforitematindexpath: ( Nsindexpath *) Indexpath returns the Layout property of the item at the specified location (uicollectionviewlayoutattributes *) Layoutattributesforsupplementaryviewofkind: (NSString *) kind Atindexpath: (Nsindexpath *) indexpathreturns the layout Attributes for the specified supplementary view. Returns the layout properties of a specific supplementary view-(Uicollectionviewlayoutattributes *) Layoutattributesfordecorationviewofkind: (NSString *) decorationviewkind Atindexpath: (NSIndexPath *) Indexpath returns the Layout property (BOOL) Shouldinvalidatelayoutforboundschange for a specific decoration view: (CGRect) Newbounds asks whether to re-layout when the displayed boundaries change-(Cgpoint) Targetcontentoffsetforproposedcontentoffset: (Cgpoint) proposedcontentoffset?                                  withscrollingvelocity: (cgpoint) velocity returns the content offset after sliding (slide the stopped point), The default returns the value of the Proposedcontentoffset parameter, where we can return the actual offset we need, as described in demo-(void) Prepareforcollectionviewupdates: (Nsarray *) Updateitemsnotifies the Layout object that the contents of the collection view is about to change. Notifies the contents of the layout objects CollectionView Will change

The example code can refer to the two posts I wrote earlier:

iOS with Uicollectionview for gallery effects
IOS Uicollectionview for waterfall streaming

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

"Official iOS document Translator" Uicollectionview and Uicollectionviewflowlayout