垂直居中使用自动约束多于一个子UIViews

Question

如何在视图中垂直居中4个UIButtons，使用自动布局约束保持按钮的相同空间和高度？

屏幕截图位于http://i.stack.imgur.com/SkPQz.png

Answer 1

以下是如何使用代码以编程方式执行此操作：

整个想法是将您的按钮包装在容器视图中，然后将其置于视图控制器的视图中心。这意味着所有按钮都会在视觉上居中，因为它们是子视图（假设您的子视图间距相等且尺寸相同）。

结果

源代码

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    [self initView];
    [self addAllContraints];
}

-(void)initView
{
    // your 4 boxes
    self.box1 = [[UILabel alloc] init];
    self.box1.backgroundColor = [UIColor blueColor];
    self.box1.text = @"Box 1";
    self.box1.textAlignment = NSTextAlignmentCenter;

    self.box2 = [[UILabel alloc] init];
    self.box2.backgroundColor = self.box1.backgroundColor;
    self.box2.text = @"Box 2";
    self.box2.textAlignment = self.box1.textAlignment;

    self.box3 = [[UILabel alloc] init];
    self.box3.backgroundColor = self.box1.backgroundColor;
    self.box3.text = @"Box 3";
    self.box3.textAlignment = self.box1.textAlignment;

    self.box4 = [[UILabel alloc] init];
    self.box4.backgroundColor = self.box1.backgroundColor;
    self.box4.text = @"Box 4";
    self.box4.textAlignment = self.box1.textAlignment;


    // box container view to hold the 4 boxes.
    self.boxContainer = [[UIView alloc] init];



    // add subviews to views

    [self.boxContainer addSubview:self.box1];
    [self.boxContainer addSubview:self.box2];
    [self.boxContainer addSubview:self.box3];
    [self.boxContainer addSubview:self.box4];

    [self.view addSubview:self.boxContainer];
}

-(void)addAllContraints
{
    self.box1.translatesAutoresizingMaskIntoConstraints = NO;
    self.box2.translatesAutoresizingMaskIntoConstraints = NO;
    self.box3.translatesAutoresizingMaskIntoConstraints = NO;
    self.box4.translatesAutoresizingMaskIntoConstraints = NO;
    self.boxContainer.translatesAutoresizingMaskIntoConstraints = NO;

    id views = @{
                 @"box1": self.box1,
                 @"box2": self.box2,
                 @"box3": self.box3,
                 @"box4": self.box4,
                 @"boxContainer": self.boxContainer
                 };

    // ------------------------------------------------------
    // tell the box container to be in the middle of the
    // view controller's view, horizontally and vertically
    // and because all 4 boxes are subviews of box container
    // they will be visually centered to the view controller
    // ------------------------------------------------------
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.boxContainer attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.boxContainer attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0]];


    // ------------------------------------------------------
    // set all 4 boxes to be equal width
    // ------------------------------------------------------
    //
    // note:
    //
    // box1 to box 4 all are subviews of boxContainer
    // so the '|' refers to the superview which is
    // boxContainer in this case, not self.view
    // ------------------------------------------------------
    [self.boxContainer addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[box1(150)]|" options:0 metrics:nil views:views]];
    [self.boxContainer addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[box2(==box1)]|" options:0 metrics:nil views:views]];
    [self.boxContainer addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[box3(==box1)]|" options:0 metrics:nil views:views]];
    [self.boxContainer addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[box4(==box1)]|" options:0 metrics:nil views:views]];

    // ------------------------------------------------------
    // equally space out all 4 boxes vertically
    // and that all 4 boxes should have equal height
    // ------------------------------------------------------
    [self.boxContainer addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[box1(40)]-10-[box2(==box1)]-10-[box3(==box1)]-10-[box4(==box1)]-10-|" options:0 metrics:nil views:views]];
}