Uicollectionview custom Layout cellular Layout

The layout of uicollectionview on the Internet. The cell shapes are mostly Rectangles and circles.

This article uses the regular hexagonal form as the basic cell shape to show you the unique cellular layout effect and source code.

It helps you make your apps stand out and stand out from each other.

Latest complete code: https://github.com/duzixi/Varied-Layouts

Blog address: http://blog.csdn.net/duzixi

Implementation:

Core source code:

Custom Layout

/// Honeycomblayout. h // demo-layouts /// created by duzixi on 14-9-1. // copyright (c) 2014 lanou3g.com All Rights Reserved. // # import <uikit/uikit. h> @ interface honeycomblayout: uicollectionviewlayout @ property (nonatomic, assign) nsinteger margin; @ property (nonatomic, assign) nsinteger ox; @ property (nonatomic, assign) nsinteger Oy; @ end

/// Honeycomblayout. M // demo-layouts /// created by duzixi on 14-9-1. // copyright (c) 2014 lanou3g.com All Rights Reserved. // # import "honeycomblayout. H "@ implementation honeycomblayout // the size of the returned content, used to determine whether to accelerate the slide-(cgsize) collectionviewcontentsize {float Height = (size + self. margin) * ([self. collectionview numberofitemsinsection: 0]/4 + 1); Return cgsizemake (320, height);} // return YES, change layout/*-(bool) shouldinvalidatelayoutforboundschange :( cgrect) newbounds {return yes;} */# pragma mark-uicollectionviewlayout // generate Layout features for each item-(uicollectionviewlayoutattributes *) layoutattriattributesforitematindexpath :( nsindexpath *) indexpath {uicollectionviewlayoutattributes * attributes = [uicollectionviewlayoutattributes layoutbutesforcellwithindexpath: indexpath]; uicollectionview * Collection = self. collectionview; float x = (size + self. margin) * (indexpath. item % Col + 1) * 0.75; float y = (size + self. margin) * (indexpath. item/COL + 0.5) * Cos (m_pi * 30366f/180.0f); If (indexpath. item % 2 = 1) {Y + = (size + self. margin) * 0.5 * cosf (m_pi * 30366f/180.0f);} X + = self. ox; y + = self. oy; attributes. center = cgpointmake (x + collection. contentoffset. x, Y + collection. contentoffset. y); attributes. size = cgsizemake (size, size * Cos (m_pi * 30366f/180.0f); Return attributes;}-(nsarray *) layoutattributesforelementsinrect :( cgrect) rect {nsarray * arr = [Super layoutattributesforelementsinrect: rect]; If ([arr count]> 0) {return arr;} nsmutablearray * attributes = [nsmutablearray array]; for (nsinteger I = 0; I <[self. collectionview numberofitemsinsection: 0]; I ++) {nsindexpath * indexpath = [nsindexpath indexpathforitem: I insection: 0]; [attributes addobject: [self layoutattributesforitematindexpath: indexpath];} return attributes;} @ end

Custom cell:

/// Honeycombviewcell. h // demo-layouts /// created by duzixi on 14-9-1. // copyright (c) 2014 lanou3g.com All Rights Reserved. // # import <uikit/uikit. h> @ interface honeycombviewcell: uicollectionviewcell @ property (nonatomic, strong) uilabel * titlelabel; @ end

/// Honeycombviewcell. M // demo-layouts /// created by duzixi on 14-9-1. // copyright (c) 2014 lanou3g.com All Rights Reserved. // # import "honeycombviewcell. H "@ implementation honeycombviewcell-(ID) initwithframe :( cgrect) frame {self = [Super initwithframe: frame]; If (Self) {// initialization code self. titlelabel = [[uilabel alloc] init]; self. titlelabel. textcolor = [uicolor whitecolor]; [self. contentview addsubview: Self. titlelabel];} return self;}-(void) layoutsubviews {[Super layoutsubviews]; // Step 1: generate the hexagonal path cgfloat longside = size * 0.5 * cosf (m_pi * 30/180); cgfloat lateral side = size * 0.5 * sin (m_pi * 30/180); uibezierpath * Path = [uibezierpath bezierpath]; [path movetopoint: cgpointmake (0, longside)]; [path addlinetopoint: cgpointmake (lateral side, 0)]; [path addlinetopoint: cgpointmake (lateral side + size * 0.5, 0)]; [path addlinetopoint: cgpointmake (size, longside)]; [path addlinetopoint: cgpointmake (lateral side + size * 0.5, longside * 2)]; [path addlinetopoint: cgpointmake (lateral side, longside * 2)]; [path closepath]; // Step 2: generate a mask cashapelayer * masklayer = [cashapelayer layer]; masklayer. path = [path cgpath]; // Step 3: add the template self to the cell. layer. mask = masklayer; self. backgroundcolor = [uicolor orangecolor]; self. titlelabel. textalignment = nstextalignmentcenter; self. titlelabel. frame = self. contentview. frame;}/* // only override drawrect: If you perform custom drawing. // an empty implementation adversely affects performance during animation. -(void) drawrect :( cgrect) rect {// drawing code} */@ end

Uicollectionview custom Layout cellular Layout