Question

I’m currently trying to learn the UIScrollView. As an exercise, I simply want UIViews with labels that show texts, and I want those views to be within that UIScrollView. To do this, I have two mutableArrays; one will contain the texts, and the other will contain the UIViews. Below are the methods that initialize these arrays.

- (NSMutableArray *)postViewsArray
{
    if (_postViewsArray == nil) _postViewsArray = [[NSMutableArray alloc] init];
    return _postViewsArray;
}

- (NSMutableArray *)postsArray
{
    if (_postsArray == nil) _postsArray = [[NSMutableArray alloc] init];
    return _postsArray;
}

Next, I fill up those two arrays with values. For the postsArray I only placed static texts. But for the postViewsArray I used NSNull as a placeholder. This is for optimization purposes, especially memory management, when I already need to load views with images in the future. So below were the methods to set those arrays up.

- (void) setupPostsArray {
    [self.postsArray addObject:@"Hello"];
    [self.postsArray addObject:@"You are doing good"];
    [self.postsArray addObject:@"By this exercise"];
    [self.postsArray addObject:@"In scroll views, paging enabled :)"]; 
}

- (void) setupPostViewsArray {
    for (int i = 0; i < [self.postsArray count]; i++) {
        [self.postViewsArray addObject:[NSNull null]];
    } 
}

There, simple. Now let’s get to the more challenging part. So here in loadMyPages method, first off I initialize my scrollView, set it’s contentSize, and add it as a subview of my top – level view, which is self.view. Here, I also do iteration in creating the “pages” that I can swipe through, it’s content, background color. There it is.

However, when I run the app, I can only see one view that can be swiped. And it seemed that 3 more views can fit inside this scroll view. I did NSLogs to check the pages being created and it’s subviews and it seemed to work fine as I see the logs in the debug area. Note that the view that I can see has the last value of my postArray. A friend suspects that the other views were overlapped instead of being viewed side by side.

Shed some light for me here kind ones 🙂 Below is my loadMyPages method and perhaps take a look on this if you guys are up for the challenge.

- (void) loadMyPages
    {
        NSLog(@"loads view");
        CGRect pagingScrollViewFrame = [[UIScreen mainScreen] bounds];

        self.pagingScrollView = [[UIScrollView alloc] initWithFrame:pagingScrollViewFrame];

        self.pagingScrollView.contentSize = CGSizeMake(pagingScrollViewFrame.size.width * [self.postsArray count], pagingScrollViewFrame.size.height);


        [self.view addSubview:self.pagingScrollView];

        // iteration to enumerate creating of UIViews
        for (int i = 0; i < [self.postsArray count]; i++) {

            NSLog(@"Creating views?");

            UIView *pageView = [self.postViewsArray objectAtIndex:i];

                if ((NSNull *) pageView == [NSNull null]) {


                    // create a new UIView
                    UIView *page = [[UIView alloc] initWithFrame:self.view.bounds];

                    page.backgroundColor = [UIColor lightGrayColor];

                    // set text label
                    self.postLabel.text = [self.postsArray objectAtIndex:i];

                    // add the label to the created UIView
                    [page addSubview:self.postLabel];

                    // then lastly, add each element of the postViewsArray as a subview of the pagingScrollView
                    [self.postViewsArray replaceObjectAtIndex:i withObject:page];

                    [self.pagingScrollView addSubview:[self.postViewsArray objectAtIndex:i]];

                    NSLog(@"this view %@ has this post value: %@", page, [page subviews]);
                    NSLog(@"subviews of scrollview: %@", [self.pagingScrollView subviews]);
            }
        }
    }

Answer 1

According to my understanding, you want to layout views horizontally, like a deck of cards placed side by side, and then scroll from one to another, just like iOS default photos app.

To do this, each view must have an x origin difference value equal to the width of your view’s frame or scrollView frame. However your current code

[[UIView alloc] initWithFrame:self.view.bounds]

Sets the same origin for each view, resulting in overlapping. Change your code to following

[[UIView alloc] initWithFrame:(i*320), 0, yourWidth, yourHeight];

The i factor will increase the x value placing each subsequent view right next to the previous view.

Note: Adjust 320 and 0 as x, y values to suit your needs