Assignment #4 Task #9

Please note, this blog entry is from a previous course. You might want to check out the current one.

Your application must work in both portrait and landscape orientations on the iPhone. Support for the iPad is optional (though it will be required next week, so you can save time later by implementing it now). Use appropriate platform-specific UI idioms (e.g., you must use UINavigationControllers to present the information on the iPhone).

We start by allow auto rotation in the common-table-view-controller class and the photo-view-controller class:

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return YES;
}

While rotation is now enabled we notice two problems. First rotating the photo stretches or squishes its proportions. Second the code from the previous task to adjust the size does not work any more in landscape mode.

Concerning the first problem we just set the mode of the image view in storyboard from previously “Scale to Fill” to “Aspect Fill”.

For the last task we loaded and set the aspect ration of the picture in viewDidLoad:. There the sizes the views are not the actual sizes how the views will appear on screen, but the sizes from storyboard. Because our storyboard uses portrait we have no real problems with portrait mode in the actual view. But it does not fit any more in landscape mode.

Thus we have to shift part of the code we used into another function which actually knows the “real” sizes of the actual views:

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.navigationItem.title = [FlickrData titleOfPhoto:self.photo];
    self.scrollView.delegate = self;
    self.scrollView.zoomScale = 1.0;
}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    NSURL *url = [FlickrFetcher urlForPhoto:self.photo format:FlickrPhotoFormatLarge];
    UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:url]];
    self.imageView.image = image;
    self.imageView.frame = CGRectMake(0, 0, image.size.width, image.size.height);
    self.scrollView.maximumZoomScale = 10.0;    
    self.scrollView.minimumZoomScale = 0.1;
    self.scrollView.contentSize = image.size;    
    double wScale = self.scrollView.bounds.size.width / image.size.width;
    double hScale = self.scrollView.bounds.size.height / image.size.height;
    if (wScale > hScale) self.scrollView.zoomScale = wScale;
    else self.scrollView.zoomScale = hScale;
}

The complete code for this task is available at github.