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

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可以根据自己的内容属性自动地设置它们的大小。a的宽度和高度UIImageView可以由其设置UIImage。a的大小UILabel取决于其文本。a的宽度和高度UIButton由标题和它的图像定义（您可以通过Innernsic Content Size了解更多信息）。

因此，当您要使用自动布局在a UIButton，a UILabel，a UITextField或a 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用其宽度和高度初始化我们的对象，使其中心和其superview的中心相等，并创建一些自动调整大小的蒙版。然后，我们要求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()方法（声明），以便其返回所需的大小：

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)
    }

}