iOS Streaming layout Uicollectionview series seven--three-dimensional spherical layout

 Summary: Similar to the spherical layout of the tag cloud, also similar to the 3D layout of the Rubik's Cube iOS flow layout Uicollectionview series seven--three-dimensional spherical layout I. Introduction

Through 6 blogs, from the layout of the simplest rules placed on the plane, to the irregular waterfall flow layout, to the ring layout in the plane, we broke through the limitations of the linear layout, and in the latter we expanded the layout to space and panned on the z axis. We implemented a similar Uipickerview layout model, in fact, we can further, analogy to the plane layout, pickerview just linear arrangement of the layout in the space of the rotation and translation, this time, we are more full use of space dimensions, to design a spherical layout model. Here are the previous blog addresses:

1. Initial knowledge and simple practical uicollectionview:http://my.oschina.net/u/2340880/blog/522613

Proxy method for 2.UICollectionView: http://my.oschina.net/u/2340880/blog/522682

3. Practical FlowLayout For more flexible layout: http://my.oschina.net/u/2340880/blog/522748

4. Custom FlowLayout for Waterfall flow layout: http://my.oschina.net/u/2340880/blog/522806

5. Implementation of the Planar ring layout: http://my.oschina.net/u/2340880/blog/523064

6. Apply the layout from the plane to the space: http://my.oschina.net/u/2340880/blog/523341

Second, expand the layout to the space ball type

In Viewcontroller, you first implement some preparation code:

- (void) Viewdidload {[Super Viewdidload];Additional setup after loading the view, typically from a nib. Mylayout * layout = [[Mylayout alloc]init];Uicollectionview * collect = [[Uicollectionview Alloc]initwithframe:CGRectMake (0,0,320,(+) collectionviewlayout:layout]; Collect.delegate=Self Collect.datasource=SelfThe offset set here is for seamless looping scrolling, specifically explained in the previous blog Collect.contentoffset =Cgpointmake (320,400); [Collect registerclass:[UicollectionviewcellClass] Forcellwithreuseidentifier:@ "Cellid"]; [Self.view Addsubview:collect];} -(Nsinteger) Numberofsectionsincollectionview: (Uicollectionview *) collectionview{Return1;}We return 30 of the label-(Nsinteger) CollectionView: (Uicollectionview *) CollectionView numberofitemsinsection: (Nsinteger) section{Return30;} -(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];UILabel * label = [[UILabel Alloc]initwithframe:CGRectMake (0,0,30,30)]; Label.text = [NSString stringWithFormat:@ "%ld", (Long) Indexpath.row]; [Cell.contentview Addsubview:label];return cell;} - (void) Didreceivememorywarning {[Super didreceivememorywarning];Dispose of any resources the can be recreated.}Here, the sliding contentoffset is monitored to achieve cyclic scrolling-(void) Scrollviewdidscroll: (Uiscrollview *) scrollview{if (scrollview.contentoffset.y<(+) {Scrollview.contentoffset =Cgpointmake (Scrollview.contentoffset.x, scrollview.contentoffset.y+10*400); }Elseif (scrollview.contentoffset.y>11*(+) {Scrollview.contentoffset =Cgpointmake (Scrollview.contentoffset.x, Scrollview.contentoffset.y-10*400);    }     if  (Scrollview.contentoffset.x<160)  {         scrollview.contentoffset =  Cgpointmake (Scrollview.contentoffset.x+10*320, SCROLLVIEW.CONTENTOFFSET.Y);     }else  if (Scrollview.contentoffset.x>11* 320) {        scrollview.contentoffset =  cgpointmake (Scrollview.contentoffset.x-10*320,scrollview.contentoffset.y);     }      

This code in the comparison of the previous blog and there is no big change, just do a horizontal line of compatibility.

In our layout class, modify the code to read as follows:

-(void) preparelayout{[Super Preparelayout]; }The scroll range returned increases the compatibility of the x-axis-(Cgsize) collectionviewcontentsize{ReturnCgsizemake (Self.collectionview.frame.size.width* ([Self.collectionview numberofitemsinsection:0]+2),self.collectionview.frame.size.height* ([Self.collectionview numberofitemsinsection:0]+2));} -(BOOL) Shouldinvalidatelayoutforboundschange: (CGRect) newbounds{ReturnYES;} -(Uicollectionviewlayoutattributes *) Layoutattributesforitematindexpath: (Nsindexpath *) indexpath{Uicollectionviewlayoutattributes * Atti = [Uicollectionviewlayoutattributes Layoutattributesforcellwithindexpath:indexpath];Get the number of itemint itemcounts = (int) [Self.collectionview numberofitemsinsection:0]; Atti.center =Cgpointmake (self.collectionview.frame.size.width/2 +Self.collectionview.contentoffset.x,self.collectionview.frame.size.height/2 +SELF.COLLECTIONVIEW.CONTENTOFFSET.Y); Atti.size =Cgsizemake (30,30);Catransform3d Trans3D =catransform3didentity; TRANS3D.M34 =-1/900.0;CGFloat radius =15/TANF (m_pi*2/itemcounts/2);Change angle based on offsetAn offset of X was addedfloat offsety =Self.collectionview.contentoffset.y;float OffsetX =Self.collectionview.contentoffset.x;Calculate the angle of the offset separatelyfloat angleoffsety = offsety/Self.collectionView.frame.size.height;float Angleoffsetx = offsetx/Self.collectionView.frame.size.width;CGFloat angle1 = (float) (indexpath.row+angleoffsety-1)/itemcounts*m_pi*2;The default direction of x, Y is reversedCGFloat Angle2 = (float) (Indexpath.row-angleoffsetx-1)/itemcounts*m_pi*2;Here we are arranging in four directions.if (indexpath.row%4==1) {Trans3D =Catransform3drotate (Trans3D, Angle1,1.0,0,0); }Elseif (indexpath.row%4==2) {Trans3D =Catransform3drotate (Trans3D, Angle2,0,1,0); }Elseif (indexpath.row%4==3) {Trans3D =Catransform3drotate (Trans3D, Angle1,0.5,0.5,0); }else{Trans3D =Catransform3drotate (Trans3D, Angle1,0.5,-0.5,0); } Trans3D =Catransform3dtranslate (Trans3D,0,0, RADIUS); Atti.transform3d = Trans3D;return Atti;} -(nsarray<Uicollectionviewlayoutattributes *> *) Layoutattributesforelementsinrect: (cgrect) rect{    NSMutableArray  * attributes = [[nsmutablearray alloc]init];     //traversal sets the layout properties of each item     for   (int i=0; i<[ self.collectionview numberofitemsinsection:0];  i++)  {        [attributes addobject:[ Self layoutattributesforitematindexpath:[nsindexpath indexpathforitem:i  insection:0]]];    }    return attributes;}            

The layout effect is as follows:

Slide the screen, the ball can be scrolled.

Tip: Here we only distribute the layout in four directions evenly, and if item is smaller and more, we can assign it to more directions and make the sphere more fulfilling.

iOS Streaming layout Uicollectionview series seven--three-dimensional spherical layout