CODEWITHSUNDEEP
iossdkuiscrollviewuiimage
user748001
user748001

Reputation: 181

How to add images dynamically inside UIScrollView in iPhone

In my iPhone app i am getting around 300 images url from web server, i need to display all the images on UIScrollView in 3x3 row and column format. Once i get all the url from web server, convert them into UIImage and display image. Everything works fine, however after loading 200 images app crashes, I have read a lot its some thing memory kind of issue with UIScrollView, so how can we work on this. I have read apple documentation also, however its not clear.

Upvotes: 0

Views: 2861

Answers (6)

Gami Nilesh
Gami Nilesh

Reputation: 581

-(void)scrollimage
{
    [AsyncImageLoader sharedLoader].cache = nil;
    NSArray *viewsToRemove = [_scrollview_gallary subviews];
    for (UIView *v in viewsToRemove) {
        [v removeFromSuperview];
    }

    CGFloat width =_scrollview_gallary.bounds.size.width;

    _scrollview_gallary.contentSize=CGSizeMake(width*[tmpArr count]-1, 360);
    [_scrollview_gallary setShowsHorizontalScrollIndicator:NO];
    [_scrollview_gallary setShowsVerticalScrollIndicator:NO];
    int x=0;
    int y=0;
    for (int i=0; i<[tmpArr count]; i++)
    {
        AsyncImageView *imgv;
        imgv =[[AsyncImageView alloc] initWithFrame:CGRectMake(x,y,width,360)];
        imgv.contentMode = UIViewContentModeScaleToFill;
        imgv.activityIndicatorStyle = UIActivityIndicatorViewStyleWhite;
        NSString *strimag=[NSString stringWithFormat:@"%@",[tmpArr objectAtIndex:i]];
        imgv.imageURL=[NSURL URLWithString:[tmpArr objectAtIndex:i]];
        [_scrollview_gallary addSubview:imgv];
        x=x+width;
    }
    _pageview.numberOfPages=([tmpArr count]);
    _scrollview_gallary.pagingEnabled = YES;
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    int page;
    CGFloat pageWidth = _scrollview_gallary.frame.size.width;
    page = floor((_scrollview_gallary.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
    self.pageview.currentPage = page;

}

Upvotes: 1

Dhruvik
Dhruvik

Reputation: 982

here is the solution, i've implemented it in my app. Here is my code sv_port is my scrollView. Download SDWebImageDownloader class files and import it in your project. Add relevant framework in your project. like imageIO.framework, QuartzCore

Now, in your .m add 

#import "UIImageView+WebCache.h"
#import "SDImageCache.h"
#import "SDWebImageCompat.h"

//function for adding image in your scrollview
-(void)populateImages
{
int x=6,y=6;

for(UIView * view in sv_port.subviews){
    if([view isKindOfClass:[UIImageView class]])
    {
        [view removeFromSuperview]; view = nil;
    }
    if([view isKindOfClass:[UIButton class]])
    {
        [view removeFromSuperview]; view = nil;
    }
}

for(int p=0;p<[Manufacturer count];p++)
{
    UIButton *btnImageButton = [UIButton buttonWithType:UIButtonTypeCustom];
    btnImageButton.frame = CGRectMake(x,y,70,70);
    [btnImageButton setTag:p];
    [btnImageButton addTarget:self action:@selector(nextview:) forControlEvents:UIControlEventTouchUpInside];

    UIActivityIndicatorView *spinny = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
    spinny.frame=CGRectMake(btnImageButton.frame.origin.x+25,btnImageButton.frame.origin.y+25, 20, 20);
    spinny.backgroundColor=[UIColor clearColor];
    [spinny startAnimating];

    [sv_port setScrollEnabled:YES];
    [sv_port addSubview:spinny];

    UIImageView *asyncImageView = [[[UIImageView alloc] initWithFrame:btnImageButton.frame] autorelease];
    asyncImageView.backgroundColor=[UIColor clearColor];
    CALayer *layer;
    layer = asyncImageView.layer;
    layer.borderWidth = 0.5;
    layer.cornerRadius = 5;
    layer.masksToBounds = YES;


     [asyncImageView setImageWithURL:[NSURL URLWithString:[NSString stringWithFormat:@"%@", yourUrl] ]   placeholderImage:[UIImage imageNamed:nil] options:0 andResize:CGSizeMake(btnImageButton.frame.size.width,btnImageButton.frame.size.height) withContentMode:UIViewContentModeScaleAspectFit];
    asyncImageView.contentMode = UIViewContentModeScaleAspectFit;

    [sv_port addSubview:btnImageButton];
    [sv_port addSubview:asyncImageView];
    int imgCntPort=0;

    imgCntPort=(sv_port.frame.size.width/(asyncImageView.frame.size.width));

    ////NSLog(@"imgport %d",imgCntPort);
    if((p+1)%imgCntPort==0)
    {
        x=5;
        y=y+80;
    }
    else
    {
        x=x+80;
    }
}
sv_port.contentSize = CGSizeMake(0, y);
glob_x =0; glob_y =y;
}

hope it helps..

Upvotes: 1

F&#225;bio Oliveira
F&#225;bio Oliveira

Reputation: 2346

Are you releasing the elements that are not visible anymore? UITableView does that (that's why Sandro suggested it). Your implementation of the UIScrollView should do that.

You can also consider UICollectionView or GMGridView for grid implementations that take this into consideration.

Upvotes: 0

Yashesh
Yashesh

Reputation: 1752

If you want to display images in Gridview format then you can use PSTCollectionView. And for the lazy loading of the image you can use SDWebImage.

Upvotes: 0

iphonic
iphonic

Reputation: 12717

I am getting an impression that you are downloading all 300 images together at once and keeping in memory and adding to the UIScrollView..

There is a technique called LazyLoad, means don't load all the images at once, load it in queue..

You can refer to this link http://lazyloadinginuiscrollviewiniphone.blogspot.in/2011/12/iphone-uiscrollview-lazy-image-loading.html it might help you to achieve things smoothly..

All the best.

Upvotes: 0

FrancoisC
FrancoisC

Reputation: 126

I do not see why what you're doing is a problem. May be you've got memory issue. In that case simulator and device result should be different.

If this is a memory problem, you should use a tableview instead of a scroll view. Put 3 images in each table view cell, and that should do the trick.

Cdt

Upvotes: -1

Related Questions