Show multiple photos in scroller

Question

In the app, I need to show no. of images (count- unknown) in scroller. I put all the images in scroller directly. But start receiving the memory warning level 2. Please suggest me how to do so. Is there any other way to do that? You can also refer to following link to have better understanding of the problem.

https://www.dropbox.com/sh/h0vwnhhx1acfcb5/W2TQ638udh

 -(void) getPortraitScrollReady
  {
    UIImageView *imageView;
    NSString *imageName;
    int x=0;
    for (NSNumber *numberObject in tagList)
    {
        imageName = [[NSString alloc] initWithFormat: @"%@", [self getImage:[numberObject intValue]]];
        imageView = [[UIImageView alloc ] initWithFrame: CGRectMake(x, 0, 320, 320)];
        imageView.image = [self thumbWithSideOfLength:320 pathForMain:imageName];   // a function that returns an image;

        [scrollPortrait addSubview:imageView];

        [imageName release];

        [imageView release];

        x+=320;
    }
    scrollPortrait.contentSize = CGSizeMake(x, 320);
    int pageNo =[self indexofObject:imageNo inArray:tagList]; 
    [scrollPortrait setContentOffset:CGPointMake(pageNo*320, 0) animated:NO];
 }

please also consider the question http://stackoverflow.com/questions/10532654/with-lazy-loading-in-my-my-iphone-app-photo-scroll-become-rough-jerks — Harshit Gupta, May 14 '12 at 10:23

hp iOS Coder · Accepted Answer · 2012-05-14T10:58:21.497

Keep all images in an Array/MutableArray as per convenience.

Take Scrollview, In scroll view take 5-UIImageViews to display images from array. Match the length of that UIScrollView with 5-UIImageViews.

When scrolling is done in any of the direction, then 'release' the UIImageView in opposite direction & 'allocate' a new UIImageVIew in scrolled direction.

This is what I did in my project. .h file contents

IBOutlet UIScrollView *scrlView;
UIImageView *imgView1;
UIImageView *imgView2;
UIImageView *imgView3;
UIImageView *imgView4;
UIImageView *imgView5;

NSMutableArray *imgGallery;
NSInteger mCount;
NSInteger centerImg;

CGFloat imgFrameHeight;
CGFloat imgView1X;
CGFloat imgView2X;
CGFloat imgView3X;
CGFloat imgView4X;
CGFloat imgView5X;

CGFloat previousOffsetX;
CGFloat currentOffsetX;

.m file contents

- (void)photoGallery
{
    imgGallery = [[NSMutableArray alloc] initWithCapacity:10];
    [imgGallery addObject:[UIImage imageNamed:@"1.png"]];
    [imgGallery addObject:[UIImage imageNamed:@"2.png"]];
    [imgGallery addObject:[UIImage imageNamed:@"3.png"]];
    [imgGallery addObject:[UIImage imageNamed:@"4.png"]];
    [imgGallery addObject:[UIImage imageNamed:@"5.png"]];
    [imgGallery addObject:[UIImage imageNamed:@"6.png"]];
    [imgGallery addObject:[UIImage imageNamed:@"7.png"]];
    [imgGallery addObject:[UIImage imageNamed:@"8.png"]];
    [imgGallery addObject:[UIImage imageNamed:@"9.png"]];
}

- (void)photoScroller
{
    CGFloat appFrameHeight = self.view.frame.size.height;
    CGFloat navFrameHeight = self.navigationController.navigationBar.frame.size.height;
    CGFloat tabFrameHeight = self.tabBarController.tabBar.frame.size.height;
    imgFrameHeight = appFrameHeight - (navFrameHeight+tabFrameHeight);

    mCount = [imgGallery count];
    [scrlView setContentSize:CGSizeMake(320 * mCount, imgFrameHeight)];
    CGFloat offsetX = ((320 * mCount)/2) - 160;
    [scrlView setContentOffset:CGPointMake(offsetX, 0)];

    imgView1 = [[UIImageView alloc] initWithFrame:CGRectMake(offsetX - (320*2), 0, 320, imgFrameHeight)];
    imgView2 = [[UIImageView alloc] initWithFrame:CGRectMake(offsetX - 320, 0, 320, imgFrameHeight)];
    imgView3 = [[UIImageView alloc] initWithFrame:CGRectMake(offsetX, 0, 320, imgFrameHeight)];
    imgView4 = [[UIImageView alloc] initWithFrame:CGRectMake(offsetX + 320, 0, 320, imgFrameHeight)];
    imgView5 = [[UIImageView alloc] initWithFrame:CGRectMake(offsetX + (320*2), 0, 320, imgFrameHeight)];

    int center = mCount/2;
    int tmp = center * 2;
    int remainder = mCount - tmp;
    if (remainder != 0) {
        centerImg = center;
    } else {
        centerImg = center - remainder;
    }

    imgView1.image = [imgGallery objectAtIndex:(centerImg-2)];
    imgView2.image = [imgGallery objectAtIndex:(centerImg-1)];
    imgView3.image = [imgGallery objectAtIndex:centerImg];
    imgView4.image = [imgGallery objectAtIndex:(centerImg+1)];
    imgView5.image = [imgGallery objectAtIndex:(centerImg+2)];

    [scrlView addSubview:imgView1];
    [scrlView addSubview:imgView2];
    [scrlView addSubview:imgView3];
    [scrlView addSubview:imgView4];
    [scrlView addSubview:imgView5];
}

