Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

View constraints - fit a subview

I am adding a subview to a view and I want it to fill the height and width of the view. I am having difficulty with constraints. Any help is appreciated. This is what I have currently:

    self.view.addSubview(self.mainView)

    var leftSideConstraint = NSLayoutConstraint(item: self.mainView, attribute: .Left, relatedBy: .Equal, toItem: self.view, attribute: .Left, multiplier: 1.0, constant: 0.0)
    var bottomConstraint = NSLayoutConstraint(item: self.mainView, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1.0, constant: 0.0)
    var widthConstraint = NSLayoutConstraint(item: self.mainView, attribute: .Width, relatedBy: .Equal, toItem: self.view, attribute: .Width, multiplier: 1.0, constant: 0.0)
    var heightConstraint = NSLayoutConstraint(item: self.mainView, attribute: .Height, relatedBy: .Equal, toItem: self.view, attribute: .Height, multiplier: 1.0, constant: 0.0)
    self.view.addConstraints([leftSideConstraint, bottomConstraint, widthConstraint, heightConstraint])
like image 338
g3k0 Avatar asked Nov 30 '22 01:11

g3k0


2 Answers

Swift 5

Here is an elegant way with using UIView extension

extension UIView {
    func addConstrained(subview: UIView) {
        addSubview(subview)
        subview.translatesAutoresizingMaskIntoConstraints = false
        subview.topAnchor.constraint(equalTo: topAnchor).isActive = true
        subview.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
        subview.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
        subview.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
    }
}

And then you add a subview wherever you need it with

yourContainerView.addConstrained(subview: yourSubview)
like image 187
Đorđe Nilović Avatar answered Dec 09 '22 15:12

Đorđe Nilović


The following code should work:

    let mainView = UIView() //Make sure your mainView is initialized
    mainView.backgroundColor = UIColor.blueColor() //For test purpose

    mainView.setTranslatesAutoresizingMaskIntoConstraints(false) //Don't forget this line
    view.addSubview(mainView)

    var leftSideConstraint = NSLayoutConstraint(item: mainView, attribute: .Left, relatedBy: .Equal, toItem: view, attribute: .Left, multiplier: 1.0, constant: 0.0)
    var bottomConstraint = NSLayoutConstraint(item: mainView, attribute: .Bottom, relatedBy: .Equal, toItem: view, attribute: .Bottom, multiplier: 1.0, constant: 0.0)
    var widthConstraint = NSLayoutConstraint(item: mainView, attribute: .Width, relatedBy: .Equal, toItem: view, attribute: .Width, multiplier: 1.0, constant: 0.0)
    var heightConstraint = NSLayoutConstraint(item: mainView, attribute: .Height, relatedBy: .Equal, toItem: view, attribute: .Height, multiplier: 1.0, constant: 0.0)
    view.addConstraints([leftSideConstraint, bottomConstraint, heightConstraint, widthConstraint])

As an alternative, you can use the Auto layout Visual Format Language:

    let mainView = UIView() //Make sure your mainView is initialized
    mainView.backgroundColor = UIColor.blueColor() //For test purpose

    mainView.setTranslatesAutoresizingMaskIntoConstraints(false) //Don't forget this line
    view.addSubview(mainView)

    var viewsDict = ["mainView" : mainView]

    var horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|[mainView]|", options: NSLayoutFormatOptions(0), metrics: nil, views: viewsDict)
    var verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|[mainView]|", options: NSLayoutFormatOptions(0), metrics: nil, views: viewsDict)
    view.addConstraints(horizontalConstraints)
    view.addConstraints(verticalConstraints)
like image 22
Imanou Petit Avatar answered Dec 09 '22 16:12

Imanou Petit