以编程方式向 UIView 添加约束

Posted 2023-03-11

【中文标题】以编程方式向 UIView 添加约束

【英文标题】：Programmatically adding constraints to UIView

【发布时间】：2017-08-04 04:00:32

【问题描述】：

我没有以编程方式完成太多 UI，但我有一个 UIView，我希望将 UILabel 限制在 UIView 的左上角，然后再有一个但这次限制在右上角。我完全知道如何在 GUI 上执行此操作，但我想知道如何纯粹通过 swift/以编程方式完成此操作。

【问题讨论】：

NSLayoutConstraint 和 Auto Layout Guide 是你的朋友。

【参考方案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)

【参考方案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

【参考方案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])