Collection View Customized layout (custom flow layout)

Collection View custom layouts

In general, our custom layouts create a new class, inherit from Uicollectionviewflowlayout, and then rewrite several methods:

• Preparelayout (): Call this method when you are ready to start the layout, where you can calculate some properties, such as the cell size.
• Layoutattributesforelementsinrect (Rect:cgrect), [uicollectionviewlayoutattributes]?: Returns the layout properties here.

examples (more simple examples, more encapsulation can be done in real-world development)Step One: Declare two properties

    MARK: Attribute    /** Number of cells */    var itemcount:int?        /** Layout information *    /var layoutattributes = [Uicollectionviewlayoutattributes] ()

Step Two: Override the Preparelayout method to calculate layout properties

    MARK: Prepare    The layout override func Preparelayout () {        super.preparelayout ()                //compute the width of each cell let width        = ( Uiscreen.mainscreen (). bounds.size.width-self.sectioninset.left-self.sectioninset.right-minimuminteritemspacing )/2.0                ///Determine if the ItemCount is empty        if itemCount! = nil {            ///Start calculating the layout properties of each cell            Calculationattribute (withitemwidth : width)        }    }

Func Calculationattribute (Withitemwidth itemwidth:cgfloat) {//Declaration array holds the total height of each column (two columns) let Column1 = Sectionin Set.top, Column2 = sectioninset.top var columnarray: [CGFloat] = [Column1, Column2] for index in 0.. <itemcount!            {//Create Indexpath because it is an example so the typography is fixed in a set of let Indexpath = Nsindexpath (Foritem:index, insection:0)            Create layout properties by Indexpath let attribute = Uicollectionviewlayoutattributes (Forcellwithindexpath:indexpath) Create a random height let itemheight = cgfloat (Arc4random ()%150 + +)//ColumnNumber record defined  Which column is Var columnnumber:cgfloat if columnarray[0] < columnarray[1] {columnarray[0]  + = ItemHeight + self.minimumlinespacing columnnumber = 0} else {columnarray[1]          + = ItemHeight + self.minimumlinespacing columnnumber = 1}//Setting the location of item  Let x = Self.sectionInset.left + (self.minimumlinespacing + itemwidth) * ColumnNumber let y = columnarray[int (ColumnNumber)]                        -Itemheight-self.minimumlinespacing Attribute.frame = CGRectMake (x, Y, Itemwidth, ItemHeight) Layoutattributes.append (attribute)}//After setting all the item locations, you need to set the itemsize so that all cells//it can be displayed when scrolling The height property of the emsize is the average of the highest column if columnarray[0] > columnarray[1] {self.itemsize = Cgsizemake (itemwidth , (Columnarray[0]-sectioninset.top) * 2/cgfloat (itemcount!)-self.minimumlinespacing)} else {self . itemsize = Cgsizemake (Itemwidth, (columnarray[1]-sectioninset.top) * 2/cgfloat (itemcount!)-self.minimumLineSpacing )        }    }

Step Three: Return to the layout information array

    Override func Layoutattributesforelementsinrect (Rect:cgrect), [uicollectionviewlayoutattributes]? {        return layoutattributes    }

Summary: This example is the layout of the waterfall flow, if other layouts need to be calculated when the layout is prepared, and then return to the layout information array.

Collection View Customized layout (custom flow layout)