Custom UICollectionViewLayout Different Cell Sizes - ios

Question

I want to make custom UICollectionViewLayout like this.
http://i.stack.imgur.com/aWUIa.jpg
When I scroll second page image size not fit the cell sizes;
http://i.stack.imgur.com/GOUmF.jpg
And turn back first page again;
http://i.stack.imgur.com/lQQ3h.png
Image sizes and cell sizes not fit each other.
Here my custom layout code;
//
// SeyahatLayout.m
// SeyahatTrend
//
// Created by Mehmet Can Yavuz on 03.06.2013.
// Copyright (c) 2013 Mehmet Can Yavuz. All rights reserved.
//
#import "SeyahatLayout.h"
#import "SeyahatLayoutAttributes.h"
#define kNumberOfItemsPerPage 5
static NSString * const BHPhotoAlbumLayoutPhotoCellKind = #"PhotoCell";
#interface SeyahatLayout ()
#property (nonatomic, strong) NSDictionary *layoutInfo;
#end
#implementation SeyahatLayout
- (CGSize)collectionViewContentSize
{
// Ask the data source how many items there are (assume a single section)
id<UICollectionViewDataSource> dataSource = self.collectionView.dataSource;
int numberOfItems = [dataSource collectionView:self.collectionView
numberOfItemsInSection:0];
// Determine how many pages are needed
int numberOfPages = ceil((float)numberOfItems/(float)kNumberOfItemsPerPage);
// Set the size
float pageWidth = self.collectionView.frame.size.width;
float pageHeight = self.collectionView.frame.size.height;
CGSize contentSize = CGSizeMake(numberOfPages * pageWidth, pageHeight);
return contentSize;
}
#pragma mark - Layout
- (void)prepareLayout
{
NSMutableDictionary *newLayoutInfo = [NSMutableDictionary dictionary];
NSMutableDictionary *cellLayoutInfo = [NSMutableDictionary dictionary];
NSInteger sectionCount = [self.collectionView numberOfSections];
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:0 inSection:0];
for (NSInteger section = 0; section < sectionCount; section++) {
NSInteger itemCount =
[self.collectionView numberOfItemsInSection:section];
for (NSInteger item = 0; item < itemCount; item++) {
indexPath = [NSIndexPath indexPathForItem:item inSection:section];
SeyahatLayoutAttributes* attr =
[self layoutAttributesForItemAtIndex:item];
// UICollectionViewLayoutAttributes *itemAttributes =
// [UICollectionViewLayoutAttributes
// layoutAttributesForCellWithIndexPath:indexPath];
// itemAttributes.frame = [self frameForAlbumPhotoAtIndexPath:indexPath];
[cellLayoutInfo setObject:attr forKey:indexPath];
}
}
newLayoutInfo[BHPhotoAlbumLayoutPhotoCellKind] = cellLayoutInfo;
self.layoutInfo = newLayoutInfo;
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:
(NSIndexPath *)indexPath {
return self.layoutInfo[BHPhotoAlbumLayoutPhotoCellKind][indexPath];
}
-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
{
// NSInteger itemCount = [self.collectionView numberOfItemsInSection:0];
// NSMutableArray* attributes = [NSMutableArray array];
// for (NSInteger i=0 ; i < itemCount; i++) {
// NSIndexPath* indexPath = [NSIndexPath indexPathForItem:i
inSection:0];
// [attributes addObject:
[self layoutAttributesForItemAtIndexPath:indexPath]];
// }
// return attributes;
NSLog(#"RECTX: %f",rect.origin.x );
NSLog(#"RECTY: %f",rect.origin.y );
NSLog(#"RECTWIDTH: %f",rect.size.width );
NSLog(#"RECTHEIGHT: %f",rect.size.height );
id<UICollectionViewDataSource> dataSource = self.collectionView.dataSource;
int numberOfItems = [dataSource collectionView:self.collectionView
numberOfItemsInSection:0];
NSMutableArray* attributes = [NSMutableArray array];
int page = rect.origin.x / 1024.0;
if(numberOfItems>0){
for(NSInteger i = 0; i<kNumberOfItemsPerPage; i++){
int x = page*kNumberOfItemsPerPage + i;
NSLog(#"%d",x);
NSIndexPath* indexPath = [NSIndexPath indexPathForItem:x inSection:0];
[attributes addObject:self.layoutInfo[BHPhotoAlbumLayoutPhotoCellKind]
[indexPath]];
}
return attributes;
}
else
return nil;
}
- (SeyahatLayoutAttributes *)layoutAttributesForItemAtIndex:(int)index
{
NSIndexPath *path = [NSIndexPath indexPathForItem:index inSection:0];
SeyahatLayoutAttributes *attributes =
(SeyahatLayoutAttributes *)[UICollectionViewLayoutAttributes
layoutAttributesForCellWithIndexPath:path];
// Figure out what page this item is on
int pageNumber = floor((float)index / (float) kNumberOfItemsPerPage);
// Set the horizontal offset for the start of the page
float pageWidth = self.collectionView.frame.size.width;
float horizontalOffset = pageNumber * pageWidth;
// Now, determine which position this cell occupies on the page.
int indexOnPage = index % kNumberOfItemsPerPage;
int column = 0;
switch (indexOnPage) {
case 0:
case 1:
column = 0;
break;
case 2:
case 3:
case 4:
column = 3;
break;
default:
column = 0;
break;
}
int row = 0;
switch (indexOnPage) {
case 0:
case 2:
row = 0;
break;
case 3:
row = 1;
break;
case 1:
case 4:
row = 2;
break;
default:
row = 0;
break;
}
horizontalOffset = horizontalOffset + ((175.0 + 30.0) * column) + 30.0;
float verticalOffset = (194.0 + 30.0) * row + 30.0;
// finally, determine the size of the cell.
float width = 0.0;
float height = 0.0;
switch (indexOnPage) {
case 0:
width = 585.0;
height = 418.0;
break;
case 1:
width = 585.0;
height = 194.0;
break;
default:
width = 350.0;
height = 194.0;
break;
}
CGRect frame = CGRectMake(horizontalOffset, verticalOffset, width, height);
[attributes setFrame:frame];
return attributes;
}
+ (Class)layoutAttributesClass
{
return [SeyahatLayoutAttributes class];
}
#end
Here my custom uicollectionviewcell code;
//
// SeyahatCell.m
// SeyahatTrend
//
// Created by Mehmet Can Yavuz on 03.06.2013.
// Copyright (c) 2013 Mehmet Can Yavuz. All rights reserved.
//
#import "SeyahatCell.h"
#import "PNCollectionCellBackgroundView.h"
#implementation SeyahatCell
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
//self.backgroundColor = [UIColor whiteColor];
PNCollectionCellBackgroundView* backgroundView =
[[PNCollectionCellBackgroundView alloc] initWithFrame:frame];
self.backgroundView = backgroundView;
self.imageView =
[[UIImageView alloc] initWithFrame:CGRectMake(5,
5,
frame.size.width-10,
frame.size.height-10)];
[self.contentView addSubview:self.imageView];
}
return self;
}
And my cellForItemAtIndexPath method;
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
SeyahatCell *seyahatCell =
[collectionView dequeueReusableCellWithReuseIdentifier:SeyahatCellIdentifier
forIndexPath:indexPath];
Post * p = [self.posts objectAtIndex:indexPath.row];
[seyahatCell.imageView setImage:nil];
if(p.thumbnail){
[seyahatCell.imageView setImageWithURL:[NSURL URLWithString:p.thumbnail]];
}
else{
[seyahatCell.imageView setImage:nil];
}
return seyahatCell;
}
How can i fix this problem?

Answer 1

Try to use existing solutions for layouts. For this purpose i prefer to use https://github.com/bryceredd/RFQuiltLayout