iOS: Rows of images in ScrollView - iphone

Question

I'm just getting started with iOS development. I would like to create a view that would contain 2 rows of image thumbnails as a preview. It would scroll horizontally. I'm wondering if the best approach would be to use 2 scrollviews or place them in a tableview with 2 rows.

Answer 1

If your thumbnail images and rows are essentially static, your best bet might be to drop your thumbnail image views directly into your scrollView. You can layout your thumbnail subviews into two rows and as many columns as necessary with some arbitrary calculations and avoid the need to use a UITableView (which works very well for scrolling rows, but doesn't natively support columns, and as a tool isn't imo the best for this particular job).
If you do elect to use a UITableView, I would put it into a single UIScrollview.... Unless you specifically seek two discretely scrolling rows, I wouldn't implement this with two UIScrollViews.
Here is a code snippet that suggests an approach. Consider 1)All subviews should be the same size 2)The subviews will "grid" themselves according to the bounds of the containing view. I wrote this snippet for a regular UIView (not a UIScrollView), but the concept will be the same: Consider size of scrollContent. Consider how many subviews will fit horizontally, and how many will fit vertically (hence, if you want 2 rows, the scroll view height should be just high enough to fully encompass the height of a single subview * 2):
- (void)layoutSubviews
{
//Lays out subviews in a grid to fill view.
float myWidth = self.bounds.size.width;
float myHeight = self.bounds.size.height;
if ([[self subviews] count] < 1)
{
return; //no subviews, must be added before layoutSubviews is called.
}
CGRect aSubviewRect = [[[self subviews] objectAtIndex:0] frame];
int numberOfColumns = (int)(myWidth / aSubviewRect.size.width);
float actualColumnWidth = myWidth / (float)numberOfColumns;
CGFloat paddingPerColumn = (actualColumnWidth - aSubviewRect.size.width);
int maxRows = (int)(myHeight / aSubviewRect.size.height);
int qtyOfViews = [[self subviews] count];
int numberOfRows = (qtyOfViews / numberOfColumns);
if ((qtyOfViews % numberOfColumns) > 0) //we need remainder row
{
++numberOfRows;
}
if (numberOfRows > maxRows)
{
numberOfRows = maxRows;
NSLog(#"More rows required than fit.");
}
float actualRowHeight = myHeight / (float)numberOfRows;
CGFloat paddingPerRow = (actualRowHeight - aSubviewRect.size.height);
for (UIView *aSubview in [self subviews])
{
int viewIndex = [[self subviews] indexOfObject:aSubview];
int rowIndex = (viewIndex / numberOfColumns);
CGFloat yOrigin = (roundf(((float)rowIndex * aSubviewRect.size.height) + (((rowIndex + 1) * paddingPerRow) / 2)));
int columnIndex = (viewIndex % numberOfColumns);
CGFloat xOrigin = (roundf(((float)columnIndex * aSubviewRect.size.width) + (((columnIndex + 1) * paddingPerColumn) / 2)));
CGRect frame = [aSubview frame];
frame.origin.y = yOrigin;
frame.origin.x = xOrigin;
[aSubview setFrame:frame];
}
}