ios - Collectionview custom cell layout/behaviour -

i'm working collectionview, sliding horizontally, , trying custom layout of cells, similar iphone "app closer". have no idea how achieve effect this, or start, hoping pointers. i'm bad @ explaining myself, i've tried illustrating desired effect, how behaves now, till how should behave.

thanks in advance!

i have worked similar view this.this github link of project. difference between requirement , view need zoom left cell too. achieve view encountered 2 major problem:

1) stopping scroll when 2 cell(left cell , right cell) equally exposed, have included following code in collectionview.m file.

- (void)scrollviewwillenddragging:(uiscrollview *)scrollview withvelocity:(cgpoint)velocity targetcontentoffset:(inout cgpoint *)targetcontentoffset {     float pagewidth = 240; // width + space      float currentoffset = scrollview.contentoffset.x;     float targetoffset = targetcontentoffset->x;     float newtargetoffset = 0;      if (targetoffset > currentoffset)         newtargetoffset = ceilf(currentoffset / pagewidth) * pagewidth;     else         newtargetoffset = floorf(currentoffset / pagewidth) * pagewidth;      if (newtargetoffset < 0)         newtargetoffset = 0;     else if (newtargetoffset > scrollview.contentsize.width)         newtargetoffset = scrollview.contentsize.width;      targetcontentoffset->x = currentoffset;     [scrollview setcontentoffset:cgpointmake(newtargetoffset, 0) animated:yes];      int index = newtargetoffset / pagewidth;      if (index == 0) { // if first index         collectionviewcell *cell =(collectionviewcell *) [self cellforitematindexpath:[nsindexpath indexpathforitem:index  insection:0]];         cell.transform = cgaffinetransformidentity;         cell = (collectionviewcell *)[self cellforitematindexpath:[nsindexpath indexpathforitem:index + 1  insection:0]];         //cell.transform = transform_cell_value;      }else{         collectionviewcell *cell =(collectionviewcell *)[self cellforitematindexpath:[nsindexpath indexpathforitem:index insection:0]];         //cell.transform = cgaffinetransformidentity;          index --; // left         cell =(collectionviewcell *)[self cellforitematindexpath:[nsindexpath indexpathforitem:index insection:0]];           //  cell.transform = transform_cell_value;         index ++;         index ++; // right         cell = (collectionviewcell *)[self cellforitematindexpath:[nsindexpath indexpathforitem:index insection:0]];         //cell.transform = transform_cell_value;     } }  

2) secondly need provide proper constraint cell achieve requirement, have used uicollectionviewflowlayout class. in provide proper constraint visible cells. flowlayout code looks below:

#import "collectionlayout.h"   @implementation collectionlayout {     nsindexpath *mainindexpath; }  -(void)preparelayout{     [super preparelayout]; }  -(uicollectionviewlayoutattributes *)layoutattributesforitematindexpath:(nsindexpath *)indexpath{      uicollectionviewlayoutattributes *attributes = [[super layoutattributesforitematindexpath:indexpath] copy];     catransform3d thetransform = catransform3didentity;     const cgfloat thescale = 1.05f;     thetransform = catransform3dscale(thetransform, thescale, thescale, 1.0f);     attributes.transform3d=thetransform;     return attributes; }  - (bool)shouldinvalidatelayoutforboundschange:(cgrect)newbounds {     return yes; }  - (nsarray *)layoutattributesforelementsinrect:(cgrect)rect{     nsarray *attributessuper = [super layoutattributesforelementsinrect:rect];     nsarray *attributes = [[nsarray alloc]initwitharray:attributessuper copyitems:yes];     nsarray *cellindices = [self.collectionview indexpathsforvisibleitems];     nsindexpath *neededindexpath = [nsindexpath indexpathforrow:0 insection:0];     for(nsinteger i=0;i<cellindices.count;i++){         nsindexpath *indexpath = [cellindices objectatindex:i];         if(indexpath.row>neededindexpath.row){             neededindexpath=indexpath;         }         nslog(@"%ld,%ld",(long)indexpath.row,(long)indexpath.section);     }     if(cellindices.count==0){         mainindexpath = [nsindexpath indexpathforrow:0 insection:0];     }else{         if(neededindexpath.row>0)             mainindexpath = [nsindexpath indexpathforrow:neededindexpath.row-1 insection:0];     }      (uicollectionviewlayoutattributes *attribute in attributes)     {         [self applytransformtolayoutattributes:attribute];     }     return attributes; }  -(void) applytransformtolayoutattributes:(uicollectionviewlayoutattributes *)attribute{     if(attribute.indexpath.row == mainindexpath.row){         attribute.size = cgsizemake(self.collectionview.bounds.size.width-40, self.collectionview.bounds.size.height);         attribute.zindex+=10;     } }  #pragma mark - transform related  @end 

once clone project github link, understand have done , can write own code achieve view.you need provide constraint in part of code. you need adjust zindex each cell.

 -(void) applytransformtolayoutattributes:(uicollectionviewlayoutattributes *)attribute{         if(attribute.indexpath.row == mainindexpath.row){             attribute.size = cgsizemake(self.collectionview.bounds.size.width-40, self.collectionview.bounds.size.height);             attribute.zindex+=10;         }     } 

i hope got point.

note: have tested github code on iphone 5s, might need tweak little bit other devices.