CODEWITHSUNDEEP
ioscocoa-touchuiscrollviewuipagecontrol
Ben Packard
Ben Packard

Reputation: 26476

Demand loading a UIScrollView

I would like to implement an app using a UIScrollView with paging, similar to the apple weather app.

But I am a little concerned about performance. The example implementation I have been using loads all of the views then the application launches. After a certain point, once this prove slow?

I wonder how Apple's camera roll is dealing with this, where a user may have 100+ photos that can be scrolled through. Should I try to figure out a way to build the view only when it is needed? Or maybe there is a way to replicate the dequeue reusable cell technique from a UITableView, only for horizontal view loading, since each view will have the same layout.

Upvotes: 2

Views: 2022

Answers (2)

heckman
heckman

Reputation: 499

A very efficient solution, is to make sure to reuse any views whenever possible. If you are going to be simply displaying images, you could use a subclass of UIScrollView, and layout these reusable views within layoutSubviews. Here you could detect what views are visible and not visible and create the subviews as needed.

An example dequeuing function may look like:

- (UIImageView *)dequeueReusableTileWithFrame:(CGRect) frame andImage:(UIImage *) image
{
    UIImageView *tile = [reusableTiles anyObject];
    if (tile) {
        [reusableTiles removeObject:tile];
        tile.frame = frame;
    }
    else {
        tile = [[UIImageView alloc] initWithFrame:frame];
    }
    tile.image = image;
    return tile;
 }

Where reusableTiles is just an iVar of NSMutableSet type. You could then use this to load fetch any currently offscreen image views and quickly and easily bring them back into view.

Your layoutSubviews may look something like:

- (void)layoutSubviews {
     [super layoutSubviews];

     CGRect visibleBounds = [self bounds];
     CGPoint contentArea = [self contentOffset];

     //recycle all tiles that are not visible
     for (GSVLineTileView *tile in [self subviews]) {

         if  (! CGRectIntersectsRect([tile frame], visibleBounds)) {
             [reusableTiles addObject:tile];
             [tile removeFromSuperview];
         }
     }


     int col = firstVisibleColumn = floorf(CGRectGetMinX(visibleBounds)/tileSize.width);
     lastVisibleColumn = floorf(CGRectGetMaxX(visibleBounds)/tileSize.width)    ;
     int row = firstVisibleRow = floorf(CGRectGetMinY(visibleBounds)/tileSize.height);
     lastVisibleRow = floorf(CGRectGetMaxY(visibleBounds)/tileSize.height);


     while(row <= lastVisibleRow)
     {
         col = firstVisibleColumn;
         while (col <= lastVisibleColumn) 
         {
             if(row < firstDisplayedRow || row > lastDisplayedRow || col < firstDisplayedColumn || col >lastDisplayedColumn)
             {

                 UImageView* tile = [self dequeueReusableTileWithFrame:CGRectMake(tileSize.width*col, tileSize.height*row, tileSize.width, tileSize.height) andImage:YourImage];
                 [self addSubview:tile];
             }
             ++col;
         }
         ++row;
     }

     firstDisplayedColumn = firstVisibleColumn;
     lastDisplayedColumn = lastVisibleColumn;
     firstDisplayedRow = firstVisibleRow;
     lastDisplayedRow = lastVisibleRow;
}

I used something similar to this to tile in areas of a line when I was working with an exceptionally large area of a scroll view and it seemed to work quite well. Sorry for any typos that I may have created when updating this for an image view instead of my custom tileView class.

Upvotes: 4

Andrew R.
Andrew R.

Reputation: 943

By far the most efficient solution (and this is used in many photo-browsing apps such as Facebook, and probably the native Photos app too) is going to be to load the content on-demand, just as UITableView does. Apple's StreetScroller sample project should get you on the right track.

Upvotes: 4

Related Questions