How To Set Auto Layout Constraints Programmatically for UITextView For Universal App with swift

Question

func setupView()
{
    self.blueView = UIView()
    self.blueView?.backgroundColor = UIColor.blueColor()
    self.blueView?.translatesAutoresizingMaskIntoConstraints = false

    self.addSubview(self.blueView!)

    let blueViewCenterXConstraint = NSLayoutConstraint(item: self.blueView!, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.CenterX, multiplier: 0.6, constant: 0)

    let blueViewCenterYConstraint = NSLayoutConstraint(item: self.blueView!, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: self, attribute: NSLayoutAttribute.CenterY, multiplier: 1.0, constant: 0)

    let blueViewWidthConstraint = NSLayoutConstraint(item: self.blueView!, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 0.6, constant: 150)

    let blueViewHeightConstraint = NSLayoutConstraint(item: self.blueView!, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1.0, constant: 150)

    self.addConstraints([blueViewCenterXConstraint,blueViewCenterYConstraint,blueViewWidthConstraint,blueViewHeightConstraint])


    self.redView = UIView()
    self.redView?.backgroundColor = UIColor.redColor()
    self.redView?.translatesAutoresizingMaskIntoConstraints = false

    self.addSubview(self.redView!)

    let redViewCenterXConstraint = NSLayoutConstraint(item: self.redView!, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: blueView, attribute: NSLayoutAttribute.TrailingMargin , multiplier: 0.5, constant: 0)

    let redViewCenterYConstraint = NSLayoutConstraint(item: self.redView!, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: blueView, attribute: NSLayoutAttribute.Top, multiplier: 0.5, constant: 0)

    let redViewWidthConstraint = NSLayoutConstraint(item: self.redView!, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: blueView, attribute: NSLayoutAttribute.Width, multiplier: 0.5, constant: 150)

    let redViewHeightConstraint = NSLayoutConstraint(item: self.redView!, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: blueView, attribute: NSLayoutAttribute.Height, multiplier: 0.5, constant: 150)

    self.addConstraints([redViewCenterXConstraint,redViewCenterYConstraint,redViewWidthConstraint,redViewHeightConstraint])
}

I have applied above code for Creating and Setting Auto Layout Constraint for UITextView for Universal App. I want to Put these both UITextView beside Each other for Every Device with the space of 10 between them horizontally and centered in Vertically. Will Anybody please be Grateful to fix mentioned issue, which would be helpful a lot to me.

Answer 1

I've taken the liberty of looking at you previous question and furthermore I've used NSLayoutAnchors (described here ) because I think they are easier to read.

Based on the above, this UIView subclass:

import UIKit

class UIViewUsingTextField: UIView {

    let width: CGFloat = 150.0

    var blueview = UIView()
    var redview = UIView()

    init() {
        super.init(frame: CGRect.zero)
        self.backgroundColor = UIColor.whiteColor()
        self.setupView()
    }

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
        setupView()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    func setupView() {
        //add blue view
        blueview.backgroundColor = UIColor.blueColor()
        blueview.translatesAutoresizingMaskIntoConstraints = false
        addSubview(blueview)

        //center the blue view and move it 1/2 view width to the left
        blueview.centerXAnchor.constraintEqualToAnchor(self.centerXAnchor, constant: -(width/2)).active = true
        blueview.centerYAnchor.constraintEqualToAnchor(self.centerYAnchor).active = true
        blueview.widthAnchor.constraintEqualToConstant(width).active = true
        blueview.heightAnchor.constraintEqualToConstant(width).active = true

        //add red view
        redview.backgroundColor = UIColor.redColor()
        redview.translatesAutoresizingMaskIntoConstraints = false
        addSubview(redview)

        //place red view 10 px to the right of blue view
        redview.leadingAnchor.constraintEqualToAnchor(blueview.trailingAnchor, constant: 10.0).active = true
        redview.centerYAnchor.constraintEqualToAnchor(blueview.centerYAnchor).active = true
        redview.widthAnchor.constraintEqualToAnchor(blueview.widthAnchor).active = true
        redview.heightAnchor.constraintEqualToAnchor(blueview.heightAnchor).active = true
    }    
}

Gives me this layout

Hope this resembles what you were after.

Answer 2

I have included a solution using your code, but would also like to show you how it is done using constraintWithVisualFormat, because I think it reads easier.

Solution for you code: Note that the width are set to a fixed value here. Not sure if this is really what you want.

func setupView()
{
    self.blueView = UIView()
    self.blueView?.backgroundColor = UIColor.blueColor()
    self.blueView?.translatesAutoresizingMaskIntoConstraints = false

    self.view.addSubview(self.blueView!)

    let blueViewCenterXConstraint = NSLayoutConstraint(item: self.blueView!, attribute: NSLayoutAttribute.Trailing, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: -5)

    let blueViewCenterYConstraint = NSLayoutConstraint(item: self.blueView!, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.CenterY, multiplier: 1.0, constant: 0)

    let blueViewWidthConstraint = NSLayoutConstraint(item: self.blueView!, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 150)

    let blueViewHeightConstraint = NSLayoutConstraint(item: self.blueView!, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1.0, constant: 150)

    self.view.addConstraints([blueViewCenterXConstraint,blueViewCenterYConstraint,blueViewWidthConstraint,blueViewHeightConstraint])


    self.redView = UIView()
    self.redView?.backgroundColor = UIColor.redColor()
    self.redView?.translatesAutoresizingMaskIntoConstraints = false

    self.view.addSubview(self.redView!)

    let redViewCenterXConstraint = NSLayoutConstraint(item: self.redView!, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: blueView, attribute: NSLayoutAttribute.Trailing , multiplier: 1, constant: 10)

    let redViewCenterYConstraint = NSLayoutConstraint(item: self.redView!, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: blueView, attribute: NSLayoutAttribute.Top, multiplier: 1, constant: 0)

    let redViewWidthConstraint = NSLayoutConstraint(item: self.redView!, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: blueView, attribute: NSLayoutAttribute.Width, multiplier: 1, constant: 1)

    let redViewHeightConstraint = NSLayoutConstraint(item: self.redView!, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: blueView, attribute: NSLayoutAttribute.Height, multiplier: 1, constant: 1)

    self.view.addConstraints([redViewCenterXConstraint,redViewCenterYConstraint,redViewWidthConstraint,redViewHeightConstraint])
}

Solution using visual constraints

        let views = ["redView": redView!, "blueView": blueView!]

    //setup the horizontal constraints to have 15 leading and trailing constraints, equal widths for blueView and redView and 10 spacing in between.
    self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-15-[blueView(==redView)]-10-[redView]-15-|", options: .AlignAllCenterY, metrics: nil, views: views))

    //set the height of the two views
    self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[blueView(150)]", options: .AlignAllCenterX, metrics: nil, views: views))
    self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[redView(150)]", options: .AlignAllCenterX, metrics: nil, views: views))

    //align the two views relative to the centre of the superview.
    blueView!.centerYAnchor.constraintEqualToAnchor(view!.centerYAnchor, constant: 0).active = true
    redView!.centerYAnchor.constraintEqualToAnchor(blueView!.centerYAnchor).active = true

Replace self.view with self for your example