Below is the code where UIImageViews are adjusted

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    imgView1X = imgView1.frame.origin.x;
    imgView2X = imgView2.frame.origin.x;
    imgView3X = imgView3.frame.origin.x;
    imgView4X = imgView4.frame.origin.x;
    imgView5X = imgView5.frame.origin.x;

    CGPoint previousOffset = [scrlView contentOffset];
    previousOffsetX = previousOffset.x;

}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //get the current offset
    CGPoint currentOffset = [scrollView contentOffset];
    currentOffsetX = currentOffset.x;

    //NSLog(NSStringFromCGPoint(currentOffset));

    //calculate offset X of RIGHT ImageView to be shifted
    CGFloat identifyRightIV = previousOffsetX +640;
    //calcualte new LEFT offset X for shifting the previously calcualted RIGHT ImageView
    CGFloat newLX = identifyRightIV - (320*5);
    //calculate offset X of LEFT ImageView to be shifted
    CGFloat identifyLeftIV = previousOffsetX -640;
    //calcualte new RIGHT offset X for shifting the previously calcualted LEFT ImageView
    CGFloat newRX = identifyLeftIV + (320*5);
    //index of new LEFT Image in an array imgGallery
    int newImageL = newLX / 320;
    //index of new RIGHT Image in an array imgGallery
    int newImageR = newRX / 320;

    //if scrolled to left
    if (newLX >= 0) // Is shifting is necessary? i.e. if new LEFT offsetX is greater than lowest offsetX(0) of scrollview
    {
        if (currentOffsetX == (previousOffsetX-320))
        {
            if (imgView1X == identifyRightIV) {
                imgView1.frame = CGRectMake(newLX, 0, 320, imgFrameHeight);
                imgView1.image = [imgGallery objectAtIndex:newImageL];
            }
            else if (imgView2X == identifyRightIV) {
                imgView2.frame = CGRectMake(newLX, 0, 320, imgFrameHeight);
                imgView2.image = [imgGallery objectAtIndex:newImageL];
            }
            else if (imgView3X == identifyRightIV) {
                imgView3.frame = CGRectMake(newLX, 0, 320, imgFrameHeight);
                imgView3.image = [imgGallery objectAtIndex:newImageL];
            }
            else if (imgView4X == identifyRightIV) {
                imgView4.frame = CGRectMake(newLX, 0, 320, imgFrameHeight);
                imgView4.image = [imgGallery objectAtIndex:newImageL];
            }
            else if (imgView5X == identifyRightIV) {
                imgView5.frame = CGRectMake(newLX, 0, 320, imgFrameHeight);
                imgView5.image = [imgGallery objectAtIndex:newImageL];
            }
        }
    }
    //if scrolled to right
    if (newRX < (mCount*320))   // Is shifting is necessary? i.e. if new RIGHT offsetX is less than highest offsetX of scrollview
    {
        if (currentOffsetX == (previousOffsetX+320))
        {
            if (imgView1X == identifyLeftIV) {
                imgView1.frame = CGRectMake(newRX, 0, 320, imgFrameHeight);
                imgView1.image = [imgGallery objectAtIndex:newImageR];
            }
            else if (imgView2X == identifyLeftIV) {
                imgView2.frame = CGRectMake(newRX, 0, 320, imgFrameHeight);
                imgView2.image = [imgGallery objectAtIndex:newImageR];
            }
            else if (imgView3X == identifyLeftIV) {
                imgView3.frame = CGRectMake(newRX, 0, 320, imgFrameHeight);
                imgView3.image = [imgGallery objectAtIndex:newImageR];
            }
            else if (imgView4X == identifyLeftIV) {
                imgView4.frame = CGRectMake(newRX, 0, 320, imgFrameHeight);
                imgView4.image = [imgGallery objectAtIndex:newImageR];
            }
            else if (imgView5X == identifyLeftIV) {
                imgView5.frame = CGRectMake(newRX, 0, 320, imgFrameHeight);
                imgView5.image = [imgGallery objectAtIndex:newImageR];
            }
        }

    }
}

Due to this in entire life cycle only 5-UIImageViews will be in App & all images will be safe in array.

score 1 · Answer 2 · answered May 14 '12 at 10:46

try this code for 1st question:

          scrl=[[UIScrollView alloc]initWithFrame:CGRectMake(10, 92, 300, 370)];
        //scrl.backgroundColor=[UIColor blackColor];
        scrl.delegate=self;
        scrl.showsHorizontalScrollIndicator=NO;
        scrl.showsVerticalScrollIndicator=NO;
            scrl.pagingEnabled=YES;
        scrl.layer.cornerRadius = 5.0f;
        scrl.layer.masksToBounds = YES;
        scrl.layer.borderWidth = 5;
        scrl.layer.borderColor = [UIColor blackColor].CGColor;

        int i, x=0,y=0;
        for (i=0; i<[imageName count]; i++) 
        {

            imagBack=[[UIImageView alloc] initWithFrame:CGRectMake(x,y,300, 370)];
            imagBack.image=[UIImage imageNamed:[imageName objectAtIndex:i]];
            [scrl addSubview:imagBack];

             x =x+300;
       }
        scrl.contentSize=CGSizeMake(x,370);

        [self.view addSubview:scrl];

-> 2nd issue,you use the image to be compressed (.png format) image is ,try this:

   [self imageWithImage:image CovertToSize:CGSizeMake(46, 44)];

    NSData* imageData = UIImageJPEGRepresentation(image, 1.0f);//10 % quality compressed

call this method when save the image:

-(UIImage *)imageWithImage:(UIImage *)image CovertToSize:(CGSize)size {
    UIGraphicsBeginImageContext(size);
    [image drawInRect:CGRectMake(0, 0, size.width, size.height)];
    destImage = UIGraphicsGetImageFromCurrentImageContext();    
    UIGraphicsEndImageContext();
    return destImage;
}

Show multiple photos in scroller

2 Answers2