Swift: Can't center UIView in Superview with NSLayoutConstraint - ios

i'm trying to center a view in the parent view but its not centering as expected. Here is my code an a screenshot of the result.
emptyView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(emptyView)
let centerXConstraint = NSLayoutConstraint(item: emptyView, attribute: .centerX, relatedBy: .equal, toItem: self.view, attribute: .centerX, multiplier: 1, constant: 0)
let centerYConstraint = NSLayoutConstraint(item: emptyView, attribute: .centerY, relatedBy: .equal, toItem: self.view, attribute: .centerY, multiplier: 1, constant: 0)
self.view.addConstraints([centerXConstraint])
self.view.addConstraints([centerYConstraint])

Here is the code,
import UIKit
class ViewController: UIViewController
{
#IBOutlet weak var emptyView: UIView!
override func viewDidLoad()
{
super.viewDidLoad()
self.emptyView.translatesAutoresizingMaskIntoConstraints = false
let centerXConstraint = NSLayoutConstraint(item: emptyView, attribute: .centerX, relatedBy: .equal, toItem: self.view, attribute: .centerX, multiplier: 1, constant: 0)
let centerYConstraint = NSLayoutConstraint(item: emptyView, attribute: .centerY, relatedBy: .equal, toItem: self.view, attribute: .centerY, multiplier: 1, constant: 0)
let widthConstraint = NSLayoutConstraint(item: emptyView, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 100)
let heightConstraint = NSLayoutConstraint(item: emptyView, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 100)
self.view.addConstraints([centerXConstraint, centerYConstraint, widthConstraint, heightConstraint])
self.view.layoutIfNeeded()
}
}
If you are using label or button or any other view that have intrinsic size, there is no need for height and width constraints
ViewController Interface :
Output :

Try this code
emptyView.translatesAutoresizingMaskIntoConstraints = false
let widthConstraint = NSLayoutConstraint(item: emptyView, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: emptyView.frame.size.width)
let heightConstraint = NSLayoutConstraint(item: emptyView, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: emptyView.frame.size.height)
var constraints = NSLayoutConstraint.constraints(
withVisualFormat: "V:[superview]-(<=1)-[label]",
options: NSLayoutFormatOptions.alignAllCenterX,
metrics: nil,
views: ["superview":view, "label": emptyView])
view.addConstraints(constraints)
// Center vertically
constraints = NSLayoutConstraint.constraints(
withVisualFormat: "H:[superview]-(<=1)-[label]",
options: NSLayoutFormatOptions.alignAllCenterY,
metrics: nil,
views: ["superview":view, "label": emptyView])
view.addConstraints(constraints)
view.addConstraints([ widthConstraint, heightConstraint])

Related

UIScrollView is not scrolling after end of screen

