How to pin width of subviews relative? - objective-c

Question

I have one view controller with two subviews.
I would like to pin both of the subviews to have the same relative width.
Like this:
Thanks!

Answer 1

You need to pin subviews to top, left, right sides. Also set equal width property.
You should look at this tutorial, there is a good example of equal width containers.

Answer 2

Here is a simple version of doing the same thing with code,
#interface ViewController ()
#property (nonatomic, weak) UIView *view1;
#property (nonatomic, weak) UIView *view2;
#end
#implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
[self prepareView];
[self setupConstraints];
}
- (void)prepareView
{
UIView *view1 = [self createView];
UIView *view2 = [self createView];
[self.view addSubview:view1];
[self.view addSubview:view2];
self.view1 = view1;
self.view2 = view2;
}
- (void)setupConstraints
{
NSDictionary *views = #{
#"view1": self.view1,
#"view2": self.view2
};
NSString *horizontalFormat = #"H:|[view1][view2(==view1)]|";
NSString *verticalFormat = #"V:|[view1]|";
NSArray *horizontalConstraints;
NSArray *verticalConstraints;
horizontalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:horizontalFormat
options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom
metrics:nil
views:views];
verticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:verticalFormat
options:0
metrics:nil
views:views];
[self.view addConstraints:horizontalConstraints];
[self.view addConstraints:verticalConstraints];
}
- (UIView *)createView
{
UIView *view = [[UIView alloc ] initWithFrame:CGRectZero];
view.translatesAutoresizingMaskIntoConstraints = NO;
view.backgroundColor = [self randomColor];
return view;
}
- (UIColor *)randomColor
{
float red = arc4random_uniform(255) / 255.0;
float green = arc4random_uniform(255) / 255.0;
float blue = arc4random_uniform(255) / 255.0;
return [UIColor colorWithRed:red
green:green
blue:blue
alpha:1.0];
}
#end
The horizontalConstraint's options pin both the views top and bottom, while the format string also says that both the views has the same width. We have the first view pinned to the left edge, second view pinned to the right edge and both of them are equal, and also their top and bottom are pinned. Now, we need to tell the view that one of them is pinned to the top edge of the superView and bottom edge of the superView, which the verticalFormat describes. Now, that we have the views with equal widths, their top is pinned to superView's top and bottom to superView's bottom, the subviews will have layout as you have described. It would be quite easy to setup the constraints in storyboard knowing the above details.
You can also look at my previous answer which preserves the views position on rotation IOS AutoLayout Change possition on Rotation.