以编程的方式向UIView添加约束条件

Question

我在编程方面并没有太多 UI 的经验，但我有一个 UIView，并且希望在它的左上角添加一个 UILabel，再在右上角添加另一个 UILabel。我对如何在 GUI 上完成这个操作非常了解，但我想知道如何在纯 Swift/编程方式下实现。

- TNguyen

---

NSLayoutConstraint和自动布局指南是你的好朋友。 - paulvs

Answer 1

这可以通过NSLayoutConstraint类来实现。

首先，将标签添加为子视图：

let label = UILabel()   
label.translatesAutoresizingMaskIntoConstraints = false

view.addSubview(label)

这是一个用于轻松添加子视图约束的扩展程序。您需要研究的主要方法是 func pin(firstSubview subview1:UIView, firstEdge edge1:NSLayoutAttribute, secondSubview subview2:UIView, secondEdge edge2:NSLayoutAttribute, with constant:Float)

     extension UIView {
          func pinSubview(_ subview:UIView, toEdge edge:NSLayoutAttribute, withConstant constant:Float) {
            self.pinSubviews(self, subview2: subview, toEdge: edge, withConstant: constant)
          }

          func pinSubviews(_ subview1:UIView, subview2:UIView, toEdge edge:NSLayoutAttribute, withConstant constant:Float) {
            pin(firstSubview: subview1, firstEdge: edge, secondSubview: subview2, secondEdge: edge, with: constant)
          }

          func pin(firstSubview subview1:UIView, firstEdge edge1:NSLayoutAttribute, secondSubview subview2:UIView, secondEdge edge2:NSLayoutAttribute, with constant:Float) {
            let constraint = NSLayoutConstraint(item: subview1, attribute: edge1, relatedBy: .equal, toItem: subview2, attribute: edge2, multiplier: 1, constant: CGFloat(constant))
            self.addConstraint(constraint)
          }

          func pinSubview(_ subview:UIView, withHeight height:CGFloat) {
            let height = NSLayoutConstraint(item: subview, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: height)
            self.addConstraint(height)
          }

          func pinSubview(_ subview:UIView, withWidth width:CGFloat) {
            let width = NSLayoutConstraint(item: subview, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: width)
            self.addConstraint(width)
          }        
    }

那么，您有非常简单的使用方法：

self.view.pinSubview(label, toEdge: .left, withConstant: 0)
self.view.pinSubview(label, toEdge: .top, withConstant: 0)

- Neil Galiaskarov

Answer 2

请参考下面的代码，了解如何在视图中以编程方式添加约束。

let containerView = UIView()
        containerView.translatesAutoresizingMaskIntoConstraints = false

        view.addSubview(containerView)

        //ios9 constraint anchors
        //x,y,w,h
        containerView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        containerView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        containerView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
        containerView.heightAnchor.constraint(equalToConstant: 50).isActive = true

        let sendButton = UIButton(type: .system)
        sendButton.setTitle("Send", for: UIControlState())
        sendButton.translatesAutoresizingMaskIntoConstraints = false
        sendButton.addTarget(self, action: #selector(handleSend), for: .touchUpInside)
        containerView.addSubview(sendButton)
        //x,y,w,h
        sendButton.rightAnchor.constraint(equalTo: containerView.rightAnchor).isActive = true
        sendButton.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true
        sendButton.widthAnchor.constraint(equalToConstant: 80).isActive = true
        sendButton.heightAnchor.constraint(equalTo: containerView.heightAnchor).isActive = true

        containerView.addSubview(inputTextField)
        //x,y,w,h
        inputTextField.leftAnchor.constraint(equalTo: containerView.leftAnchor, constant: 8).isActive = true
        inputTextField.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true
        inputTextField.rightAnchor.constraint(equalTo: sendButton.leftAnchor).isActive = true
        inputTextField.heightAnchor.constraint(equalTo: containerView.heightAnchor).isActive = true

- iOS Geek

Answer 3

这是一种编程方式，可以向UIView（）添加约束。

 override func viewDidLoad() {
            super.viewDidLoad()

let centerView = UIView()
        centerView.translatesAutoresizingMaskIntoConstraints = false
        centerView.backgroundColor = UIColor.brown
        view.addSubview(centerView)

        let centerViewhorizontalConstraint = NSLayoutConstraint(item: centerView, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0)

        let centerViewverticalConstraint = NSLayoutConstraint(item: centerView, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: view, attribute: NSLayoutAttribute.centerY, multiplier: 0.90, constant: 0)

        let centerViewwidthConstraint = NSLayoutConstraint(item: centerView, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 300)

        let centerViewheightConstraint = NSLayoutConstraint(item: centerView, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant:300)

        NSLayoutConstraint.activate([centerViewhorizontalConstraint, centerViewverticalConstraint, centerViewwidthConstraint, centerViewheightConstraint])

}

- Ramprasath Selvam