Issues with AutoLayout with Custom Views defined in NIB file and used in StoryBoard

Question

I've defined a custom view in a NIB file and would like to instantiate a copy in a StoryBoard but I'm having issues with autolayout.

In a simple example, the custom view has single label with a fixed size and centered both vertically and horizontally, all using autolayout.

The file owner is set to my class, it has an outlet to the top view. In the custom view implementation I do:

- (id)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if(self)
    {
        [[NSBundle mainBundle] loadNibNamed:@"FMCompassView" owner:self options:nil];
        [self addSubview:self.topView];
    }
    return self;
}

Now, in my storyboard, I add a UIView, set it's class to my custom class and layout it out sized and centered on my page, again using autolayout.

And my widget is positioned and size properly but it's content is not resized as illustrated below:

I tried adding more constraints after loading from the NIB, something along the lines of:

UIView* subV = self.topView;
NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(subV);
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[subV]|" options:NSLayoutFormatAlignAllBaseline metrics:nil views:viewsDictionary]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[subV]|" options:NSLayoutFormatAlignAllBaseline metrics:nil views:viewsDictionary]];

But this causes invalid layout constraints.

Any ideas on how to get this to work?

Cheers!

Solution 1

The view created from loading the NIB needs to be told not to convert auto resizing mask to constraints, EVEN if the content of the NIB is actually created with autolayout enabled.

So after loading the NIB and before adding it's top view to the custom view, I need to call:

[self.topView setTranslatesAutoresizingMaskIntoConstraints:NO];

Solution 2

In addition to what mkrus suggests above, this is what my initWithCoder: looks like for the custom class nib:

    - (instancetype)initWithCoder:(NSCoder *)aDecoder
    {
        self = [super initWithCoder:aDecoder];
        if (self) {
            NSString *className = NSStringFromClass([self class]);
            self.view = [[[NSBundle mainBundle] loadNibNamed:className owner:self options:nil] firstObject];
            [self.view setTranslatesAutoresizingMaskIntoConstraints:NO];
            [self addSubview:self.view];
            [self.view mas_makeConstraints:^(MASConstraintMaker *make) {
                make.edges.equalTo(self);
            }];
        }
        return self;
    }

The reason for this initWithCoder: approach is explained here. I've added the Masonry auto layout constraints so that it works with the constraints defined in interface builder.

Comments

[Ash]

While this will work, it's generally accepted as best practice to override the class method instead, i.e. +(BOOL) translatesAutoresizingMaskIntoConstraints{return YES;}