How to create a view controller with buttons layed out in a grid?

Question

I have an app, where the main screen should contain a logo and six button layed out in a grid of 2x3 in portrait and 3x2 in landscape mode.

Using auto layout, I can place the logo (uiumage) correctly and the uicollectionview correctly, and they lay out correctly, and this works nicely even when the device changes rotation.

This is what I got (using the RDHCollectionViewGridLayout class):

-(void)viewDidLoadImpl{
self.navCollectionView.delegate = self;
self.navCollectionView.dataSource = self;
titlesArray = [NSArray arrayWithObjects:
               @"Meine Hunde",
               @"Füttern",
               @"Einstellungen",
               @"Fragen & Antworten",
               @"Über diese App",
               @"Rechtliches", nil];
seguesArray = [NSArray arrayWithObjects:
               @"dogs",
               @"feed",
               @"settings",
               @"faq",
               @"about",
               @"law", nil];
imagesArray = [NSArray arrayWithObjects:
               [UIImage imageNamed:@"hunde_button"],
               [UIImage imageNamed:@"fuettern_button"],
               [UIImage imageNamed:@"einstellungen_button"],
               [UIImage imageNamed:@"fragen_button"],
               [UIImage imageNamed:@"ueber_button"],
               [UIImage imageNamed:@"rechtlich_button"], nil];
imagesHoverArray = [NSArray arrayWithObjects:
               [UIImage imageNamed:@"hunde_button_hover"],
               [UIImage imageNamed:@"fuettern_button_hover"],
               [UIImage imageNamed:@"einstellungen_button_hover"],
               [UIImage imageNamed:@"fragen_button_hover"],
               [UIImage imageNamed:@"ueber_button_hover"],
               [UIImage imageNamed:@"rechtlich_button"], nil];
RDHCollectionViewGridLayout *layout = [RDHCollectionViewGridLayout new];
layout.lineItemCount = 2;
layout.lineDimension = 0;
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
layout.sectionsStartOnNewLine = YES;
[self.navCollectionView setCollectionViewLayout:layout];
}


   #pragma mark - UICollection View Datasource

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 6;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifier = @"Cell";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
UILabel *label = (UILabel *)[cell viewWithTag:10];
label.text = [titlesArray objectAtIndex:indexPath.row];
UIButton *button = (UIButton *)[cell viewWithTag:20];
// do something with the button
return cell;
}

#pragma mark - UICollectionViewDelegatFlowLayout
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{

UIInterfaceOrientation orientation = [UIApplication sharedApplication].statusBarOrientation;
if(orientation == UIInterfaceOrientationLandscapeLeft) {
    // orientation is landscape left
    CGSize s = {100,200};
    return s;
} else if(orientation == UIInterfaceOrientationLandscapeRight) {
    // orientation is landscape right
    CGSize s = {100,200};
    return s;
} else if(orientation == UIInterfaceOrientationMaskPortrait) {
    // orientation is portrait
    CGSize s = {100,100};
    return s;
} else if(orientation == UIInterfaceOrientationMaskPortraitUpsideDown) {
    // orientation is portrait upsidedown
    CGSize s = {100,100};
    return s;
} else {
    CGSize s = {100,100};
    return s;
}
}

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration{
if (toInterfaceOrientation == UIInterfaceOrientationPortrait || toInterfaceOrientation ==     UIInterfaceOrientationPortrait) {

    RDHCollectionViewGridLayout *layout = [RDHCollectionViewGridLayout new];
    layout.lineItemCount = 2;
    layout.lineDimension = 0;
    layout.scrollDirection = UICollectionViewScrollDirectionVertical;
    layout.sectionsStartOnNewLine = YES;
    [self.navCollectionView setCollectionViewLayout:layout];
} else {
    RDHCollectionViewGridLayout *layout = [RDHCollectionViewGridLayout new];
    layout.lineItemCount = 3;
    layout.lineDimension = 0;
    layout.scrollDirection = UICollectionViewScrollDirectionVertical;
    layout.sectionsStartOnNewLine = YES;
    [self.navCollectionView setCollectionViewLayout:layout];
}
}

However, rotation changes are not layed out correctly, see screenshots:

After loading: After loading the VC

After switching to landscape:

After switching back to portrait: enter image description here

I am even not sure, if using a collectionview is the right approach? I would prefer to use something like a static tableview, but this gives me only 1 column?

You can use a table view if you prefer. You can add two or three buttons across in a custom table view cell to make it look like a grid. If I were to do it that way, I would probably make two cell prototypes, one with two buttons and one with three, and just dequeue the one you need based on the orientation (so I would use a dynamic table, not a static one). — rdelmar, Jan 08 '15 at 00:07

score 0 · Accepted Answer · answered Jan 07 '15 at 20:51

A collection view is what you need (i.e. a 2-dimensional table). When you first load the grid, is the size of each cell 100 x 100? Is that what you have indicated in interface builder? It could be sized appropriately initially, adjusted when turned to landscape, and then adjusted incorrectly when turned back to portrait.

score -1 · Answer 2 · answered Jan 08 '15 at 21:36

-1

My solution is to not use RDHCollectionViewGridLayout and using UICollectionViewDelegateFlowLayout class and its methods to calculate values so they fit.

answered Jan 08 '15 at 21:36

mrd

4,561
10
54
92

How to create a view controller with buttons layed out in a grid?

2 Answers2