How to apply autolayout for UIView in nib?

Question

I am confused with the autolayout on xib/nib. I am comfortable with storyboard autolayout.

What I am trying to do is:

1. I have a storyboard with one view controller with one UIView called borderView. It is constrained correctly.It is resized correctly for iphone 5 and 6. Here is the screenshot of the storyboard:

This is the borderView in iphone 5: (I am trying to add the nib view as a subview to this border view)

2. I created a nib with UIView in it with the dimensions 300 x 300. I want this view to be added to the borderVIew in my ViewController. HEre is the screenshot for my nib.

Note: I didnt gave any height or width constraints anywhere. I just gave leading ,traliing,top and bottom.

and I am trying to add the nib to my borderview as follows:

This is the method in my viewController:

   -(void)viewDidAppear:(BOOL)animated{

    [super viewDidAppear:animated];

    [[NSBundle mainBundle] loadNibNamed:@"AlertView" owner:self options:nil];

    [self.borderView addSubview:self.myAlertViewFromNib];

}

and the result in the iphone 5 is:

As you can see, the nib view is not aligned in the center of the screen (as the border view is aligned center to the screen).

I have no idea of how to give constraints to nib itself. Can anyone please tell me if it is possible to do it in xcode or do I need to give the constraints programmatically?

Answer 1

You want to add the AlertView as a center aligned in the view controller Rather than setting size from the xib just create the perfect constrained XIB view and define macros for sizes as below.

Step 1 have some macros for size

#define kAlertViewWidth 300
#define kAlertViewHeight 300

Step 2 in @interface .Please create on property like this in the viewcontroller

@property (nonatomic, retain) IBOutlet UIView *myViewFromNib;

Getter Method For the property

-(UIView *)myViewFromNib
{
if (!_myViewFromNib) {
    _myViewFromNib = [[[NSBundle mainBundle] loadNibNamed:@"AlertView" owner:self options:nil] objectAtIndex:0];
    _myViewFromNib.translatesAutoresizingMaskIntoConstraints = NO;


}
return _myViewFromNib;
}

//Step 3 in viewDidLoad method

 -(void)viewDidLoad{
  [self setUpConstraints];
}

Method which will add the required constraints

    -(void)setUpConstraints
    {
        \[self.view addSubview:self.myViewFromNib\];
        \[NSLayoutConstraint activateConstraints:@\[\[NSLayoutConstraint constraintWithItem:self.myViewFromNib attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0\],

                                                  \[NSLayoutConstraint constraintWithItem:self.myViewFromNib attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0\],

                                                  \[NSLayoutConstraint constraintWithItem:self.myViewFromNib attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0
                                                                                constant:kAlertViewWidth\],

                                                  \[NSLayoutConstraint constraintWithItem:self.myViewFromNib attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0
                                                                                constant:kAlertViewHeight\]\]\];
    }

Answer 2

Instead of a xib and a storyboard, use a storyboard and inside your borderview add another view (with everything you have in the xib) and constrain that view within your borderview. Use the vertically center and horizontally center constraints to center the inner view. If you need to change the constraints later, create an outlet for them in your header file and adjust the priority. If you still want to use a xib within a view, try using a third party library like Masonry to adjust your xib.

Answer 3

If you have no choice but to do it this way try setting the centre manually. ie yourView.frame.x = super.frame.size.width/2 - yourView.frame.size.width/2. This should centre it horizontally. If it won't let you, then you'd have to add in the constraints after adding in to subview.