I am trying to work with UIScrollView which I am adding programatically with auto layouts. I read other SO answers but none of them is working for me. My ScollView is scrolling but upto some point. After that end of the last child view is not showing. What i did was ,added a contentView to the UIScrollView and added subviews to the contentView. All the subviews are
translatesAutoresizingMaskIntoConstraints=false which is supposed t give me contentSize based on the constraints of the views but it is not. I tried locking the bottom of the contentView to the scrollview and also the bottom of the last subview of the contentview to the scrollview but it not working. Basically there are cards in the contentView which has height constraints. But they are not scrolling to the end. Last child is not scrolled to the end no matter what I do. What can be wrong with this approach?
class NodeSettingViewController: UIViewController,UIScrollViewDelegate {
var scrollView:UIScrollView?
var cellVM:NodeAppCellViewModel?
var contentView:UIView?
override func viewDidLoad() {
super.viewDidLoad()
let img = UIImage(named: "back_arrow")
let size = CGSize(width: 20, height: 20)
UIGraphicsBeginImageContext(size)
img!.draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height))
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
let backButton = UIBarButtonItem(image: image, style: UIBarButtonItemStyle.plain, target: self, action: #selector(closeButtonTapped(_:)))
self.view.backgroundColor = UIColor.white
let appBar = MDCAppBarViewController()
appBar.headerStackView.backgroundColor = UIColor(netHex: Constants.color)
appBar.navigationBar.titleAlignment = .center
appBar.navigationBar.titleTextColor = UIColor.white
appBar.navigationBar.backItem = backButton
appBar.navigationBar.title = cellVM!.appName == nil ? "" : cellVM!.appName!
view.addSubview(appBar.view)
scrollView = UIScrollView()
scrollView!.translatesAutoresizingMaskIntoConstraints=false
contentView = UIView()
contentView!.backgroundColor = UIColor(netHex: Constants.BACKGROUUND_COLOR)
contentView!.translatesAutoresizingMaskIntoConstraints=false
let statusAndImageHolder = StatusAndImageHolderView()
statusAndImageHolder.translatesAutoresizingMaskIntoConstraints=false
statusAndImageHolder.setup(cellVM: cellVM)
contentView!.addSubview(statusAndImageHolder)
let healthCard = HealthCard()
healthCard.setShadowElevation(ShadowElevation.cardResting, for: UIControlState.normal)
healthCard.translatesAutoresizingMaskIntoConstraints=false
healthCard.setup(hubID: cellVM!.nodeApp!.hubId!, nodeID: cellVM!.nodeApp!.nodeId!,nApp: cellVM!.nodeApp)
let upperConstaintHealthCard = NSLayoutConstraint(item: healthCard, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: contentView!.subviews[contentView!.subviews.count-1], attribute: NSLayoutAttribute.bottom, multiplier: 1, constant:10)
let leftConstraintHealthCard = NSLayoutConstraint(item: healthCard, attribute: NSLayoutAttribute.left, relatedBy: NSLayoutRelation.equal, toItem: contentView, attribute: NSLayoutAttribute.left, multiplier: 1, constant: 10)
let rightConstraintHealthCard = NSLayoutConstraint(item: healthCard, attribute: NSLayoutAttribute.right, relatedBy: NSLayoutRelation.equal, toItem: contentView, attribute: NSLayoutAttribute.right, multiplier: 1, constant: -10)
let heightConstraintHealthCard = NSLayoutConstraint(item: healthCard, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 150)
contentView!.addSubview(healthCard)
let additionalInfoCard = AdditionalInformationCard()
additionalInfoCard.translatesAutoresizingMaskIntoConstraints=false
additionalInfoCard.setShadowElevation(ShadowElevation.cardResting, for: UIControlState.normal)
additionalInfoCard.setup()
let upperConstaintAdditionalInfoCard = NSLayoutConstraint(item: additionalInfoCard, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: contentView!.subviews[contentView!.subviews.count-1], attribute: NSLayoutAttribute.bottom, multiplier: 1, constant:10)
let leftConstraintAdditionalInfoCard = NSLayoutConstraint(item: additionalInfoCard, attribute: NSLayoutAttribute.left, relatedBy: NSLayoutRelation.equal, toItem: contentView, attribute: NSLayoutAttribute.left, multiplier: 1, constant: 10)
let rightConstraintAdditionalInfoCard = NSLayoutConstraint(item: additionalInfoCard, attribute: NSLayoutAttribute.right, relatedBy: NSLayoutRelation.equal, toItem: contentView, attribute: NSLayoutAttribute.right, multiplier: 1, constant: -10)
let heightConstraintAdditionalInfoCard = NSLayoutConstraint(item: additionalInfoCard, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 270)
contentView!.addSubview(additionalInfoCard)
let upperConstaintHolder = NSLayoutConstraint(item: statusAndImageHolder, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: contentView, attribute: NSLayoutAttribute.top, multiplier: 1, constant:0)
let leftConstraintHolder = NSLayoutConstraint(item: statusAndImageHolder, attribute: NSLayoutAttribute.left, relatedBy: NSLayoutRelation.equal, toItem: contentView, attribute: NSLayoutAttribute.left, multiplier: 1, constant: 0)
let rightConstraintHolder = NSLayoutConstraint(item: statusAndImageHolder, attribute: NSLayoutAttribute.right, relatedBy: NSLayoutRelation.equal, toItem: contentView, attribute: NSLayoutAttribute.right, multiplier: 1, constant: -0)
let heightConstraintHolder = NSLayoutConstraint(item: statusAndImageHolder, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 150)
scrollView!.addSubview(contentView!)
scrollView!.bringSubview(toFront: contentView!)
self.view.addSubview(scrollView!)
let contentSize = UIScreen.main.bounds.size.width
let contentHeight = UIScreen.main.bounds.size.height-30
let upperConstaintScrollView = NSLayoutConstraint(item: scrollView!, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: appBar.view, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: 0)
let leftConstraintScrollView = NSLayoutConstraint(item: scrollView!, attribute: NSLayoutAttribute.left, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.left, multiplier: 1, constant: 0)
let rightConstraintScrollView = NSLayoutConstraint(item: scrollView!, attribute: NSLayoutAttribute.right, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.right, multiplier: 1, constant: -0)
let bottomConstraintScrollView = NSLayoutConstraint(item: scrollView!, attribute: NSLayoutAttribute.bottom, relatedBy: NSLayoutRelation.equal, toItem: self.view, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: -0)
let upperConstaintContentView = NSLayoutConstraint(item: contentView!, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: scrollView!, attribute: NSLayoutAttribute.top, multiplier: 1, constant: 0)
let leftConstraintContentView = NSLayoutConstraint(item: contentView!, attribute: NSLayoutAttribute.left, relatedBy: NSLayoutRelation.equal, toItem: scrollView!, attribute: NSLayoutAttribute.left, multiplier: 1, constant: 0)
let widthConstraintContentView = NSLayoutConstraint(item: contentView!, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: contentSize)
let heightConstraintContentView = NSLayoutConstraint(item: contentView!, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: contentHeight)
NSLayoutConstraint.activate([upperConstaintScrollView,leftConstraintScrollView,rightConstraintScrollView,bottomConstraintScrollView,upperConstaintContentView,leftConstraintContentView,widthConstraintContentView,heightConstraintContentView,
upperConstaintHolder,leftConstraintHolder,rightConstraintHolder,heightConstraintHolder,
upperConstaintHealthCard,leftConstraintHealthCard,rightConstraintHealthCard,heightConstraintHealthCard,upperConstaintAdditionalInfoCard,leftConstraintAdditionalInfoCard,rightConstraintAdditionalInfoCard,heightConstraintAdditionalInfoCard])
}
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// Get the new view controller using segue.destination.
// Pass the selected object to the new view controller.
}
*/
#objc func closeButtonTapped(_ sender:Any){
self.dismiss(animated: true, completion: nil)
}
override func viewDidLayoutSubviews() {
scrollView?.isUserInteractionEnabled=true
scrollView!.isScrollEnabled=true
scrollView!.delegate=self
scrollView!.contentSize = contentView!.frame.size
}
}
I am sharing one of my card which is the last child of the subview.
class AdditionalInformationCard: MDCCard {
var titleLabel:UILabel?
var placeIdLabel:UILabel?
var eIDLabel:UILabel?
var hubIdLabel:UILabel?
var parentIDLabel:UILabel?
var deviceAddressLabel:UILabel?
var appIDLabel:UILabel?
var firmwareVersionLabel:UILabel?
var addedOnLabel:UILabel?
override func awakeFromNib() {
super.awakeFromNib()
}
func setup(){
let cardWidth = UIScreen.main.bounds.size.width-20
let contentWidth = cardWidth-20
titleLabel = UILabel()
titleLabel?.font = UIFont.boldSystemFont(ofSize: 18.0)
titleLabel?.textColor = UIColor(netHex: Constants.color)
titleLabel?.textAlignment = .left
titleLabel?.text = "Additional Information"
titleLabel?.translatesAutoresizingMaskIntoConstraints=false
self.addSubview(titleLabel!)
placeIdLabel = UILabel()
placeIdLabel?.textColor = UIColor.gray
placeIdLabel?.text = "Place Id"
placeIdLabel?.translatesAutoresizingMaskIntoConstraints=false
self.addSubview(placeIdLabel!)
eIDLabel = UILabel()
eIDLabel?.textColor = UIColor.gray
eIDLabel?.text = "eId"
eIDLabel?.translatesAutoresizingMaskIntoConstraints=false
self.addSubview(eIDLabel!)
hubIdLabel = UILabel()
hubIdLabel?.textColor = UIColor.gray
hubIdLabel?.text = "HUB Id"
hubIdLabel?.translatesAutoresizingMaskIntoConstraints=false
self.addSubview(hubIdLabel!)
parentIDLabel = UILabel()
parentIDLabel?.textColor = UIColor.gray
parentIDLabel?.text = "Parent Id"
parentIDLabel?.translatesAutoresizingMaskIntoConstraints=false
self.addSubview(parentIDLabel!)
deviceAddressLabel = UILabel()
deviceAddressLabel?.textColor = UIColor.gray
deviceAddressLabel?.text = "Device Address"
deviceAddressLabel?.translatesAutoresizingMaskIntoConstraints=false
self.addSubview(deviceAddressLabel!)
appIDLabel = UILabel()
appIDLabel?.textColor = UIColor.gray
appIDLabel?.text = "App Id"
appIDLabel?.translatesAutoresizingMaskIntoConstraints=false
self.addSubview(appIDLabel!)
firmwareVersionLabel = UILabel()
firmwareVersionLabel?.textColor = UIColor.gray
firmwareVersionLabel?.text = "Firmware Version"
firmwareVersionLabel?.translatesAutoresizingMaskIntoConstraints=false
self.addSubview(firmwareVersionLabel!)
addedOnLabel = UILabel()
addedOnLabel?.textColor = UIColor.gray
addedOnLabel?.text = "Added On"
addedOnLabel?.translatesAutoresizingMaskIntoConstraints=false
self.addSubview(addedOnLabel!)
let upperConstraintTitle = NSLayoutConstraint(item: titleLabel!, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: NSLayoutAttribute.top, multiplier: 1, constant: 5)
let leftConstraintTitle = NSLayoutConstraint(item: titleLabel!, attribute: NSLayoutAttribute.left, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: NSLayoutAttribute.left, multiplier: 1, constant: 10)
let rightConstraintTitle = NSLayoutConstraint(item: titleLabel!, attribute: NSLayoutAttribute.right, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: NSLayoutAttribute.right, multiplier: 1, constant: 10)
let heightConstraintTitle = NSLayoutConstraint(item: titleLabel!, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 20)
let upperConstraintPlaceId = NSLayoutConstraint(item: placeIdLabel!, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: titleLabel!, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: 10)
let leftConstraintPlaceId = NSLayoutConstraint(item: placeIdLabel!, attribute: NSLayoutAttribute.left, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: NSLayoutAttribute.left, multiplier: 1, constant: 10)
let widthConstraintPlaceId = NSLayoutConstraint(item: placeIdLabel!, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: contentWidth/2)
let heightConstraintPlaceId = NSLayoutConstraint(item: placeIdLabel!, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 20)
let upperConstrainteId = NSLayoutConstraint(item: eIDLabel!, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: placeIdLabel!, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: 8)
let leftConstrainteId = NSLayoutConstraint(item: eIDLabel!, attribute: NSLayoutAttribute.left, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: NSLayoutAttribute.left, multiplier: 1, constant: 10)
let widthConstrainteId = NSLayoutConstraint(item: eIDLabel!, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: contentWidth/2)
let heightConstrainteId = NSLayoutConstraint(item: eIDLabel!, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 20)
let upperConstraintHubIdLabel = NSLayoutConstraint(item: hubIdLabel!, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: eIDLabel!, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: 8)
let leftConstraintHubIdLabel = NSLayoutConstraint(item: hubIdLabel!, attribute: NSLayoutAttribute.left, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: NSLayoutAttribute.left, multiplier: 1, constant: 10)
let widthConstraintHubIdLabel = NSLayoutConstraint(item: hubIdLabel!, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: contentWidth/2)
let heightConstraintHubIdLabel = NSLayoutConstraint(item: hubIdLabel!, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 20)
let upperConstraintParentIdLabel = NSLayoutConstraint(item: parentIDLabel!, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: hubIdLabel!, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: 8)
let leftConstraintParentIdLabel = NSLayoutConstraint(item: parentIDLabel!, attribute: NSLayoutAttribute.left, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: NSLayoutAttribute.left, multiplier: 1, constant: 10)
let widthConstraintParentIdLabel = NSLayoutConstraint(item: parentIDLabel!, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: contentWidth/2)
let heightConstraintParentIdLabel = NSLayoutConstraint(item: parentIDLabel!, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 20)
let upperConstraintDeiveAddressLabel = NSLayoutConstraint(item: deviceAddressLabel!, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: parentIDLabel!, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: 8)
let leftConstraintDeiveAddressLabel = NSLayoutConstraint(item: deviceAddressLabel!, attribute: NSLayoutAttribute.left, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: NSLayoutAttribute.left, multiplier: 1, constant: 10)
let widthConstraintDeiveAddressLabel = NSLayoutConstraint(item: deviceAddressLabel!, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: contentWidth/2)
let heightConstraintDeiveAddressLabel = NSLayoutConstraint(item: deviceAddressLabel!, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 20)
let upperConstraintAppId = NSLayoutConstraint(item: appIDLabel!, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: deviceAddressLabel!, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: 8)
let leftConstraintAppId = NSLayoutConstraint(item: appIDLabel!, attribute: NSLayoutAttribute.left, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: NSLayoutAttribute.left, multiplier: 1, constant: 10)
let widthConstraintAppId = NSLayoutConstraint(item: appIDLabel!, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: contentWidth/2)
let heightConstraintAppId = NSLayoutConstraint(item: appIDLabel!, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 20)
let upperConstraintFirmwareVersion = NSLayoutConstraint(item: firmwareVersionLabel!, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: appIDLabel!, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: 8)
let leftConstraintFirmwareVersion = NSLayoutConstraint(item: firmwareVersionLabel!, attribute: NSLayoutAttribute.left, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: NSLayoutAttribute.left, multiplier: 1, constant: 10)
let widthConstraintFirmwareVersion = NSLayoutConstraint(item: firmwareVersionLabel!, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: contentWidth/2)
let heightConstraintFirmwareVersion = NSLayoutConstraint(item: firmwareVersionLabel!, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 20)
let upperConstraintAddedOn = NSLayoutConstraint(item: addedOnLabel!, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal, toItem: firmwareVersionLabel!, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: 8)
let leftConstraintAddedOn = NSLayoutConstraint(item: addedOnLabel!, attribute: NSLayoutAttribute.left, relatedBy: NSLayoutRelation.equal, toItem: self, attribute: NSLayoutAttribute.left, multiplier: 1, constant: 10)
let widthConstraintAddedOn = NSLayoutConstraint(item: addedOnLabel!, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: contentWidth/2)
let heightConstraintAddedOn = NSLayoutConstraint(item: addedOnLabel!, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1, constant: 20)
NSLayoutConstraint.activate([upperConstraintTitle,leftConstraintTitle,rightConstraintTitle,heightConstraintTitle,
upperConstraintPlaceId,leftConstraintPlaceId,widthConstraintPlaceId,heightConstraintPlaceId,
upperConstrainteId,leftConstrainteId,widthConstrainteId,heightConstrainteId,
upperConstraintHubIdLabel,leftConstraintHubIdLabel,widthConstraintHubIdLabel,heightConstraintHubIdLabel,
upperConstraintParentIdLabel,leftConstraintParentIdLabel,widthConstraintParentIdLabel,heightConstraintParentIdLabel,upperConstraintDeiveAddressLabel,leftConstraintDeiveAddressLabel,widthConstraintDeiveAddressLabel,heightConstraintDeiveAddressLabel,
upperConstraintAppId,leftConstraintAppId,widthConstraintAppId,heightConstraintAppId,
upperConstraintFirmwareVersion,leftConstraintFirmwareVersion,widthConstraintFirmwareVersion,heightConstraintFirmwareVersion,upperConstraintAddedOn,leftConstraintAddedOn,widthConstraintAddedOn,heightConstraintAddedOn])
}
}

