CODEWITHSUNDEEP
iosiphoneswiftxcodeuiview
TNguyen
TNguyen

Reputation: 1051

Programmatically adding constraints to UIView

I haven't done much UI Programmatically, but I have a UIView and I want a UILabel to be constrained to the top left corner of the UIView and then have another one but constrained to the top right corner this time. I'm fully aware of how to do this on the GUI but I was wondering how I would go about this purely through swift/programmatically.

Upvotes: 3

Views: 3018

Answers (3)

Neil Galiaskarov
Neil Galiaskarov

Reputation: 5073

This is done with NSLayoutConstraint class.

Firstly, add your label as subview:

let label = UILabel()   
label.translatesAutoresizingMaskIntoConstraints = false

view.addSubview(label)

Here is my extension in order to easily add constraints to subviews. The main method here for you to study is 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)
          }        
    }

Then you have very simple usage:

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

Upvotes: 2

Ramprasath Selvam
Ramprasath Selvam

Reputation: 4428

This is one way for Programatically adding Constrains to 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])

}

enter image description here

Upvotes: 0

iOS Geek
iOS Geek

Reputation: 4855

Look below code for reference to add constraints Programmatically in a View

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

Upvotes: 0

Related Questions