m.v.n.kalyani
m.v.n.kalyani

Reputation: 770

How to set equal widths for UIViews using auto-layouts "Constraint with item format"

In my application I have inserted UIViews on view controller. My main requirement is that I want to set equal widths for both UIViews using auto-layouts "Constraint with item format".

For this I have written some code but I did not get equal widths. What did I do here wrong?

I want get result like below image (i.e need to set equal widths for both UIViews).

My code:

#import "ViewController8.h"

@interface ViewController8 ()
{
    UIView * myView1;
    UIView * myView2;
}
@end

@implementation ViewController8

- (void)viewDidLoad {
    [super viewDidLoad];

    myView1 = [[UIView alloc] init];
    myView1.backgroundColor = [UIColor lightGrayColor];
    myView1.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:myView1];

    myView2 = [[UIView alloc] init];
    myView2.backgroundColor = [UIColor redColor];
    myView2.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:myView2];

    [self operation2];
}

-(void)operation2
{
    //Applying autolayouts for myview2

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:myView2
                                                          attribute:NSLayoutAttributeHeight
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:nil
                                                          attribute:0
                                                         multiplier:1.0
                                                           constant:50]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:myView2
                                                          attribute:NSLayoutAttributeTrailing
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeTrailing
                                                         multiplier:1.0
                                                           constant:-10]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:myView2
                                                          attribute:NSLayoutAttributeBottom
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeBottom
                                                         multiplier:1.0
                                                           constant:-30]];

    //Applying autolayouts for myview1

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:myView1
                                                          attribute:NSLayoutAttributeLeading
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeLeading
                                                         multiplier:1.0
                                                           constant:10]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:myView1
                                                          attribute:NSLayoutAttributeHeight
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:nil
                                                          attribute:0
                                                         multiplier:1.0
                                                           constant:50]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:myView1
                                                          attribute:NSLayoutAttributeTrailing
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:myView2
                                                          attribute:NSLayoutAttributeLeading
                                                         multiplier:1.0
                                                           constant:-30]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:myView1
                                                          attribute:NSLayoutAttributeBottom
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeBottom
                                                         multiplier:1.0
                                                           constant:-30]];
}

enter image description here

Upvotes: 2

Views: 1793

Answers (3)

Alexander Bekert
Alexander Bekert

Reputation: 619

Contemporary solution is using NSLayoutAnchor

myView1.widthAnchor.constraint(equalTo: myView2.widthAnchor)

don't forget to activate this using isActive = true, or via NSLayoutConstraint.activate().

Upvotes: 0

hennes
hennes

Reputation: 9342

It's enough to add the equal-width constraint

[NSLayoutConstraint constraintWithItem:myView1
                             attribute:NSLayoutAttributeWidth
                             relatedBy:NSLayoutRelationEqual
                                toItem:myView2
                             attribute:NSLayoutAttributeWidth
                            multiplier:1.0
                              constant:0];

You must not define the width of the two views explicitly using constraints because view1 is pinned to the leading edge of the superview, view2 is pinned to the trailing edge of the superview and the trailing edge of view1 is pinned to the leading edge of view2. Hence, the constraint system is fully determined after adding the above equal-width constraint.

This is what adding the constraint will lead to:

simulator screenshot with two equally sized views

Upvotes: 0

Dev
Dev

Reputation: 1213

Equal width constraint is not there in your posted code. Try adding this

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:myView1
  attribute:NSLayoutAttributeWidth 
  relatedBy:NSLayoutRelationEqual 
  toItem:nil 
  attribute:NSLayoutAttributeNotAnAttribute 
  multiplier:1.0 
  constant:200]];


[self.view addConstraint:[NSLayoutConstraint constraintWithItem:myView2
  attribute:NSLayoutAttributeWidth 
  relatedBy:NSLayoutRelationEqual 
  toItem:myView1
  attribute:NSLayoutAttributeWidth 
  multiplier:1.0 
  constant:0]];

Upvotes: 0

Related Questions