Customized Grid View with Different Items for Odd and Even Indexes - iphone

Question

I have used this custom grid view in my code, and I want to create a grid view which looks like this:
How should I do this in the code? Here's the setup method for items:
- (void)setupItemViews {
for (UIView *view in self.itemViews) {
[view removeFromSuperview];
}
for (UIImageView *image in self.images) {
[image removeFromSuperview];
}
[self.images removeAllObjects];
[self.itemViews removeAllObjects];
// now add the new objects
NSUInteger numItems = [self.menuDelegate menuViewNumberOfItems:self];
for (NSUInteger i = 0; i < numItems; i++) {
GridMenuItemView *itemView = [[GridMenuItemView alloc] init];
GridMenuItem *menuItem = [self.menuDelegate menuView:self itemForIndex:i];
itemView.frame = CGRectMake(0, 0, self.itemSize.width, self.itemSize.height);
itemView.label.text = menuItem.title;
//itemView.imageView.image = menuItem.icon;
itemView.tag = i;
[itemView addTarget:self
action:#selector(itemPressed:)
forControlEvents:UIControlEventTouchUpInside];
[itemView setBackgroundImage:[UIImage imageNamed:menuItem.normalImageName]
forState:UIControlStateNormal];
[itemView setBackgroundImage:[UIImage imageNamed:menuItem.highlightedImageName]
forState:UIControlStateHighlighted];
NSUInteger numColumns = self.bounds.size.width > self.bounds.size.height ? self.columnCountLandscape : self.columnCountPortrait;
[self.itemViews addObject:itemView];
[self addSubview:itemView];
}
Thanks to ctrahey, I got what I wanted. But the method used for setting up the cells is -(void) layoutSubviews as follows:
You can find the corresponding code after this line: **//__n__ ...
- (void)layoutSubviews {
[super layoutSubviews];
//[self removeFromSuperview];
NSUInteger numColumns = self.bounds.size.width > self.bounds.size.height ? self.columnCountLandscape : self.columnCountPortrait;
NSUInteger numItems = [self.menuDelegate menuViewNumberOfItems:self];
if (self.itemViews.count != numItems) {
[self setupItemViews];
}
CGFloat padding = roundf((self.bounds.size.width - (self.itemSize.width * numColumns)) / (numColumns + 1));
NSUInteger numRows = numItems % numColumns == 0 ? (numItems / numColumns) : (numItems / numColumns) + 1;
CGFloat yPadding = 0;
CGFloat totalHeight = ((self.itemSize.height + yPadding) * numRows) + yPadding ;
// get an even y padding if less than the max number of rows
if (totalHeight < self.bounds.size.height) {
CGFloat leftoverHeight = self.bounds.size.height - totalHeight;
CGFloat extraYPadding = roundf(leftoverHeight / (numRows + 1));
yPadding += extraYPadding;
totalHeight = ((self.itemSize.height + yPadding) * numRows) + yPadding;
}
// get an even x padding if we have less than a single row of items
if (numRows == 1 && numItems < numColumns) {
padding = roundf((self.bounds.size.width - (numItems * self.itemSize.width)) / (numItems + 1));
}
for (int i = 0, j = numColumns; i < numItems; i++) {
j--;
if (j<0) {
j += numColumns;
}
//NSUInteger column = j ;
//NSUInteger row = i / numColumns;
UIView *item = [self.itemViews objectAtIndex:i];
//CGFloat xOffset = (column * (self.itemSize.width + padding)) + padding;
//CGFloat yOffset = (row * (self.itemSize.height + yPadding));// + yPadding;
**//__n__ These three lines of code make set the cell items at different xPositions from right and left.
CGFloat xPosition = (i%2) ? 0.0 : self.bounds.size.width - self.itemSize.width;
CGFloat yPosition = i*self.itemSize.height;
item.frame = CGRectMake(xPosition, yPosition, self.itemSize.width, self.itemSize.height);**
//item.frame = CGRectMake(xOffset, yOffset, self.itemSize.width, self.itemSize.height);
// if ((i%numColumns) == 0) {
// UIImageView *img = [self.images objectAtIndex:i/numColumns];
// img.frame = CGRectMake(0, yOffset+76, self.bounds.size.width, 1);
// }//End If
}
//Scroll size.
UIDeviceOrientation currentOrientation = [[UIDevice currentDevice] orientation];
if (UIDeviceOrientationIsPortrait(currentOrientation))
{
self.contentSize = CGSizeMake(self.bounds.size.width, totalHeight + (yPadding * (numRows+1.55)));
}
else if (UIDeviceOrientationIsLandscape(currentOrientation))
{
self.contentSize = CGSizeMake(self.bounds.size.width, totalHeight + (yPadding * (numRows+3)));
}
}

Answer 1

If I understand your intention correctly, the line:
itemView.frame = CGRectMake(0, 0, self.itemSize.width, self.itemSize.height);
Should be using your index i and some simple arithmetic to position the views. One technique I have used in the past is a simple is-odd check using the modulus operator.
CGFloat xPosition = (i%2) ? 0.0 : self.bounds.size.width - self.itemSize.width;
CGFloat yPosition = i*self.itemSize.height;
itemView.frame = CGRectMake(xPosition, yPosition, self.itemSize.width, self.itemSize.height);

Answer 2

just use the uitableview operation.
in that cellforrowatindexpath
set button image and frame based on the odd and even
if(indexpath.orw%2==0)
{
//set your frame here;
}
else
{
// set your frame here;
}

Answer 3

Thanks to ctrahey. The method used for setting up the cells is -(void) layoutSubviews as follows:
You can find the corresponding code after this line: **//__n__ ...
- (void)layoutSubviews {
[super layoutSubviews];
//[self removeFromSuperview];
NSUInteger numColumns = self.bounds.size.width > self.bounds.size.height ? self.columnCountLandscape : self.columnCountPortrait;
NSUInteger numItems = [self.menuDelegate menuViewNumberOfItems:self];
if (self.itemViews.count != numItems) {
[self setupItemViews];
}
CGFloat padding = roundf((self.bounds.size.width - (self.itemSize.width * numColumns)) / (numColumns + 1));
NSUInteger numRows = numItems % numColumns == 0 ? (numItems / numColumns) : (numItems / numColumns) + 1;
CGFloat yPadding = 0;
CGFloat totalHeight = ((self.itemSize.height + yPadding) * numRows) + yPadding ;
// get an even y padding if less than the max number of rows
if (totalHeight < self.bounds.size.height) {
CGFloat leftoverHeight = self.bounds.size.height - totalHeight;
CGFloat extraYPadding = roundf(leftoverHeight / (numRows + 1));
yPadding += extraYPadding;
totalHeight = ((self.itemSize.height + yPadding) * numRows) + yPadding;
}
// get an even x padding if we have less than a single row of items
if (numRows == 1 && numItems < numColumns) {
padding = roundf((self.bounds.size.width - (numItems * self.itemSize.width)) / (numItems + 1));
}
for (int i = 0, j = numColumns; i < numItems; i++) {
j--;
if (j<0) {
j += numColumns;
}
//NSUInteger column = j ;
//NSUInteger row = i / numColumns;
UIView *item = [self.itemViews objectAtIndex:i];
//CGFloat xOffset = (column * (self.itemSize.width + padding)) + padding;
//CGFloat yOffset = (row * (self.itemSize.height + yPadding));// + yPadding;
**//__n__ These three lines of code make set the cell items at different xPositions from right and left.
CGFloat xPosition = (i%2) ? 0.0 : self.bounds.size.width - self.itemSize.width;
CGFloat yPosition = i*self.itemSize.height;
item.frame = CGRectMake(xPosition, yPosition, self.itemSize.width, self.itemSize.height);**
//item.frame = CGRectMake(xOffset, yOffset, self.itemSize.width, self.itemSize.height);
// if ((i%numColumns) == 0) {
// UIImageView *img = [self.images objectAtIndex:i/numColumns];
// img.frame = CGRectMake(0, yOffset+76, self.bounds.size.width, 1);
// }//End If
}
//Scroll size.
UIDeviceOrientation currentOrientation = [[UIDevice currentDevice] orientation];
if (UIDeviceOrientationIsPortrait(currentOrientation))
{
self.contentSize = CGSizeMake(self.bounds.size.width, totalHeight + (yPadding * (numRows+1.55)));
}
else if (UIDeviceOrientationIsLandscape(currentOrientation))
{
self.contentSize = CGSizeMake(self.bounds.size.width, totalHeight + (yPadding * (numRows+3)));
}
}