CODEWITHSUNDEEP
iosiphoneuiscrollviewuiimageviewlazy-loading
Shailesh
Shailesh

Reputation: 3118

Loading images on scrollview using lazy loading

I am working on an app in which I need to load nearly 211 images in a scrollview. What I was doing was I was converting the images in binary format (NSData) and saving them in core data. Then retrieving them and populating them on the scrollview.

it does work, but sometimes it does throw "Memory warning".

I learned that lazy loading is a way to achieve this. But, I am not totally aware of how it is done.

Like, loading 3 or 5 images ahead/back of the image visible currently on the scrollview.

Can any bode help me with a simple example, which would help me understand from scratch ? and would point me in the right direction.

Thank you for your time.

Upvotes: 0

Views: 2186

Answers (3)

dariaa
dariaa

Reputation: 6385

Checkout this library It's a generic UIScrollView that reuses it's subviews like UITableView does (there is a dataSource object which is used to configure scroll view subviews)

Upvotes: 0

iSmita
iSmita

Reputation: 1292

Well, it is not needed to store images into core data. Just take all image URLs into NSMutableArray and try to use following code as per your requirement.Hope this helps you.

Try this code - 

    friendsScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 470, 320, 100)];
    friendsScrollView.contentSize = CGSizeMake([meetUPFrndNameArray count] * 95,50);
    friendsScrollView.backgroundColor = [UIColor clearColor];
    friendsScrollView.delegate = self;
    [self.view addSubview:friendsScrollView];

    int imageX = 25,imageY = 20;
    int backImageX = 10, backImageY = 10;

    int flag = 0;

    for (int i = 0; i < [meetUPFrndPhotoArray count]; i++) {

        flag ++;

        NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask, YES);
        NSString *documentsDirectory = paths[0];
        NSString *savedImagePath = [documentsDirectory stringByAppendingPathComponent:meetUPFrndPhotoArray[flag-1]];
        UIImage *img1 = [UIImage imageWithContentsOfFile:savedImagePath];

        if (!img1 || [UIImagePNGRepresentation(img1) length] <=0)
        {
            id path = meetUPFrndPhotoArray[flag-1];
            path = [path stringByReplacingOccurrencesOfString:@" " withString:@"%20"];
            NSURL *url = [NSURL URLWithString:path];
            NSMutableArray *arr = [[NSMutableArray alloc] initWithObjects:url, [NSString stringWithFormat:@"%d", flag], nil];

            [self performSelectorInBackground:@selector(loadImageInBackground:) withObject:arr];

            UIImageView *frndBackgroundImage = [[UIImageView alloc] initWithFrame:CGRectMake(backImageX, backImageY, 80, 80)];
            frndBackgroundImage.image = [UIImage imageNamed:@"friend_image_background.png"];
            frndBackgroundImage.backgroundColor = [UIColor clearColor];
            frndBackgroundImage.layer.borderWidth = 2.0;
            frndBackgroundImage.layer.masksToBounds = YES;
            frndBackgroundImage.layer.shadowOffset = CGSizeMake(0, 1);
            frndBackgroundImage.layer.shadowOpacity = 1;
            frndBackgroundImage.layer.shadowRadius = 1.2;
            frndBackgroundImage.layer.cornerRadius = 5.0;
            frndBackgroundImage.layer.borderColor = [[UIColor clearColor] CGColor];
            [friendsScrollView addSubview:frndBackgroundImage];

            UIImageView *friendImage = [[UIImageView alloc] initWithFrame:CGRectMake(imageX, imageY, 50, 50)];
            friendImage.tag = flag;
            friendImage.image = [UIImage imageNamed:@"ic_user.png"];
            [friendsScrollView addSubview:friendImage]; 
        }
        else
        {
            UIImageView *frndBackgroundImage = [[UIImageView alloc] initWithFrame:CGRectMake(backImageX, backImageY, 80, 80)];
            frndBackgroundImage.image = [UIImage imageNamed:@"friend_image_background.png"];
            frndBackgroundImage.backgroundColor = [UIColor clearColor];
            frndBackgroundImage.layer.borderWidth = 2.0;
            frndBackgroundImage.layer.masksToBounds = YES;
            frndBackgroundImage.layer.shadowOffset = CGSizeMake(0, 1);
            frndBackgroundImage.layer.shadowOpacity = 1;
            frndBackgroundImage.layer.shadowRadius = 1.2;
            frndBackgroundImage.layer.cornerRadius = 5.0;
            frndBackgroundImage.layer.borderColor = [[UIColor clearColor] CGColor];
            [friendsScrollView addSubview:frndBackgroundImage];

            UIImageView *friendImage = [[UIImageView alloc] initWithFrame:CGRectMake(imageX, imageY, 50, 50)];
            friendImage.tag = flag-1;
            friendImage.image = img1;
            [friendsScrollView addSubview:friendImage];

        }

        backImageX = backImageX + 80 + 10;
        backImageY = 10;

        imageX = imageX + 50 + 25 + 15;
        imageY = 20;

    }

Here meetUPFrndPhotoArray contains image URLs.

And

For Downloading images in Background - 

- (void) loadImageInBackground:(NSArray *)urlAndTagReference{

     NSData *imgData = [NSData dataWithContentsOfURL:urlAndTagReference[0]];
     UIImage *img = [[UIImage alloc] initWithData:imgData];

     NSMutableArray *arr = [[NSMutableArray alloc] initWithObjects:img, urlAndTagReference[1], nil];

     [self performSelectorOnMainThread:@selector(assignImageToImageView:) withObject:arr waitUntilDone:YES];
  }

For Assigning downloaded image to perticular imageView - 

- (void) assignImageToImageView:(NSArray *)imgAndTagReference{

      for (UIImageView *checkView in [friendsScrollView subviews] ){

          if ([imgAndTagReference count] != 0) {

               if ([checkView tag] == [imgAndTagReference[1] intValue]){
                   [checkView setImage:imgAndTagReference[0]];

                   NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask, YES);
                   NSString *documentsDirectory = paths[0];
                   NSString *savedImagePath = [documentsDirectory stringByAppendingPathComponent:meetUPFrndPhotoArray[[imgAndTagReference[1] intValue]-1]];
                   UIImage* imageToSave = [checkView image];
                   NSData *imageData = UIImagePNGRepresentation(imageToSave);
                   [imageData writeToFile:savedImagePath atomically:NO];
               }
          }
     }
}

Let me know if this helps you.Thanks in advance.All the best.

Upvotes: 1

Nagaraj
Nagaraj

Reputation: 802

Make use of delegate functions, content size and content inset properties of the scrollview

Upvotes: 0

Related Questions