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);