iOS Flow Layout Uicollectionview series five--implementation of the ring layout

iOS Flow Layout Uicollectionview series five--implementation of the ring layoutFirst, Introduction

In front of a few blogs, we understand the basic usage of uicollectionview and some extensions, in the unsteady waterfall flow layout, we find that You can set the specific location of each item by setting the concrete Layout property class Uicollectionviewlayoutattributes, we can expand it again, if we can control the position freely, we can be more flexible in that layout, For example, create a circlelayout like this:

This layout is also described in Apple's official documentation and is an example of an application for Uicollectionview.

Second, design a ring layout

Then our previous idea, still when the color of the random color block to express our item, first customize a layout class, this class inherits from Uicollectionviewlayout,uicollectionlayout is a layout abstract base class, We're going to use a custom layout, we have to subclass it, and maybe you remember that we used the Uicollectionviewflowlayout class when we were doing the waterfall flow layout, which is inherited from the Uicollectionviewlayout class, System for us to achieve a good layout solution.

@interface mylayout:uicollectionviewlayout//This int value stores the number of Item@property (nonatomic,assign) int itemCount; @end

We need to rewrite the three methods of this class to set the ring layout, first of all preparelayout, to do some preparation for the layout, to use Collectionviewcontentsize to set the area of the content, Finally, using the Layoutattributesforelementsinrect method to return to our layout information dictionary, this front waterfall flow layout idea is the same:

@implementation  mylayout{    nsmutablearray * _attributeattay;} -(void) preparelayout{    [super preparelayout];    //gets the number of item     _itemCount =  (int) [self.collectionview numberofitemsinsection:0];     _attributeattay = [[nsmutablearray alloc]init];    // Set the radius of the large circle   take long and wide shortest     cgfloat radius = min ( Self.collectionview.frame.size.width, self.collectionview.frame.size.height)/2;    // Calculates the center position     cgpoint center = cgpointmake (self.collectionView.frame.size.width /2,&NBSP;SELF.COLLECTIONVIEW.FRAME.SIZE.HEIGHT/2);     //sets the size of each item to 50*50  with a radius of 25     for  (int i=0; i<_itemcount; i++)  {         uicollectionviewlayoutattributes * attris = [uicollectionviewlayoutattributes layoutattributesforcellwithindexpath:[ nsindexpath indexpathforitem:i insection:0]];        // Set Item size         attris.size = cgsizemake (50,&NBSP;50);         //calculates the center position of each item         /*          .         .  .         .   . r          .     .          .........         */         //calculates the coordinates of each item center         //the X y value calculated by subtracting the radius of the item itself      &nbSP;&NBSP;&NBSP;FLOAT&NBSP;X&NBSP;=&NBSP;CENTER.X+COSF (2*m_pi/_itemcount*i) * (radius-25);         float y = center.y+sinf (2*m_pi/_itemcount*i) * (radius-25);              attris.center = cgpointmake ( X, y);        [_attributeattay addobject:attris];     }           }//setting the size of the content area-(CGSize) Collectionviewcontentsize{    return self.collectionview.frame.size;} Returns the set array-(nsarray<uicollectionviewlayoutattributes *> *) Layoutattributesforelementsinrect: ( CGRect) Rect{    return _attributeattay;}

The code in Viewcontroller is as follows:

-  (void) viewdidload {    [super viewdidload];    //  Do any additional setup after loading the view, typically  From a nib.    mylayout * layout = [[mylayout alloc] Init];     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];} -(Nsinteger) Numberofsectionsincollectionview: (uicollectionview *) collectionview{     return 1;} -(Nsinteger) CollectionView: (Uicollectionview *) Collectionview numberofitemsinsection: (Nsinteger) Section{    return  10;} -(uicollectionviewcell *) CollectionView: (uicollectionview *) collectionview  Cellforitematindexpath: (nsindexpath *) indexpath{    uicollectionviewcell *  cell  = [collectionview dequeuereusablecellwithreuseidentifier:@ "Cellid"  forIndexPath :indexpath];    cell.layer.maskstobounds = yes;     cell.layer.cornerradius = 25;    cell.backgroundcolor = [uicolor  Colorwithred:arc4random ()%255/255.0 green:arc4random ()%255/255.0 blue:arc4random ()%255/255.0  Alpha:1];    return cell;}

As with some very simple logic controls, we implement the O-ring layout, with the number of item, the layout will automatically adjust, if not uicollectionview credit, to achieve such a function, we may have to write for a while ^_^.

iOS Flow Layout Uicollectionview series five--implementation of the ring layout