Ios:uicollectionview Pure custom layouts: stacked layouts, round layouts (typically used to create albums)

Source: Internet
Author: User
Tags uikit

Automatic layout of the collection view: Uicollectionviewlayout is an abstract root class, you must use its subclasses to create an instance, the following is the overridden method, which evaluates the item's layout properties

Layouts are prepared before each re-layout (Apple recommends using this method for some initialization)

-(void) preparelayout

Override Layoutattributesforitematindexpath to return the layout properties of each item (flow layout has been helped to complete)

-(Uicollectionviewlayoutattributes *) Layoutattributesforitematindexpath: (Nsindexpath *) IndexPath

Whether you want to refresh the layout again (re-layout as soon as the item boundary of the display changes)

As long as each re-layout is internally called the following layoutattributesforelementsinrect: Gets the properties of all cell (item)

-(BOOL) Shouldinvalidatelayoutforboundschange: (CGRect) newbounds

Returns the properties of all item that need to be re-laid

-(nsarray*) Layoutattributesforelementsinrect: (cgrect) rect

?? The following two layouts can be taken directly away from use, do not need to do any other operation, oh yes

The stacked layout code is as follows:

CustomStackLayout.h

#Import <UIKit/UIKit.h>@interface  customstacklayout: Uicollectionviewlayout@end

Customstacklayout.m

#Import"CustomStackLayout.h"#define Random_0_1 Arc4random_uniform (100)/100.0/*since Customstacklayout is directly inherited from Uicollectionviewlayout, the parent class does not help it with any layout, so it requires the user to completely re-layout each item, Also set their layout properties Uicollectionviewlayoutattributes*/@implementation Customstacklayout//rewrite the Shouldinvalidatelayoutforboundschange, which is automatically called every time the rewrite layout is inside-(BOOL) Shouldinvalidatelayoutforboundschange: (cgrect) newbounds{returnYES;}//rewrite collectionviewcontentsize, you can let CollectionView scroll-(cgsize) collectionviewcontentsize{returnCgsizemake (400, 400);}//override Layoutattributesforitematindexpath to return the layout properties for each item-(Uicollectionviewlayoutattributes *) Layoutattributesforitematindexpath: (Nsindexpath *) indexpath{//creating a layout instanceUicollectionviewlayoutattributes *attrs =[Uicollectionviewlayoutattributes Layoutattributesforcellwithindexpath:indexpath]; //Set layout PropertiesAttrs.size = cgsizemake (100, 100); Attrs.center= Cgpointmake (self.collectionview.frame.size.width*0.5, self.collectionview.frame.size.height*0.5); //Set Rotation direction//int direction = (i% 2 ==0)? 1:1;Nsarray*directions = @[@0.0,@1.0,@ (0.05), @ (-1.0), @ (-0.05)]; //Show only 5 photos    if(Indexpath.item >= 5) {Attrs.hidden=YES; }    Else    {        //Start RotationAttrs.transform =cgaffinetransformmakerotation ([Directions[indexpath.item]floatvalue]); //The larger the ZIndex value, the more the picture is on topAttrs.zindex = [Self.collectionview numberOfItemsInSection:indexPath.section]-Indexpath.item; }    returnattrs;}//override Layoutattributesforelementsinrect to set layout properties for all cells (including item, header, footer)-(Nsarray *) Layoutattributesforelementsinrect: (cgrect) rect{Nsmutablearray*arraym =[Nsmutablearray array]; Nsinteger Count= [Self.collectionview numberofitemsinsection:0]; //Create and set layout properties for each item     for(inti = 0; I < count; i++)    {        //Create layout properties for itemUicollectionviewlayoutattributes *attrs = [self Layoutattributesforitematindexpath:[nsindexpath indexPathForItem:i insection:0]];    [Arraym Addobject:attrs]; }    returnArraym;} @end

The circular layout code is as follows:

CustomCircleLayout.h

#Import <UIKit/UIKit.h>@interface  customcirclelayout: Uicollectionviewlayout@end

Customcirclelayout.m

#Import"CustomCircleLayout.h"@implementation Customcirclelayout//rewrite the Shouldinvalidatelayoutforboundschange, which is automatically called every time the rewrite layout is inside-(BOOL) Shouldinvalidatelayoutforboundschange: (cgrect) newbounds{returnYES;}//override Layoutattributesforitematindexpath to return the layout properties for each item-(Uicollectionviewlayoutattributes *) Layoutattributesforitematindexpath: (Nsindexpath *) indexpath{//creating a layout instanceUicollectionviewlayoutattributes *attrs =[Uicollectionviewlayoutattributes Layoutattributesforcellwithindexpath:indexpath]; //set the size of the itemAttrs.size = Cgsizemake (50, 50); //set the radius of a circleCGFloat Circleradius = 70; //Set the center point of a circleCgpoint circlecenter = Cgpointmake (self.collectionview.frame.size.width*0.5, Self.collectionView.frame.size.height *0.5); //calculate the angle between each itemCGFloat Angledelta = M_PI/[Self.collectionview numberOfItemsInSection:indexPath.section]; //calculate the angle of the current itemCGFloat angle = Indexpath.item *Angledelta; //calculates the center of the current itemCGFloat x = circlecenter.x + cos (angle) *Circleradius; CGFloat y= Circlecenter.y-sin (Angle) *Circleradius; //Locate the current item locationAttrs.center =cgpointmake (x, y); //The order of the item is set, the later is displayed in the frontAttrs.zindex =Indexpath.item; returnattrs;}//override Layoutattributesforelementsinrect to set layout properties for all cells (including item, header, footer)-(Nsarray *) Layoutattributesforelementsinrect: (cgrect) rect{Nsmutablearray*arraym =[Nsmutablearray array]; Nsinteger Count= [Self.collectionview numberofitemsinsection:0]; //Create and set layout properties for each item     for(inti = 0; I < count; i++)    {        //Create layout properties for itemUicollectionviewlayoutattributes *attrs = [self Layoutattributesforitematindexpath:[nsindexpath indexPathForItem:i insection:0]];    [Arraym Addobject:attrs]; }    returnArraym;} @end

Stacked Layout Demo: Round layout Demo:

Ios:uicollectionview Pure custom layouts: stacked layouts, round layouts (typically used to create albums)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.