Question

I am beginner in iPhone development and have a problem with UINavigationControoler in my app.

I have a list of images from main application bundle in UITableView (with thumbnails), and when image is selected, UIScrollView view is pushed to navigation controller. The problem occurs during push transition animation when I am using large images (e.g. the ones taken with iPhone camera). It is not smooth (low framerate) so I am wondering what the problem is (+there is not problem with pop transition). Here is my code snippet from the image view:

- (void)loadView 
{
    //consider loading in seperate thread?
    //[NSThread detachNewThreadSelector:@selector(loadImage:) toTarget:self withObject:[photo URL]];

    UIImage *image = [UIImage imageNamed :[photo URL]];
    imageView = [[UIImageView alloc] initWithImage:image];

    UINavigationController *navController = [self navigationController];

    //get navigation controller view frame
    CGRect scrollViewSize = self.navigationController.view.frame;

    //take navigation bar height into account for scroll view size
    if(![navController isNavigationBarHidden]) {
        scrollViewSize.size.height -= [[navController navigationBar] frame].size.height;
    } 

    //take status bar height into account for scroll view size}
    UIApplication *sharedApp = [UIApplication sharedApplication];
    if(![sharedApp isStatusBarHidden]) {
        scrollViewSize.size.height -= [sharedApp statusBarFrame].size.height;
    }

    //calculate minimum zoom scale
    CGSize screenSize = scrollViewSize.size;
    CGFloat widthRatio = screenSize.width / image.size.width;
    CGFloat heightRatio = screenSize.height / image.size.height;
    CGFloat initialZoom = (widthRatio > heightRatio) ? heightRatio : widthRatio;

    //init scroll view
    scrollView = [[PhotoScrollView alloc] initWithFrame:scrollViewSize];
    [scrollView setMaximumZoomScale:1.0];
    [scrollView setMinimumZoomScale:initialZoom];
    [scrollView setBouncesZoom:YES];
    [scrollView setContentSize :[image size]];
    [scrollView setScrollEnabled :YES];
    [scrollView setDelegate: self];

    //imageView has to be added to scrollView in order for setZoomScale to work
    [scrollView addSubview :imageView];

    [scrollView setZoomScale:initialZoom];

    imageDescription = [[UILabel alloc] initWithFrame:CGRectMake(0, (screenSize.height/2)-20, screenSize.width, 40)];
    [imageDescription setText:[[self photo] getDetails]];
    [imageDescription setFont:[UIFont systemFontOfSize:20]];
    [imageDescription setTextAlignment:UITextAlignmentCenter];
    [imageDescription setBackgroundColor:[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.5]];
    [imageDescription setAlpha:0];

    [image release];
    [super loadView];
}

- (void)viewDidLoad
{
    [self.view addSubview :scrollView];
    [self.view addSubview:imageDescription];
    [super viewDidLoad];
}

I already tried loading image in seperate thread ([NSThread detachNewThreadSelector:@selector(loadImage:) toTarget:self withObject:[photo URL]]) but it does not help. Would I have to resize image? Also I wonder how is the default iPhone app Photos written, because it has similar functionality, but the image is blurred during transition.

Answer 1

Keep in mind that using images taken with the camera take up a significant amount of memory. Take the Photos.app on iPhone. They never actually display back to you the original photo. They take a number of sized images and depending on the scale factor (ie. how zoomed in you are), they introduce a higher res photo. But zooming all the way in will still not get you at the same resolution as the original image because of this very reason: performance.

I highly suggest watching this WWDC 2010 video that goes over this concept and will greatly enhance the performance of your application.