Question

I’m working on this iPad app and I’m thinking of using auto layout to make my life easier. I created this side bar control that allows users to change to a different page (just like the tab bar controller, but this is along the left side of the iPad). Now in landscape orientation I want the width of this view to be 256 px but when the iPad is in Portrait orientation I want this view to have a width of 100 px. How can I use auto layout to pin the width of the view depending on the interface orientation?

Answer 1

You can use the updateViewConstraints call to modify the layout on orientation change.

The example below creates a view programatically but you could wire up the width constraint of you side bar in interface builder to achieve the same thing.

For example:

//create a custom view using autolayout, this is the equivalent of you side bar
- (void)viewDidLoad{
  [super viewDidLoad];
  //create a custom view
  [self.view setTranslatesAutoresizingMaskIntoConstraints:NO];
  UIView *vw=[[UIView alloc] init];
  self.customView =vw;
  self.customView.backgroundColor = [UIColor blackColor];
  [self.customView setTranslatesAutoresizingMaskIntoConstraints:NO];
  [self.view addSubview:self.customView];

  NSArray *arr;

  //horizontal constraints
  arr = [NSLayoutConstraint constraintsWithVisualFormat:@"|-20-[vw]"
                                                options:0
                                                metrics:nil
                                                  views:NSDictionaryOfVariableBindings(vw)];
  [self.view addConstraints:arr];

  //vertical constraints
  arr = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[vw(200)]"
                                                options:0
                                                metrics:nil
                                                  views:NSDictionaryOfVariableBindings(vw)];
  [self.view addConstraints:arr];

}

- (void)updateViewConstraints{

  [super updateViewConstraints];

  //remove the existing contraint
  if(self.widthConstraint!=nil){
    [self.view removeConstraint:self.widthConstraint];
  }
  //portait set width to 100 
  if(UIInterfaceOrientationIsPortrait(self.interfaceOrientation)){
    self.widthConstraint = [NSLayoutConstraint constraintWithItem:self.customView
                                                        attribute:NSLayoutAttributeWidth
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:nil
                                                        attribute:0
                                                       multiplier:1.0
                                                         constant:100.0];
  }
  //landscape set width to 256
  else{
    self.widthConstraint = [NSLayoutConstraint constraintWithItem:self.customView
                                                        attribute:NSLayoutAttributeWidth
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:nil
                                                        attribute:0
                                                       multiplier:1.0
                                                         constant:256.0];
  }
  [self.view addConstraint:self.widthConstraint];
}