Question

如何使用自动布局以编程方式将UIView设置为其超级视图的中心？

UIButton* viewObj = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[viewObj setTranslatesAutoresizingMaskIntoConstraints:NO];
[viewObj setBackgroundColor:[UIColor greenColor]];
[self.view addSubview:viewObj];

NSLayoutConstraint* cn = [NSLayoutConstraint constraintWithItem:viewObj
                                                      attribute:NSLayoutAttributeCenterX
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.view
                                                      attribute:NSLayoutAttributeCenterX 
                                                     multiplier:1.0
                                                       constant:0];
[self.view addConstraint:cn];
cn = [NSLayoutConstraint constraintWithItem:viewObj 
                                  attribute:NSLayoutAttributeCenterY
                                  relatedBy:NSLayoutRelationEqual 
                                     toItem:self.view
                                  attribute:NSLayoutAttributeCenterY
                                 multiplier:1.0
                                   constant:0];
[self.view addConstraint:cn];

上面的代码适用于UIButton，但是我在使用适用于UIView的东西替换第一行时遇到了麻烦。

我试过

UIView* viewObj = [UIView alloc] initWithFrame:CGRectZero];

但视图未显示在模拟器中。

有什么建议吗？

谢谢！

Answer 1

由于您在使用自动布局的上下文中提出了这个问题，这里的问题是UIButton具有内在大小（通过intrinsicContentSize方法传递），它为Auto Layout提供有关宽度和高度的信息，但是UIView通常会这样做不。因此，您需要添加更多与宽度和高度相关的约束。

如果你想要你的UIView是一个设定的大小（比方说，200x200），你可以添加这些行：

cn = [NSLayoutConstraint constraintWithItem:viewObj 
                                  attribute:NSLayoutAttributeHeight
                                  relatedBy:NSLayoutRelationEqual 
                                     toItem:nil
                                  attribute:NSLayoutAttributeNotAnAttribute 
                                 multiplier:1
                                   constant:200];
[viewObj addConstraint:cn];

cn = [NSLayoutConstraint constraintWithItem:viewObj
                                  attribute:NSLayoutAttributeWidth
                                  relatedBy:NSLayoutRelationEqual
                                     toItem:nil
                                  attribute:NSLayoutAttributeNotAnAttribute 
                                 multiplier:1 
                                   constant:200];
[viewObj addConstraint: cn];

请注意，toItem:参数为nil，第二个属性为NSLayoutAttributeNotAnAttribute，因为您没有指定相对于其他任何内容的宽度和高度。如果您希望子视图的高度和宽度相对于superview（例如，0.5），则可以执行以下操作：

cn = [NSLayoutConstraint constraintWithItem:viewObj
                                  attribute:NSLayoutAttributeHeight
                                  relatedBy:NSLayoutRelationEqual
                                     toItem:self.view
                                  attribute:NSLayoutAttributeHeight 
                                 multiplier:0.5 
                                   constant:0];
[self.view addConstraint:cn];
cn = [NSLayoutConstraint constraintWithItem:viewObj
                                  attribute:NSLayoutAttributeWidth
                                  relatedBy:NSLayoutRelationEqual
                                     toItem:self.view
                                  attribute:NSLayoutAttributeWidth
                                 multiplier:0.5
                                   constant:0];
[self.view addConstraint: cn];

Answer 2

UIButton，UIImageView，UIlabel和UITextField可以根据内容属性自动设置尺寸。 UIImageView的宽度和高度由其可能包含的UIImage设置。 UILabel的大小取决于其文本。 UIButton的宽度和高度由标题和图片定义（您可以使用Intrinsic Content Size了解有关它的更多信息。）

因此，如果您希望将UIButton，UILabel，UITextField或UIImageView置于UIView的自动布局中，所有情况下你都不必为它们的宽度和高度创建约束。您只需要为它们设置水平和垂直约束。

但是，对于自动布局，没有子视图的UIView无法依赖任何设置其大小，除非您提供一些任意宽度和高度限制。根据您的需求，您可以通过3种不同的方式解决这个问题。

纯自动布局样式

在这里，我们将UIView的宽度和高度直接设置为自动布局约束：

override func viewDidLoad() {
    super.viewDidLoad()

    let newView = UIView()
    newView.backgroundColor = .redColor()
    newView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(newView)

    // Auto layout code using anchors (iOS9+)
    let horizontalConstraint = newView.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor)
    let verticalConstraint = newView.centerYAnchor.constraintEqualToAnchor(view.centerYAnchor)
    let widthConstraint = newView.widthAnchor.constraintEqualToAnchor(nil, constant: 100)
    let heightConstraint = newView.heightAnchor.constraintEqualToAnchor(nil, constant: 100)
    NSLayoutConstraint.activateConstraints([horizontalConstraint, verticalConstraint, widthConstraint, heightConstraint])
}

自动调整遮罩样式

在这里，我们用宽度和高度初始化UIView，使其中心和超视图的中心相等，并创建一些自动调整遮罩。然后，我们要求UIKit将这些自动调整掩码转换为自动布局约束：

override func viewDidLoad() {
    super.viewDidLoad()

    let newView = UIView(frame: CGRect(x: 0.0, y: 0.0, width: 100.0, height: 100.0))
    newView.backgroundColor = .redColor()

    newView.center = CGPointMake(view.bounds.midX, view.bounds.midY)
    newView.autoresizingMask = [.FlexibleLeftMargin, .FlexibleRightMargin, .FlexibleTopMargin, .FlexibleBottomMargin]

    newView.translatesAutoresizingMaskIntoConstraints = true // default is true
    view.addSubview(newView)
}

子类样式

在这里，我们创建了UIView的子类并覆盖其intrinsicContentSize()方法（declaration），以便它返回所需的大小：

import UIKit

class CustomView: UIView {
    override func intrinsicContentSize() -> CGSize {
        return CGSize(width: 100, height: 100)
    }
}

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let newView = CustomView()
        newView.backgroundColor = .redColor()
        newView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(newView)

        let horizontalConstraint = NSLayoutConstraint(item: newView,
            attribute: .CenterX,
            relatedBy: .Equal,
            toItem: view,
            attribute: .CenterX,
            multiplier: 1,
            constant: 0)
        view.addConstraint(horizontalConstraint)
        let verticalConstraint = NSLayoutConstraint(item: newView,
            attribute: .CenterY,
            relatedBy: .Equal,
            toItem: view,
            attribute: .CenterY,
            multiplier: 1,
            constant: 0)
        view.addConstraint(verticalConstraint)
    }

}

iOS - 以编程方式使用自动布局将UIView置于超视图的中心

2 个答案:

纯自动布局样式

自动调整遮罩样式

子类样式