how to download and display server images if scrolldown the scrollview in iphone

Question

I am new to iPhone programming.

Using below code I can able to download and displaying all images form server. But in server I have more than some 1000s of images are there. so Using below code I can able to download and displaying in scrollview as 3*3 thumbnail.

But what I want means first I have to download and display 15 images in scrollview as 3*3 thumbnail.

If I scroll down means i have to show activity indicator then download next form 16 to 30 images, similarly again if I scroll means I want to download and display 31 to 45 images in thumbnail.

I dont want to download all images form server.

Can any tell me please how can I do this.

- (void)viewDidLoad
{
    URLs = [[NSMutableArray alloc]init];

    for (NSString *path in latestiamge)
    {
        NSURL *URL = [NSURL URLWithString:path];

        if (URL)
        {
            [URLs addObject:URL];
        }
        else
        {
            NSLog(@"'%@' is not a valid URL", path);
        }
    }

    self.imageURLs = URLs;

    myScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0.0, 84.0, 320.0, 840.0)];
    myScrollView.delegate = self;
    myScrollView.contentSize = CGSizeMake(320.0, 840.0);
    myScrollView.backgroundColor = [UIColor whiteColor];

    [self.view addSubview:myScrollView];

    float horizontal = 2.0;
    float vertical = 2.0;

    for(int i=0; i<[imageURLs count]; i++)
    {
        if((i%3) == 0 && i!=0)
        {
            horizontal = 5.0;
            vertical = vertical + 100.0 + 5.0;
        }

        CGRect frame;
        frame.size.width=100.0;
        frame.size.height=100.0;
        frame.origin.x=0;
        frame.origin.y=0;

        AsyncImageView *imageView = [[AsyncImageView alloc] initWithFrame:frame];
        imageView.contentMode = UIViewContentModeScaleAspectFill;
        imageView.clipsToBounds = YES;
        imageView.tag = i;
        UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc]
                                             initWithTarget:self
                                             action:@selector(actionHandleTapOnImageView:)];

        imageView.userInteractionEnabled = YES;
        [imageView addGestureRecognizer:singleTap];

        [myScrollView addSubview:imageView];
        [myScrollView addSubview:imageView];

        horizontal = horizontal + 100.0 + 5.0;
    }

    [myScrollView setContentSize:CGSizeMake(320.0, vertical + 3900.0)];

    [super viewDidLoad];
}

Answer 1

From what I can understand from your question, you want to create a image grid with three images in a row. But your approach is wrong...!

Do not use scrollView but use a UITableView. I think you can use UICollectionView if you are targeting iOS 6.0 or above.

Here is what you need to do :

• Create custom UITableViewCell with number of images you need in a row. You can make this dynamic too by passing number of grid items you need while creating the cell and creating the and positioning those views in the cell as subviews.
• Reuse the cells in the table to populate the grid.
• You can cache images for better performance, I would suggest you to use SDWebImage
• In cellForRowAtIndexPath you can configure all the gridItems.

Do you need more help...??

Answer 2

Doing everything yourself as you currently are is more effort than is required and not good for memory management. Consider using a table or collection view to manage the scrolling so you don't have so many views loaded at the same time and so you don't need code for the full layout of everything.

You're already using AsyncImageView, it will work if you add a number of them to the cells you're going to display and configure them as requested by the delegate/dataSource methods.

You should also think about acting as the scroll view delegate and monitoring the scroll completion. If the user has scrolled to the current bottom, you could add a footer view with an activity indicator, start a load of the next page from the server and then reload the view and remove the footer when the new page is downloaded.

Answer 3

Well there is a good and basic class you can use for downloading and displaying images asynchronously .

SDWebImage