Multiple Cells in TableView - ios

Question

I am writing an app for the first time and I need it to pull images from a database and list them for the user to click on. My apologies ahead of time if this is hard to follow. The problem I am having is I need to put multiple images in one cell (Or as mentioned in the title simply have multiple cells per row), and I need each image to direct to its own unique detail page. So two questions: Is it possible to put multiple cells in one row (based off of the screen width)? and Is there an exception that I can write to stop looping when an Array goes out of bounds?
The images I am pulling all have the same dimensions (360x125) so I grab the width and height of the container based off of the orientation and adjust their size according to how many I can fit in a cell.
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
// Array the images are stored in.
Companies *item = _feedItems[indexPath.row];
// I grab the screen size and adjust if the screen is in landscape
CGRect result = [UIScreen mainScreen].bounds;
CGFloat width = CGRectGetWidth(result);
CGFloat height = CGRectGetHeight(result);
UIInterfaceOrientation interfaceOrientation = [UIApplication sharedApplication].statusBarOrientation;
if(UIInterfaceOrientationIsPortrait(interfaceOrientation)){
result.size = CGSizeMake(width, height);
} else if(UIInterfaceOrientationIsLandscape(interfaceOrientation)) {
result.size = CGSizeMake(height, width);
}
// if the width is less than 480 I fit one image and set the cells height,
// else I set the height to that if there were two images.
if(result.size.width <= 480) {
return (item.imageName.size.height / item.imageName.size.width) * CGRectGetWidth(self.listTableView.bounds);
}
if(result.size.width > 480) {
return (item.imageName.size.height / item.imageName.size.width) * CGRectGetWidth(self.listTableView.bounds) / 2;
}
return (item.imageName.size.height / item.imageName.size.width) * CGRectGetWidth(self.listTableView.bounds);
}
If the width is greater than 480 then I put two images instead of one. This may increase to three images per line later, I have not got around to testing this on the iPad yet.
Then I draw the images into the cell:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSString *cellIndentifier = #"BasicCell";
UITableViewCell *myCell = [tableView dequeueReusableCellWithIdentifier:cellIndentifier];
myCell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIndentifier];
CGRect result = [UIScreen mainScreen].bounds;
CGFloat width = CGRectGetWidth(result);
CGFloat height = CGRectGetHeight(result);
UIInterfaceOrientation interfaceOrientation = [UIApplication sharedApplication].statusBarOrientation;
if(UIInterfaceOrientationIsPortrait(interfaceOrientation)){
result.size = CGSizeMake(width, height);
} else if(UIInterfaceOrientationIsLandscape(interfaceOrientation)) {
result.size = CGSizeMake(height, width);
}
UIImageView *myImageView;
UIImageView *myImageView2;
if(result.size.width <= 480) {
Companies *item = _feedItems[indexPath.row];
myImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,CGRectGetWidth(self.listTableView.bounds), (item.imageName.size.height / item.imageName.size.width) * CGRectGetWidth(self.listTableView.bounds))];
myImageView.tag = 1;
myImageView.image = item.imageName;
[myCell addSubview:myImageView];
}
if(result.size.width > 480) {
Companies *item = _feedItems[indexPath.row * 2];
Companies *item2 = _feedItems[(indexPath.row * 2) + 1];
myImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,CGRectGetWidth(self.listTableView.bounds) / 2, (item.imageName.size.height / item.imageName.size.width) / 2 * CGRectGetWidth(self.listTableView.bounds))];
myImageView2 = [[UIImageView alloc] initWithFrame:CGRectMake(CGRectGetWidth(self.listTableView.bounds) / 2,0,CGRectGetWidth(self.listTableView.bounds) / 2, (item.imageName.size.height / item.imageName.size.width) / 2 * CGRectGetWidth(self.listTableView.bounds))];
myImageView.tag = 1;
myImageView2.tag = 2;
myImageView.image = item.imageName;
myImageView2.image = item2.imageName;
[myCell addSubview:myImageView];
[myCell addSubview:myImageView2];
}
return myCell;
}
This is the code I have so far, and it will work normally when the orientation is portrait. However when the orientation is set to landscape I get an expected error of NSRangeException index beyond bounds. Because of this
Companies *item = _feedItems[indexPath.row * 2];
Companies *item2 = _feedItems[(indexPath.row * 2) + 1];
I want to pull both the image and the image that will come after it, to put in the same cell (Sorry if that is confusing). This is why I use y = 2x and y = 2x + 1. The problem is when x exceeds the highest value for y. So if the Array has 8 images [0 - 7], it will loop through the cell draw process 8 times, if I draw two at once it will draw the 8th image on the 3rd loop: 0[0,1] 1[2,3] 2[4,5] 3[6,7] The error will come up on the 4th loop: 4[8,9] index 8 beyond bounds 7. Is there an exception I can write to avoid this? Or am I using an incorrect thought process that should be handled differently?
How can I make it so that once I do put two images in the same row, each one will have their own on-click event handler and redirect to their own unique page (right now the call is on the table cell view, so that when I click either image in the same row, the page will redirect to the same one).
My restrictions are: I need to pull the data as I am from a mysql database through a php page. The number of images that will be pulled will be random. The images are 360 x 125 so I cannot stretch them too much, and thus need to have multiple ones on the same row should the user flip to landscape view or use a larger tablet or phone. Is there a better way to do this?

Answer 1

To prevent out of bounds error, just do a check on item count like this:
if (_feedItems.count < (indexPath.row*2+1)){
Companies *item2 = _feedItems[(indexPath.row * 2) + 1];
// rest of set up for second image
}
For detecting image press events, add a tap gesture recognizer to each image.
myImageView.userInteractionEnabled = YES; // This is important!
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(onImageTap:)];
[tap setNumberOfTouchesRequired:1];
[tap setNumberOfTapsRequired:1];
[tap setDelegate:self];
[myImageView addGestureRecognizer:tap];
In onImageTap method:
-(void)onImageTap:(UITapGestureRecognizer *)recognizer
{
int tag = recognizer.view.tag;
// rest of code based on image tag
}
Once you get this working and are comfortable with table views, you should look into custom table view cells by subclassing UITableViewCell and also understand table view cell reuse.
If you are feeling adventurous, I would recommend checking out UICollectionView as it will let you display two items in a row and treat each item as a different cell. You will have to manage the spacing between cells if you want strictly two items per row.