ios - subview 在 View 中垂直居中对齐，以编程方式使用自动布局约束

Question

我需要在 View 中定位一个 subview 垂直居中对齐，而无需以编程方式使用约束对最高值 150 进行硬编码。我希望实现如下目标:

下面是我目前的代码，请指教。

import UIKit

class MainViewController: UIViewController {
 var viewInner:UIView = UIView()
    var viewOuter:UIView = UIView()


    override func viewDidLoad() {
        super.viewDidLoad()

        viewInner.backgroundColor = UIColor.redColor()
        viewOuter.backgroundColor = UIColor.purpleColor()
        viewOuter.frame = CGRectMake(100, 100, 400, 400)

        viewInner.setTranslatesAutoresizingMaskIntoConstraints(false)

        let viewsDictionary = ["viewInner":viewInner]

        viewOuter.addSubview(viewInner)
        self.view.addSubview(viewOuter)

        //Add Constraint

        var constOuterH = NSLayoutConstraint.constraintsWithVisualFormat("H:|-10-[viewInner(>=200)]-10-|", options: NSLayoutFormatOptions(0), metrics: nil, views: viewsDictionary)
        var constOuterV = NSLayoutConstraint.constraintsWithVisualFormat("V:|-150-[viewInner(100)]", options: NSLayoutFormatOptions(0), metrics: nil, views: viewsDictionary)

        viewOuter.addConstraints(constOuterH)
        viewOuter.addConstraints(constOuterV)
    }
}

Answer 1

需要使用非可视化的格式化方式添加约束:

[self.view addConstraint:[NSlayoutConstraint constraintWithItem:self.viewOuter attribute:NSLayoutAttributeCenterY relateBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY .......]];

居中对齐。

我倾向于使用上述类型的“关系约束”(这是我个人的称呼)来指定两个 View 之间的关系，例如中心对齐，相对定位。

另一方面，根据我自己的观察，视觉格式化语言对于将 View 相互固定更有用。

这是一个演示应用程序:

ViewController.h

@interface ViewController : UIViewController

@property (nonatomic, strong) UIView *outerView;
@property (nonatomic, strong) UIView *innerView;

@property (nonatomic, strong) NSLayoutConstraint *outerViewHeightConstraint;

@end

ViewController.m

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

    [self initViews];
    [self initConstraints];


    // change height of outerView after 3 seconds
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

        [self changeHeight];

    });
}

-(void)changeHeight
{
    self.outerViewHeightConstraint.constant = 150;

    [UIView animateWithDuration:1.0 animations:^{
        [self.innerView layoutIfNeeded];
        [self.view layoutIfNeeded];
    }];
}

-(void)initViews
{
    self.outerView = [[UIView alloc] init];
    self.outerView.backgroundColor = [UIColor purpleColor];

    self.innerView = [[UIView alloc] init];
    self.innerView.backgroundColor = [UIColor redColor];

    [self.outerView addSubview:self.innerView];

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

-(void)initConstraints
{
    self.outerView.translatesAutoresizingMaskIntoConstraints = NO;
    self.innerView.translatesAutoresizingMaskIntoConstraints = NO;

    id views = @{
                 @"outerView": self.outerView,
                 @"innerView": self.innerView
                 };

    // outer view constraints
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[outerView(300)]" options:0 metrics:nil views:views]];

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

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

    // give outerView a default height e.g. 300
    // note we can animate the height of outerview later using this var
    self.outerViewHeightConstraint = [NSLayoutConstraint constraintWithItem:self.outerView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1.0 constant:300.0];

    [self.view addConstraint:self.outerViewHeightConstraint];



    // inner view constraints
    [self.outerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[innerView]-10-|" options:0 metrics:nil views:views]];
    [self.outerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[innerView(50)]" options:0 metrics:nil views:views]];

    [self.outerView addConstraint:[NSLayoutConstraint constraintWithItem:self.innerView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.outerView attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0]];

    [self.outerView addConstraint:[NSLayoutConstraint constraintWithItem:self.innerView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.outerView attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0]];
}

运行应用 3 秒后，您会看到外部 View (紫色 View )的高度缩小，而红色内部 View 保持在紫色 View 的中心并保持其高度。

您也可以旋转 View 。