NUCLiOS IGGridView QuickTip: Dynamic Column Count Based on Screen Size

Stephen Zaharuk / Friday, September 26, 2014

Today's iOS device landscape is much different than it was a year ago. As developers we need to start making our apps more dynamic. We can longer be content with having checks to see if a device is an iPhone vs an iPad and expect certain sizes based on that. 

I speak from experience as i've done the same in the past. 

So today, i'm going to show you one way in which you can make your apps more dynamic using the IGGridView. 

If you're not familiar, with it, we have a DataSourceHelper thats pretty helpful in displaying the same type of cell, for any amount of columns. 

I've created an IGGridView, showing a single field of images.

_gridView = [[IGGridView alloc]initWithFrame:self.view.bounds];

_gridView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;

_gridView.rowHeight = 150;

_gridView.headerHeight = 0;

_gridView.rowSeparatorHeight = 0;

[self.view addSubview:_gridView];

IGGridViewImageColumnDefinition* col = [[IGGridViewImageColumnDefinition alloc]initWithKey:@"image" forPropertyType:IGGridViewImageColumnDefinitionPropertyTypeImage];

_dsh = [[IGGridViewSingleFieldMultiColumnDataSourceHelper alloc]initWithField:col];

_dsh.numberOfColumns = 5;

_dsh.data = [igSalesmanItem generateData:200];

_gridView.dataSource = _dsh;

Looks pretty good on my iPad in portrait, right?

Lets take a look at what it looks like on my iPad landscape:

Ick.. not so good.. 

How about an iPhone 4":

Ahhhh... thats even worse. 

Now in the past, i might've just said, ok, if you're an iPhone only display 3 columns and change the rowHeight... but really.. thats kind of gross... 

So what can we do?

Well lets think about the code we saw above. I have 2 hard coded values here. I've set the rowHeight to be 150 and i've set the number of columns to 5. We also know that the images above are square. Which means we want the rowHeight to be the same as the column width... hmm... ok...

So that kind of sounds like basic math right? So, maybe thats exactly what we should be doing?

For the sake of simplicity, i'm going to do all of my logic in my ViewController's viewDidLayoutSubviews method. As it will be invoked when i'm rotated as well. 

So now i've got a couple of options. I could base my size off of the number of columns i want... OR i can base my column count off of the size i want. 

For this scenario, i'm going to choose the latter. So, lets keep with the fact that I like the 150pt size of my images. 

So lets just calculate the number of columns we can display:

-(void)viewDidLayoutSubviews

{

    CGFloat size = _gridView.bounds.size.width;

    CGFloat itemSize = 150;  

    NSInteger numberOfColumns = roundf(size/itemSize);

    itemSize = size/numberOfColumns;

    

    _gridView.rowHeight = itemSize;

    _dsh.numberOfColumns = numberOfColumns;

    

    [_dsh invalidateData];

    [_gridView updateData];

}

Thats all the code we need! Now when we run our app. Not matter what screen size, it will just look good:

So the default iPad in Portrait looks the same... thats good!

Wow, now the iPad Landscape looks much better. Its automatically displaying 6 columns instead of 5.

How about the iPhone?

Awesome!. Now we could even run this on the iPhone 6+ and the iPhone 6 in their respective native resolutions and it would just work!

Here it he 6+:

I hope you find this helpful!

-SteveZ