10

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.

enter image description here

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.

enter image description here

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

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!

mkrus
  • 825
  • 1
  • 8
  • 16
  • think I found why: 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];` – mkrus Jun 16 '13 at 08:13
  • You can find the correct answer here: http://stackoverflow.com/a/34524346/971329. See my Comment below for the Swift implementation of a reusable superview that cares for all the stuff. – blackjacx Mar 11 '16 at 20:38

3 Answers3

22

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];
mkrus
  • 825
  • 1
  • 8
  • 16
  • 3
    While this will work, it's generally accepted as best practice to override the class method instead, i.e. `+(BOOL) translatesAutoresizingMaskIntoConstraints{return YES;}` – Ash Mar 15 '14 at 13:00
1

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.

jwswart
  • 1,226
  • 14
  • 16
0

Disabling "Use Size Classes" worked for me. I didn't have to do what mkrus has mentioned.

coder9
  • 1,571
  • 1
  • 27
  • 52