Layout Constraints Added Programmatically to UITableViewCell

I am attempting to reproduce the constraints in this screenshot, which are applied to a static UITableViewCell:
Here is the code I'm using to try to do this:
#IBOutlet weak var cellTest: UITableViewCell!
override func viewDidLoad() {
super.viewDidLoad()
cellTest.backgroundColor = UIColor.yellowColor()
let vw = UIView()
vw.backgroundColor = UIColor.greenColor()
cellTest.contentView.addSubview(vw)
cellTest.contentView.translatesAutoresizingMaskIntoConstraints = false
vw.translatesAutoresizingMaskIntoConstraints = false
let constraintWidth = NSLayoutConstraint(item: vw, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 400)
let constraintHeight = NSLayoutConstraint(item: vw, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 150)
let constraintCentreX = NSLayoutConstraint(item: vw, attribute: .CenterX, relatedBy: .Equal, toItem: vw.superview!, attribute: .CenterX, multiplier: 1, constant: 0)
let constraintCentreY = NSLayoutConstraint(item: vw, attribute: .CenterY, relatedBy: .Equal, toItem: vw.superview!, attribute: .CenterY, multiplier: 1, constant: 0)
cellTest.contentView.addConstraints([constraintWidth, constraintHeight, constraintCentreX, constraintCentreY ])
}
However, below is the unexpected output, with the view in the top left instead of centred. Any help is much appreciated as I've spent quite some time trying to figure this out:
I needed to add constraints to the cell's contentView, as well. These are added to the cell itself.
Code and screenshot below.
#IBOutlet weak var cellTest: UITableViewCell!
override func viewDidLoad() {
super.viewDidLoad()
cellTest.backgroundColor = UIColor.yellowColor()
let vw = UIView()
vw.backgroundColor = UIColor.greenColor()
cellTest.contentView.addSubview(vw)
cellTest.contentView.translatesAutoresizingMaskIntoConstraints = false
vw.translatesAutoresizingMaskIntoConstraints = false
let bottomConstraint = NSLayoutConstraint(item: cellTest.contentView, attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.Equal, toItem: cellTest.contentView.superview!, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0)
let trailingConstraint = NSLayoutConstraint(item: cellTest.contentView, attribute: NSLayoutAttribute.Trailing, relatedBy: NSLayoutRelation.Equal, toItem: cellTest.contentView.superview!, attribute: NSLayoutAttribute.Trailing, multiplier: 1, constant: 0)
let topConstraint = NSLayoutConstraint(item: cellTest.contentView, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: cellTest.contentView.superview!, attribute: NSLayoutAttribute.Top, multiplier: 1, constant: 0)
let leadingConstraint = NSLayoutConstraint(item: cellTest.contentView, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: cellTest.contentView.superview!, attribute: NSLayoutAttribute.Leading, multiplier: 1, constant: 0)
cellTest.addConstraints([bottomConstraint, trailingConstraint, topConstraint, leadingConstraint])
let constraintWidth = NSLayoutConstraint(item: vw, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 200)
constraintWidth.priority = 1000
let constraintHeight = NSLayoutConstraint(item: vw, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 80)
constraintHeight.priority = 1000
let constraintCentreX = NSLayoutConstraint(item: vw, attribute: .CenterX, relatedBy: .Equal, toItem: vw.superview!, attribute: .CenterX, multiplier: 1, constant: 0)
constraintCentreX.priority = 1000
let constraintCentreY = NSLayoutConstraint(item: vw, attribute: .CenterY, relatedBy: .Equal, toItem: vw.superview!, attribute: .CenterY, multiplier: 1, constant: 0)
constraintCentreY.priority = 1000
cellTest.contentView.addConstraints([constraintWidth, constraintHeight, constraintCentreX, constraintCentreY ])
}

