I am trying to make a basic photo grid, that is a “grid” of small “thumbnail” images, that when clicked go to a big version of the image. I am using a UITableView to accomplish this. My problem is that when I try adding rotation support I cant get the table to redraw the grid with an extra row of images.
Here’s some of my code, PLEASE feel free to ask any question as I’m at my wits end on this one >:(
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if(cell==nil){
cell=[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
if(self.interfaceOrientation==UIInterfaceOrientationPortrait || self.interfaceOrientation==UIInterfaceOrientationPortraitUpsideDown){
NSLog(@"portrait");
for (int i=0; i < self.numberOfColumns; i++) {
if (self.photoIndex < [self.photosArray count] || self.shouldReload==TRUE) {
UIButton *imageButton = [[UIButton alloc]init];
UIActivityIndicatorView *loadingActivityIndicator = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
[imageButton addTarget:self action:@selector(imageClicked:) forControlEvents:UIControlEventTouchDown];
switch (self.buttonNumber) {
case 1:
self.xCord=35.0f;
self.buttonNumber++;
break;
case 2:
self.xCord=213.25f;
self.buttonNumber++;
break;
case 3:
self.xCord=391.5f;
self.buttonNumber++;
break;
case 4:
self.xCord=569.75f;
self.buttonNumber=1;
break;
}
imageButton.frame = CGRectMake(self.xCord, 35.0f, 163.25f, 163.25f);
imageButton.tag = self.photoIndex;
imageButton.enabled=FALSE;
imageButton.imageView.contentMode = UIViewContentModeScaleAspectFit;
if(self.buttonsArray.count < self.photosArray.count)[self.buttonsArray addObject:imageButton];
if([self.isInternetAvailableClass isInternetAvailable]==YES)[self downloadImages:self.photoIndex];
cell.selectionStyle=UITableViewCellSelectionStyleNone;
[cell addSubview:imageButton];
if(self.photoIndex < self.buttonsArray.count){
if(![[self.buttonsArray objectAtIndex:self.photoIndex] currentImage]){
loadingActivityIndicator.center = imageButton.center;
loadingActivityIndicator.hidesWhenStopped=TRUE;
}
}
if(self.activityIndicatorArray.count < self.photosArray.count){
[self.activityIndicatorArray addObject:loadingActivityIndicator];
if([self.isInternetAvailableClass isInternetAvailable]==YES){
[loadingActivityIndicator startAnimating];
}
}else{
if(self.photoIndex < self.buttonsArray.count){
[self.activityIndicatorArray replaceObjectAtIndex:self.photoIndex withObject:loadingActivityIndicator];
}
}
[cell addSubview:loadingActivityIndicator];
self.photoIndex++;
}
}
return cell;
}else{
NSLog(@"landscape called!");
for (int i=0; i < self.numberOfColumns; i++) {
if (self.photoIndex < [self.photosArray count] || self.shouldReload==TRUE ){
NSLog(@"inside landscape called!");
UIButton *imageButton = [[UIButton alloc]init];
UIActivityIndicatorView *loadingActivityIndicator = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
[imageButton addTarget:self action:@selector(imageClicked:) forControlEvents:UIControlEventTouchDown];
switch (self.buttonNumber) {
case 1:
self.xCord=37;
self.buttonNumber++;
break;
case 2:
self.xCord=230;
self.buttonNumber++;
break;
case 3:
self.xCord=423;
self.buttonNumber++;
break;
case 4:
self.xCord=616;
self.buttonNumber++;
break;
case 5:
self.xCord=809;
self.buttonNumber=1;
break;
}
imageButton.frame = CGRectMake(self.xCord, 35.0f, 163.25f, 163.25f);
imageButton.tag = self.photoIndex;
imageButton.enabled=FALSE;
imageButton.imageView.contentMode = UIViewContentModeScaleAspectFit;
if(self.buttonsArray.count < self.photosArray.count){
[self.buttonsArray addObject:imageButton];
}
if([self.isInternetAvailableClass isInternetAvailable]==YES){
[self downloadImages:self.photoIndex];
}
cell.selectionStyle=UITableViewCellSelectionStyleNone;
[cell addSubview:imageButton];
if(self.photoIndex < self.buttonsArray.count){
if(![[self.buttonsArray objectAtIndex:self.photoIndex] currentImage]){
loadingActivityIndicator.center = imageButton.center;
loadingActivityIndicator.hidesWhenStopped=TRUE;
}
}
if(self.activityIndicatorArray.count < self.photosArray.count){
[self.activityIndicatorArray addObject:loadingActivityIndicator];
if([self.isInternetAvailableClass isInternetAvailable]==YES){
[loadingActivityIndicator startAnimating];
}
}else{
if(self.photoIndex < self.activityIndicatorArray.count){
[self.activityIndicatorArray replaceObjectAtIndex:self.photoIndex withObject:loadingActivityIndicator];
}
}
[cell addSubview:loadingActivityIndicator];
self.photoIndex++;
}
}
return cell;
}
if (self.shouldReload==TRUE)self.shouldReload=FALSE;
}
#pragma mark - Table view delegate
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return 205.0f;
}
#pragma mark - View Lifecycle
- (void)viewDidLoad
{
[super viewDidLoad];
self.photosTableView = [[UITableView alloc]init];
self.photosTableView.delegate=self;
self.photosTableView.dataSource=self;
self.photosTableView.separatorStyle = UITableViewCellSeparatorStyleNone;
self.photosTableView.backgroundColor = [UIColor clearColor];
[self.view addSubview:self.photosTableView];
self.isInternetAvailableClass = [[IsInternetAvailable alloc]init];
self.buttonNumber=1;
self.xCord=0.0f;
self.downloadedImageNumber=0;
self.buttonsArray = [[NSMutableArray alloc]init];
self.dataDictionary = [[NSMutableDictionary alloc]init];
self.downloadedImagesArray = [[NSMutableArray alloc]init];
self.activityIndicatorArray = [[NSMutableArray alloc]init];
self.photosArray = [[NSMutableArray alloc]init];
self.largePhotosArray = [[NSMutableArray alloc]init];
self.imageOrderDictionary = [[NSMutableDictionary alloc]init];
self.refToDownloadedImage = [[UIImage alloc]init];
self.unformattedPhotosArray = [[NSMutableArray alloc]init];
self.appDelegate = (StereophotoAppDelegate *)[[UIApplication sharedApplication]delegate];
self.shouldReload=FALSE;
if(self.interfaceOrientation==UIInterfaceOrientationPortrait || self.interfaceOrientation==UIInterfaceOrientationPortraitUpsideDown){
self.numberOfColumns=4;
}else{
self.numberOfColumns=5;
}
self.photoIndex=0;
self.errorImageArray = [[NSMutableArray alloc]init];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(viewWillAppear:) name:UIApplicationDidBecomeActiveNotification object:nil];
[[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(deviceDidRotate) name:UIDeviceOrientationDidChangeNotification object:nil];
[self loadImages];
}
-(void)viewWillAppear:(BOOL)animated{
self.appDelegate.isSlideshowRunning=NO;
self.appDelegate.PhotosPopoverSlideshowText = @"Start Slideshow";
if([self.isInternetAvailableClass isInternetAvailable]==YES){
if(self.isCommingFromNoNetworkConnectivity==YES){
[self viewDidLoad];
}
if(self.photosTableView.isHidden==YES)[self.photosTableView setHidden:NO];
self.isCommingFromNoNetworkConnectivity=NO;
}else{
if(self.photosTableView.isHidden==NO){
[self.photosTableView setHidden:YES];
self.isCommingFromNoNetworkConnectivity=YES;
}
UIAlertView *errorAlert = [[UIAlertView alloc]initWithTitle:@"Oops!" message:@"No Internet connection was detected! Please connect to the Internet and try again!" delegate:self cancelButtonTitle:@"Ok" otherButtonTitles:nil, nil];
[errorAlert show];
}
}
-(void)viewWillDisappear:(BOOL)animated{
for(NSURLConnection *connection in self.connectionsArray){
[connection cancel];
}
}
-(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation{
return TRUE;
}
-(void)deviceDidRotate{
self.photosTableView.frame=CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height);
if(self.interfaceOrientation==UIInterfaceOrientationPortrait || self.interfaceOrientation==UIInterfaceOrientationPortraitUpsideDown){
self.numberOfColumns=4;
}else{
self.numberOfColumns=5;
}
self.shouldReload=TRUE;
[self.photosTableView reloadData];
}
-(void)viewDidAppear:(BOOL)animated{
self.photosTableView.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height);
}
thanks for ANY help!
Shredder
I think a table view is the wrong tool for a gallery. You’re always going to go through some silliness to put multiple images in a single table view cell, you presumably aren’t going to be using the
didSelectRowAtIndexPathlogic, etc. I’d suggest aUIScrollViewinstead (see example below).But, if you were determined to use a table view, then
[self.tableView reloadData]is the right solution. But yourcellForRowAtIndexPathhas quite a few problems:You should only create
UIButtonsif you’re creating your cell. You’ll have to take care, though, given your landscape v portrait orientation, of handling that properly. Not hard, but be careful.You should decouple the caching of images with the loading of cells. They really are two different things, even though it might feel like they’re awfully similar. Regardless, you definitely shouldn’t be changing the basics populating of a cell in
cellForRowAtIndexPathbased upon whether the image was cached or not; it just changes where you get the image.Unrelated to the problem at hand, but I would’t hard code screen coordinates. I wouldn’t be surprised to see new iOS devices with different resolutions over the coming months/years. Personally, I calculate how many images I can fit on the screen based upon how many thumbnails I can fit
self.view.frame.width(you might usecell.contentView.frame.width).Also probably unrelated to the problem here, I would never recommend calling
viewDidLoadfromviewWillAppear. If you want to have some common initialization routine that they both use, then maybe you can do that (but even that is a little sloppy), but given thatviewDidLoadis calling[super viewDidLoad], you’ll end up calling thatsupermethod twice, and you don’t know if iOS is cool with that. Probably not disasterous, but I can’t imagine that it’s a good idea.Finally, also unrelated to your problem, but you don’t need to use the notification center for
UIDeviceOrientationDidChangeNotificationbecause the standardwillAnimateRotationToInterfaceOrientationorviewWillLayoutSubviewswill do that for us.If you wanted to do a
UIScrollViewversion of a gallery with lazy loading of images from a remote server, leveraging a cache for the thumbnails, detecting a tap on the images, etc. it might look like the following. I draw your attention to an absolute absence of any portrait/landscape logic (because it just looks at the dimensions of the scrollview), but it handles orientation changes perfectly well. I have not included, though, my code for populatingNSArray *imageUrlStringsbecause that’s obviously completely unique to a particular app, but you probably get the idea nonetheless. And there are all sorts of optimizations you could do (e.g. useReachability), but this is a shell of a gallery that might do the job for you.My
ThumbnailCacheis just a simpleNSCachesingleton object. (Whether you implement this as a singleton, is up to you; you don’t have to but it’s convenient given the nature of my apps.) I’ve updated this to encapsulate a secondaryDocumentscache (thus you’re retrieving images from a remote server, cached in both theNSCacheobject for optimal performance, and secondarily cached in theDocumentsfolder if you want to save subsequent invocations of the program from needing to re-retrieve the images from the server, giving you a persistent cache across sessions). This theoretically could (should?) be optimized to purge theDocumentsfolder of images that haven’t been used for a long time, but I’ll leave that for others to implement.and
I’d be surprised if there weren’t some great publicly available gallery classes, too, but if you wanted to roll your own, the above is a possibility.