How to do Auto Layout XIB being added programmatically?

Question

I'm trying to add subview programmatically so people can horizontally scroll to another section. But it looks like the subview doesn't fit to SuperView and the content not showing

Here's my code from ViewController.m

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];

    for (int i = 0; i < 2; i++)
    {
        CGRect frame;
        frame.origin.x = self.scrollView.frame.size.width * i;
        frame.size = self.scrollView.frame.size;
        self.scrollView.pagingEnabled = YES;

        NewsSection *sectionView = [[NewsSection alloc] initWithFrame:frame];            

        [self.scrollView addSubview:sectionView];
    }

    self.scrollView.contentSize =  CGSizeMake(self.scrollView.frame.size.width * 2, self.scrollView.frame.size.height);


}

This is my StoryBoard and constraints.

enter image description here

And this is my NewsSection.xib enter image description here

This is my code of NewsSection.m

-(id) initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if(self) {
        [[NSBundle mainBundle] loadNibNamed:@"NewsSection" owner:self options:nil];

        [self addSubview:self.view];
    }
    return self;
}

And this is the result I'm seeing

enter image description here

UPDATE: Product code is here https://github.com/noppanit/UIScrollViewAutoLayout

bhr · Accepted Answer

I'll start off with a good read regarding UIScrollView and Autolayout: https://developer.apple.com/library/ios/technotes/tn2154/_index.html

Now, here's some sample code that should keep you get going. You just need to make your NewsView be managed by a ViewController, e.g. NewsViewController, and initialize NewsViewController before using it in setupNewsView:

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self setupNewsView];
}

- (void) setupNewsView
{
     UIView *newsView = [[NewsSection alloc] initWithFrame:CGRectZero];

    self.scrollView.translatesAutoresizingMaskIntoConstraints = NO;
    newsView.translatesAutoresizingMaskIntoConstraints = NO;

    [self.scrollView addSubview:newsView];

    NSDictionary *viewsDict = @{ @"newsView": newsView };

    [self.scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[newsView]|"
                                                                            options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom
                                                                            metrics:nil
                                                                              views:viewsDict]];
    [self.scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[newsView]|"
                                                                        options:0
                                                                        metrics:nil
                                                                          views:viewsDict]];

    [self.scrollView addConstraint:[NSLayoutConstraint constraintWithItem:newsView
                                                                attribute:NSLayoutAttributeWidth
                                                                relatedBy:NSLayoutRelationEqual
                                                                   toItem:self.scrollView
                                                                attribute:NSLayoutAttributeWidth
                                                               multiplier:1.0f
                                                                 constant:0.0f]];

    [self.scrollView addConstraint:[NSLayoutConstraint constraintWithItem:newsView
                                                                attribute:NSLayoutAttributeHeight
                                                                relatedBy:NSLayoutRelationEqual
                                                                   toItem:self.scrollView
                                                                attribute:NSLayoutAttributeHeight
                                                               multiplier:1.0f
                                                                 constant:0.0f]];
}

EDIT:

I'm sorry. I missed to add this line in my solution before:

[self.scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[newsView]|"
                                                                        options:0
                                                                        metrics:nil
                                                                          views:viewsDict]];

Regarding your code sample: First, fill your ViewController exactly as my code sample depicts. I already incorporated the change into first sample. Also remove the code that overrides viewDidLayoutSubviews.

Then, you need to change the initializer of your NewsView.

Now it looks like this:

-(id) initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if(self) {
        [[NSBundle mainBundle] loadNibNamed:@"NewsSection" owner:self options:nil];

        [self addSubview:self.view];
    }
    return self;
}

One problem is here is that you load the nib but don't assign the view from the nib to your view object. The reference (https://developer.apple.com/library/prerelease/ios/documentation/UIKit/Reference/NSBundle_UIKitAdditions/index.html) depicts that loadNibNamed:owner:options: returns all top level objects. Since we have one top level object in our xib we need to assign this to ourself. This is somewhat hacky and introduces the problem that the nib will leak in the future. So better make a UIViewController with XIB here.

To make your code work, the initializer of NewsView should look like this. But it won't connect your outlet.

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self = [[NSBundle mainBundle] loadNibNamed:@"NewsSection" owner:self options:nil][0];
    }
    return self;
}

How to do Auto Layout XIB being added programmatically?

Answers (2)

EDIT:

Related Questions