Swift - Add NSLayoutConstraint to my Button

I want to have a button always in bottom and in left and right corner.
I want to do this with adding constraints to my button programatically.
My Code:
class LoginController: UIViewController {
#IBOutlet weak var LoginButton: UIButton!
override func loadView() {
super.loadView()
//Button Height Constraint
let constraintButtonPlayWidth = NSLayoutConstraint (item: self.LoginButton,
attribute: NSLayoutAttribute.Height,
relatedBy: NSLayoutRelation.Equal,
toItem: nil,
attribute: NSLayoutAttribute.NotAnAttribute,
multiplier: 1,
constant: 80)
self.view.addConstraint(constraintButtonPlayWidth)
//Button Right Constraint
let r = NSLayoutConstraint(item: self.LoginButton, attribute: .Right,
relatedBy: .Equal, toItem: self.view, attribute: .Right, multiplier: 1.0, constant: 0.0)
//Button Left Constraint
let l = NSLayoutConstraint(item: self.LoginButton, attribute: .Left,
relatedBy: .Equal, toItem: self.view, attribute: .Left, multiplier: 1.0, constant: 100.0)
//Button Bottom Constraint
let b = NSLayoutConstraint(item: self.LoginButton, attribute: .Bottom,
relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1.0, constant: 100.0)
self.view.addConstraints([l,b,r])
When I run this code:
When i add Constraints in Designer:
and when i run the App it works
my Question: What is my mistake?
If you have a view in a storyboard with no constraints, the Interface Builder will generate some constraints automatically. These auto generated constraints will conflict with the code generated ones.
So, in my opinion you have four choices.
Generate Button in Code:
Create an Constraint in Interface Builder and remove them at build time by selecting constraint in Interface Builder and check "Remove at build time"
Remove auto generated Constraints in Code
Create Constraints in Interface Builder
Option 1 - Generate Button in Code
override func viewDidLoad()
{
super.viewDidLoad()
let button = UIButton()
button.setTitle("Login", forState: UIControlState.Normal)
button.backgroundColor = UIColor.redColor()
button.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(button)
let heightConstraint = NSLayoutConstraint(
item: button,
attribute: NSLayoutAttribute.Height,
relatedBy: NSLayoutRelation.Equal,
toItem: nil,
attribute: NSLayoutAttribute.NotAnAttribute,
multiplier: 1.0,
constant: 80
)
button.addConstraint(heightConstraint)
let leftConstraint = NSLayoutConstraint(
item: button,
attribute: NSLayoutAttribute.Leading,
relatedBy: NSLayoutRelation.Equal,
toItem: self.view,
attribute: NSLayoutAttribute.Leading,
multiplier: 1.0,
constant: 0
)
self.view.addConstraint(leftConstraint)
let rightConstraint = NSLayoutConstraint(
item: button,
attribute: NSLayoutAttribute.Trailing,
relatedBy: NSLayoutRelation.Equal,
toItem: self.view,
attribute: NSLayoutAttribute.Trailing,
multiplier: 1.0,
constant: 0
)
self.view.addConstraint(rightConstraint)
let topConstraint = NSLayoutConstraint(
item: button,
attribute: NSLayoutAttribute.Bottom,
relatedBy: NSLayoutRelation.Equal,
toItem: self.view,
attribute: NSLayoutAttribute.Bottom,
multiplier: 1,
constant: 0
)
self.view.addConstraint(topConstraint)
}
Option 2 - Constraints in Code (with Constraint in IB removed at build time)
Create at least one constraint (e.g. a height constraint on the login button) and set the Remove at build time checkbox. After that you will get storyboard errors, you can fix them by adding more constraints (but i think it is not really necessary to fix the storyboard errors)
override func viewDidLoad()
{
super.viewDidLoad()
self.LoginButton.translatesAutoresizingMaskIntoConstraints = false
let heightConstraint = NSLayoutConstraint(
item: self.LoginButton,
attribute: NSLayoutAttribute.Height,
relatedBy: NSLayoutRelation.Equal,
toItem: nil,
attribute: NSLayoutAttribute.NotAnAttribute,
multiplier: 1.0,
constant: 80
)
self.LoginButton.addConstraint(heightConstraint)
let leftConstraint = NSLayoutConstraint(
item: self.LoginButton,
attribute: NSLayoutAttribute.Leading,
relatedBy: NSLayoutRelation.Equal,
toItem: self.view,
attribute: NSLayoutAttribute.Leading,
multiplier: 1.0,
constant: 0
)
self.view.addConstraint(leftConstraint)
let rightConstraint = NSLayoutConstraint(
item: self.LoginButton,
attribute: NSLayoutAttribute.Trailing,
relatedBy: NSLayoutRelation.Equal,
toItem: self.view,
attribute: NSLayoutAttribute.Trailing,
multiplier: 1.0,
constant: 0
)
self.view.addConstraint(rightConstraint)
let topConstraint = NSLayoutConstraint(
item: self.LoginButton,
attribute: NSLayoutAttribute.Bottom,
relatedBy: NSLayoutRelation.Equal,
toItem: self.view,
attribute: NSLayoutAttribute.Bottom,
multiplier: 1,
constant: 0
)
self.view.addConstraint(topConstraint)
}
Option 3 - Remove auto generated Constraints in Code
override func viewDidLoad()
{
super.viewDidLoad()
var removeConstraints : [NSLayoutConstraint] = []
for constraint in self.view.constraints
{
if constraint.firstItem === self.LoginButton
{
removeConstraints.append(constraint)
}
}
self.view.removeConstraints(removeConstraints)
self.LoginButton.removeConstraints(self.LoginButton.constraints)
self.LoginButton.translatesAutoresizingMaskIntoConstraints = false
let heightConstraint = NSLayoutConstraint(
item: self.LoginButton,
attribute: NSLayoutAttribute.Height,
relatedBy: NSLayoutRelation.Equal,
toItem: nil,
attribute: NSLayoutAttribute.NotAnAttribute,
multiplier: 1.0,
constant: 80
)
self.LoginButton.addConstraint(heightConstraint)
let leftConstraint = NSLayoutConstraint(
item: self.LoginButton,
attribute: NSLayoutAttribute.Leading,
relatedBy: NSLayoutRelation.Equal,
toItem: self.view,
attribute: NSLayoutAttribute.Leading,
multiplier: 1.0,
constant: 0
)
self.view.addConstraint(leftConstraint)
let rightConstraint = NSLayoutConstraint(
item: self.LoginButton,
attribute: NSLayoutAttribute.Trailing,
relatedBy: NSLayoutRelation.Equal,
toItem: self.view,
attribute: NSLayoutAttribute.Trailing,
multiplier: 1.0,
constant: 0
)
self.view.addConstraint(rightConstraint)
let topConstraint = NSLayoutConstraint(
item: self.LoginButton,
attribute: NSLayoutAttribute.Bottom,
relatedBy: NSLayoutRelation.Equal,
toItem: self.view,
attribute: NSLayoutAttribute.Bottom,
multiplier: 1,
constant: 0
)
self.view.addConstraint(topConstraint)
}
Option 4 - Create in Interface Builder
Create Constraints in Interface Builder
If you want the button at the bottom, where you are setting the constraint, remove the 100 constant.
let b = NSLayoutConstraint(item: self.button, attribute: .Bottom,
relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 1.0, constant: 0.0)
If you are targeting iOS 9 you can also add your constraints like this:
button.addConstraint(button.heightAnchor.constraintEqualToConstant(80))
self.view.addConstraint(self.view.leadingAnchor.constraintEqualToAnchor(button.leadingAnchor))
self.view.addConstraint(self.view.trailingAnchor.constraintEqualToAnchor(button.trailingAnchor))
self.view.addConstraint(self.view.bottomAnchor.constraintEqualToAnchor(button.bottomAnchor))

Swift NSlayoutConstraint

I have a question... I am really not understand something.
I have a UIView Class which only create a UITextLabel.. I'm trying to add instances from this class to my Viewcontroller. This is how my UIViewClass look like:
class PostLineItem: UIView {
var labelText : String!
var labelHeader : String!
init(labelText: String , labelHeader: String) {
super.init(frame: CGRect.zeroRect)
self.labelText = labelText
self.labelHeader = labelHeader
let tlb = timeLineBlock()
//tlb.setTranslatesAutoresizingMaskIntoConstraints(false)
self.addSubview(tlb)
NSLayoutConstraint.activateConstraints([
NSLayoutConstraint(item: tlb, attribute: .Height, relatedBy: .Equal, toItem: self, attribute: .Height, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: tlb, attribute: .Width, relatedBy: .Equal, toItem: self, attribute: .Width, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: tlb, attribute: .Left, relatedBy: .Equal, toItem: self, attribute: .Left, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: tlb, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1.0, constant: 0)
])
}
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
println("required public")
}
private func timeLineBlock() -> UIView{
let viewNew = UIView()
viewNew.setTranslatesAutoresizingMaskIntoConstraints(false)
let titleLabel = UILabel()
titleLabel.setTranslatesAutoresizingMaskIntoConstraints(false)
titleLabel.font = UIFont(name: "ArialMT", size: 20)
titleLabel.textColor = UIColor.blackColor()
titleLabel.text = labelHeader
titleLabel.numberOfLines = 0
viewNew.addSubview(titleLabel)
titleLabel.backgroundColor = UIColor.redColor()
/* IF I NOT COMMENT THIS PART INSTANCE OF THIS CLASS IS NOT SHOWING UP.
viewNew.addConstraints([
NSLayoutConstraint(item: titleLabel, attribute: .Width, relatedBy: .Equal, toItem: viewNew, attribute: .Width, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: titleLabel, attribute: .Left, relatedBy: .Equal, toItem: viewNew, attribute: .Left, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: titleLabel, attribute: .Top, relatedBy: .Equal, toItem: viewNew, attribute: .Top, multiplier: 1.0, constant: 0)
])
*/
viewNew.backgroundColor = UIColor.greenColor()
return viewNew
}
}
And this is my viewController class part where i try to instantiate the PostLineItem instances..
let guideView = UIView()
guideView.setTranslatesAutoresizingMaskIntoConstraints(false)
guideView.backgroundColor = UIColor.blackColor()
scrollView.addSubview(guideView)
scrollView.addConstraints([
NSLayoutConstraint(item: guideView, attribute: .Top, relatedBy: .Equal, toItem: scrollView, attribute: .Top, multiplier: 1.0, constant: 50),
NSLayoutConstraint(item: guideView, attribute: .Left, relatedBy: .Equal, toItem: scrollView, attribute: .Left, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: guideView, attribute: .Width, relatedBy: .Equal, toItem: scrollView, attribute: .Width, multiplier: 1.0, constant: -30),
NSLayoutConstraint(item: guideView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant:10)
])
guideView.backgroundColor = UIColor.blackColor()
var viewFromAbove = guideView
for post in 1...70 {
let v = PostLineItem(labelText: "Tst", labelHeader: "Tst2")
scrollView.addSubview(v)
NSLayoutConstraint.activateConstraints([
NSLayoutConstraint(item: v, attribute: .Top, relatedBy: .Equal, toItem: viewFromAbove, attribute: .Bottom, multiplier: 1.0, constant: 15),
NSLayoutConstraint(item: v, attribute: .Left, relatedBy: .Equal, toItem: viewFromAbove, attribute: .Left, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: v, attribute: .Width, relatedBy: .Equal, toItem: viewFromAbove, attribute: .Width, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: v, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1.0, constant: 400)
])
viewFromAbove = v
}
scrollView.addConstraints([
NSLayoutConstraint(item: viewFromAbove, attribute: NSLayoutAttribute.Bottom, relatedBy: NSLayoutRelation.Equal, toItem: scrollView, attribute: NSLayoutAttribute.Bottom, multiplier: 1.0, constant: -10)
])
As you can see, first of all i create a guidview for the first PostLineItem and then adding the new instances and the constraints.. So..
If i do it this way the instances of the PostLineItem class will be at the same places and hides each others... I think, the NSLAyoutConstaint not effect.
But, as you can see at the commented part of the code, if i create a simple UILabel the constraints work fine, and all of the UILabel instances will be under each others..
UPDATE:
after i adding all of written in the answer it's look like this.. :(
That little red rect is my PostLineItem instance.. :(
UPDATED - all code.
I'm thinking you might be adding the constraints to the wrong views. For instance, the guideView height constraint should be added to the guideView, and not the scrollView. I would suggest instead you use the new way of activating constraints. Instead of adding them to the views, you just call the activateConstraints class method on NSLayoutConstraint:
NSLayoutConstraint.activateConstraints([
NSLayoutConstraint(item: guideView, attribute: .Top, relatedBy: .Equal, toItem: scrollView, attribute: .Top, multiplier: 1.0, constant: 24),
NSLayoutConstraint(item: guideView, attribute: .Left, relatedBy: .Equal, toItem: scrollView, attribute: .Left, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: guideView, attribute: .Width, relatedBy: .Equal, toItem: scrollView, attribute: .Width, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: guideView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant:4)
])
and
NSLayoutConstraints.activateConstraints([
NSLayoutConstraint(item: v, attribute: .Top, relatedBy: .Equal, toItem: viewFromAbove, attribute: .Bottom, multiplier: 1.0, constant: 5),
NSLayoutConstraint(item: v, attribute: .Left, relatedBy: .Equal, toItem: viewFromAbove, attribute: .Left, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: v, attribute: .Width, relatedBy: .Equal, toItem: viewFromAbove, attribute: .Width, multiplier: 1.0, constant: 0),
])
Also, you are missing a constraint for the height of your PostLineItem, something like:
NSLayoutConstraint(item: v, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant:10)
In your PostLineItem init, you need to add constraints for the timeLineBlock:
init(labelText: String , labelHeader: String) {
super.init(frame: CGRect.zeroRect)
self.labelText = labelText
self.labelHeader = labelHeader
let tlb = timeLineBlock()
self.addSubview(tlb)
NSLayoutConstraint.activateConstraints([
NSLayoutConstraint(item: tlb, attribute: .Height, relatedBy: .Equal, toItem: self, attribute: .Height, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: tlb, attribute: .Width, relatedBy: .Equal, toItem: self, attribute: .Width, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: tlb, attribute: .Left, relatedBy: .Equal, toItem: self, attribute: .Left, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: tlb, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1.0, constant: 0)
])
}
Here is my version. I'm getting much better results. Take a look... Note, I set up my scrollView entirely in Interface Builder and just added an outlet called scrollView that points to the contentView contained by my scrollView. That shouldn't matter. Everything else is as you implemented.
class PostLineItem: UIView {
var labelText : String!
var labelHeader : String!
init(labelText: String , labelHeader: String) {
super.init(frame: CGRect.zeroRect)
self.labelText = labelText
self.labelHeader = labelHeader
let tlb = timeLineBlock()
self.addSubview(tlb)
NSLayoutConstraint.activateConstraints([
NSLayoutConstraint(item: tlb, attribute: .Height, relatedBy: .Equal, toItem: self, attribute: .Height, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: tlb, attribute: .Width, relatedBy: .Equal, toItem: self, attribute: .Width, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: tlb, attribute: .Left, relatedBy: .Equal, toItem: self, attribute: .Left, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: tlb, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1.0, constant: 0)
])
}
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
println("required public")
}
private func timeLineBlock() -> UIView{
let viewNew = UIView()
viewNew.setTranslatesAutoresizingMaskIntoConstraints(false)
let titleLabel = UILabel()
titleLabel.setTranslatesAutoresizingMaskIntoConstraints(false)
titleLabel.font = UIFont(name: "ArialMT", size: 20)
titleLabel.textColor = UIColor.blackColor()
titleLabel.text = labelHeader
titleLabel.numberOfLines = 0
viewNew.addSubview(titleLabel)
titleLabel.backgroundColor = UIColor.redColor()
NSLayoutConstraint.activateConstraints([
NSLayoutConstraint(item: titleLabel, attribute: .Width, relatedBy: .Equal, toItem: viewNew, attribute: .Width, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: titleLabel, attribute: .Left, relatedBy: .Equal, toItem: viewNew, attribute: .Left, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: titleLabel, attribute: .Top, relatedBy: .Equal, toItem: viewNew, attribute: .Top, multiplier: 1.0, constant: 0)
])
viewNew.backgroundColor = UIColor.greenColor()
return viewNew
}
}
class ViewController: UIViewController {
#IBOutlet weak var scrollView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
let guideView = UIView()
guideView.setTranslatesAutoresizingMaskIntoConstraints(false)
guideView.backgroundColor = UIColor.blackColor()
scrollView.addSubview(guideView)
NSLayoutConstraint.activateConstraints([
NSLayoutConstraint(item: guideView, attribute: .Top, relatedBy: .Equal, toItem: scrollView, attribute: .Top, multiplier: 1.0, constant: 24),
NSLayoutConstraint(item: guideView, attribute: .Left, relatedBy: .Equal, toItem: scrollView, attribute: .Left, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: guideView, attribute: .Width, relatedBy: .Equal, toItem: scrollView, attribute: .Width, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: guideView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant:4)
])
guideView.backgroundColor = UIColor.blackColor()
var viewFromAbove = guideView
for post in 1...70 {
let v = PostLineItem(labelText: "Tst", labelHeader: "Tst2")
//let v = UILabel(frame: CGRectMake(0, 0, 10, 10))
//v.text = "Tst Now with this its working, and the constraint is fine."
v.setTranslatesAutoresizingMaskIntoConstraints(false)
scrollView.addSubview(v)
NSLayoutConstraint.activateConstraints([
NSLayoutConstraint(item: v, attribute: .Top, relatedBy: .Equal, toItem: viewFromAbove, attribute: .Bottom, multiplier: 1.0, constant: 5),
NSLayoutConstraint(item: v, attribute: .Left, relatedBy: .Equal, toItem: viewFromAbove, attribute: .Left, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: v, attribute: .Width, relatedBy: .Equal, toItem: viewFromAbove, attribute: .Width, multiplier: 1.0, constant: 0),
NSLayoutConstraint(item: v, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant:30)
])
viewFromAbove = v
}
}
}

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])
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)
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)

Resources