How to add multiple UIImageViews to paging UIScrollView?

I have a UIScrollView with paging enabled with multiple subviews on the page: a UIButton, UIwebview and UIImageView. Both the webview and the image change on every page. This works fine. I used Apples scrolling image paging example to get me started.

But when I add a second UIImageView, the position of image I have in place already gets the new values and the new image doesn’t display.

  • |-(20)-
  • how to make a sliding up panel like the Google Maps app?
  • How do you use " let newSwiftColor = UIColor(red: 255, green: 165, blue: 0, alpha: 0)?
  • App rejection issue 2.5.1: Apps that use non-public APIs will be rejected (Since iOS10)
  • My NSURLSessionDelegate methods are not getting called during a background download
  • Asset Catelog issue with multiple targets
  • This is the code inside viewdidload for the first image (works fine):

    // load all the images from our bundle and add them to the scroll view
    for (i = 1; i <= kNumImages; i++)
    {
        NSString *imageName = [NSString stringWithFormat:@"image%d.jpg", i];
        UIImage *image2 = [UIImage imageNamed:imageName];
        UIImageView *imageView2 = [[UIImageView alloc] initWithImage:image2];
    
    
        // setup each frame to a default height and width, it will be properly placed when we call "updateScrollList"
        CGRect rect = imageView2.frame;
        rect.size.height = imageviewScrollObjHeight;
        rect.size.width = imageviewScrollObjWidth;
    
        // Get the Layer of any view
        CALayer * imageLayer = [imageView2 layer];
        [imageLayer setMasksToBounds:YES];
        [imageLayer setCornerRadius:7.0];
    
        // You can even add a border
        [imageLayer setBorderWidth:1.0];
        [imageLayer setBorderColor:[[UIColor lightGrayColor] CGColor]];
    
        imageView2.frame = rect;
        imageView2.tag = i; // tag our images for later use when we place them in serial fashion  
    
    
        [scrollView1 addSubview:imageView2];
    
    }
    
    [self layoutScrollImages];  // now place the photos in serial layout within the scrollview
    

    This is the code to layout the first image on every page, different image per page(outside viewdidload)(works fine):

    // layout images for imageview1
    - (void)layoutScrollImages
    {
    UIImageView *imageView = nil;
    NSArray *subviews = [scrollView1 subviews];
    
    // reposition all image subviews in a horizontal serial fashion
    CGFloat curXLoc = 10;
    for (imageView in subviews)
    {
        if ([imageView isKindOfClass:[UIImageView class]] && imageView.tag > 0)
        {
            CGRect frame = imageView.frame;
            frame.origin = CGPointMake(curXLoc, 50);
            imageView.frame = frame;
    
            curXLoc += (kScrollObjWidth);
        }
    }
    
    // set the content size so it can be scrollable
    [scrollView1 setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scrollView1 bounds].size.height)];
    }
    

    This is the code for the second image (inside viewdidload): (when i remove [self layoutNavScrollImages]; the image loads only on the first page)

    for (i = 1; i <= kNumImages; i++)
    {
    
        UIImage *navBarImage = [UIImage imageNamed:@"navigationbar.png"];
        UIImageView *imageViewNavBar = [[UIImageView alloc] initWithImage:navBarImage];
    
        // setup each frame to a default height and width, it will be properly placed when we call "updateScrollList"
        CGRect navBarRect = imageViewNavBar.frame;
        navBarRect.size.height = 44;
        navBarRect.size.width = 320;
        navBarRect.origin.x = 0;
        navBarRect.origin.y = 0;
    
        /* Get the Layer of any view
         CALayer * imageLayer = [imageView3 layer];
         [imageLayer setMasksToBounds:YES];
         [imageLayer setCornerRadius:7.0];
    
         // You can even add a border
         [imageLayer setBorderWidth:1.0];
         [imageLayer setBorderColor:[[UIColor lightGrayColor] CGColor]];
         */
        imageViewNavBar.frame = navBarRect;
        imageViewNavBar.tag = i;    // tag our images for later use when we place them in serial fashion  
    
        [scrollView1 addSubview:imageViewNavBar];
    
    }
    
    [self layoutNavScrollImages];
    

    And the code outside viewdidload:(this overwrites the position of the first image)

    - (void)layoutNavScrollImages
    {
    UIImageView *view = nil;
    NSArray *subviews = [scrollView1 subviews];
    
    // reposition all image subviews in a horizontal serial fashion
    CGFloat curXLoc = 0;
    for (view in subviews)
    {
        if ([view isKindOfClass:[UIImageView class]] && view.tag > 0)
        {
            CGRect frame = view.frame;
            frame.origin = CGPointMake(curXLoc, 0);
            view.frame = frame;
    
            curXLoc += (kScrollObjWidth);
        }
    }
    
    // set the content size so it can be scrollable
    [scrollView1 setContentSize:CGSizeMake((kNumImages * kScrollObjWidth), [scrollView1 bounds].size.height)];
    }
    

    Solutions Collect From Internet About “How to add multiple UIImageViews to paging UIScrollView?”

    The way to do this is to make one (big) UIView and add every UIImageView as a subview of that UIView. And then add the UIView as a subview to UIScrollView.

    [totalView addSubview:imageView1];
    [totalView addSubview:imageView2;
    [totalView addSubview:buttonView1];
    [totalView addSubview:buttonView2];
    [totalView addSubview:webView];
    
    [scrollView addSubview:totalView];
    

    Be sure to set the right content size or scrollview wont work:

    [scrollView setContentSize:CGSizeMake((320*kNumImages), 411)];
    

    Setup views and tag the UIView (inside viewdidload):

    NSUInteger i;
    for (i = 1; i <= kNumImages; i++)
       {
          //... code to setup views
          totalView.tag = i;
       }
    [self layoutViews]; // now place the views in serial layout within the scrollview
    

    Then to layout the view on every page:

    - (void)layoutViews
    {
    UIView *view = nil;
    NSArray *subviews = [scrollView subviews];
    
    // reposition all image subviews in a horizontal serial fashion
    CGFloat curXLoc = 0;
    for (view in subviews)
    {
        if ([view isKindOfClass:[UIView class]] && view.tag > 0)
        {
            CGRect frame = view.frame;
            frame.origin = CGPointMake(curXLoc, 0);
            view.frame = frame;
    
            curXLoc += (kScrollObjWidth);
        }
    }
    }
    

    I hope this is as clear as possible. If anyone thinks this is not the right way to do it please comment.