Display images in ScrollView

Question

I want to display some images in a scroll view, but I am facing some issues.

Here is what I have:

- (void)viewDidLoad
{
    [super viewDidLoad];

    myObject = [[NSMutableArray alloc] init];

    [myObject addObject:@"tut_5.jpg"];
    [myObject addObject:@"tut_2.jpg"];
    [myObject addObject:@"tut_3.jpg"];
    [myObject addObject:@"tut_4.jpg"];

    pageControlBeingUsed = NO;


    CGRect screenRect = [[UIScreen mainScreen] bounds];
    CGFloat screenWidth = screenRect.size.width;
    CGFloat screenHight = screenRect.size.height;

    for (int i = 0; i < [myObject count]; i++) {
        CGRect frame;
        frame.origin.x = self.takeTourScrollView.frame.size.width * i;
        frame.origin.y = 0;
        frame.size = self.takeTourScrollView.frame.size;

        NSString *val = [myObject objectAtIndex:i];


        UIImage* theImage = [UIImage imageNamed:val];


        UIImageView *img=[[UIImageView alloc] initWithFrame:CGRectMake(screenWidth*i,0,185 ,284)];


        img.image = theImage;

        [self.takeTourScrollView addSubview:img];

    }

The first first image seems to be ok.

Then when I swipe left I am getting a blank screen

I swipe left again and then I see my second picture. And it goes like that for all the 4 images.

Any ideas what am I doing wrong ?

Answer 1

I'd advise to use UITableView / UICollectionView for such behaviour. You can set the image in each cell and they'll be reused - it will be much better in terms of memory management.

The tableView will by the way place all elements in proper places (you just need to define the height of the cell or the layout).

It will also properly resize on events (eg phone rotation).

Also, you should try to avoid hardcoding the sizes:

CGRectMake(screenWidth*i,0,185 ,284)

You will fail in case of smaller / bigger devices. It'll be a great pain to maintain the code after some time.

-- edit --

After @Duncan C posted his answer, I've noticed you're looking for a paging system. You can go with building your own solution either on UIPageViewController or on UICollectionView . However you can also use third party libraries, I really enjoy this one: https://www.cocoacontrols.com/controls/bwwalkthrough . It has a support of different animations and does a ton of stuff for you :).

Answer 2

There are system components that will give you what you want with much less work and a more refined user experience. Using a UICollectionView is one possibility, as mentioned by Vive in her answer. My suggestion would be a UIPageViewController . There is a sample app called PhotoScroller from Apple that shows how to implement a UI very much like what you describe. Do a search in the Xcode docs for "PhotoScroller" to find it.

Answer 3

you already set the x position of uiscrollview. do not need to set the x postion of UIImageView.Because you used imageview as a subview of uiimagescrollview. change this line to

UIImageView *img=[[UIImageView alloc] initWithFrame:CGRectMake(screenWidth*i,0,185 ,284)];

with

UIImageView *img=[[UIImageView alloc] initWithFrame:CGRectMake(0,0,185 ,284)];