I am trying to set a horizontal center constraint of a view with multiplier programmatically. But what I get is always a constraint with 1.0 as the multiplier. This is what I did:
private func createHalfCenteredView() {
let newView = UIView(frame: .zero)
newView.backgroundColor = .systemTeal
view.addSubview(newView)
newView.translatesAutoresizingMaskIntoConstraints = false
let top = newView.topAnchor.constraint(equalTo: view.topAnchor)
let bottom = newView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
let width = newView.widthAnchor.constraint(equalToConstant: 100)
let center = newView.centerXAnchor.constraint(equalToSystemSpacingAfter: view.centerXAnchor,
multiplier: 0.5)
NSLayoutConstraint.activate([top, bottom, width, center])
newView.setNeedsUpdateConstraints()
view.setNeedsLayout()
view.layoutIfNeeded()
}
I tried using lessThanOrEqualToSystemSpacingAfter instead of equalToSystemSpacingAfter but it is still the same. The multiplier is always 1.0 or exactly in the middle.
Can anybody help me with this? Thanks.
You can't use multipliers using helpers functions, try this way
let center = NSLayoutConstraint(item: newView, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 0.5, constant: 0)
Refer to answer
Related
Background:
When rotating the device, the view myView becomes letterboxed instead of resizing to fit the screen, see image below.
On the storyboard, centreX and centreY constraints are set.
In the code, width and height constraints are set with the function viewAddConstraints(), see code below.
After the device is rotated, I call viewAddConstraints() again, but Xcode gives the following error: Unable to simultaneously satisfy constraints.
Questions:
How do I correctly remove old constraints and then add new constraints when the device is rotated?
How do I correctly update the constraints of a view when the device is rotated?
Code:
func viewAddConstraints() {
// Width constraint full width of screen
let myViewWidth = NSLayoutConstraint(item: myView as Any, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: view.bounds.width)
myView.addConstraint(myViewWidth)
// Height constraint full height of screen
let myViewHeight = NSLayoutConstraint(item: myView as Any, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: view.bounds.height)
myView.addConstraint(myViewHeight)
}
Image:
Current situation, view is incorrectly letterboxed.
Intended situation, view resized correctly.
The proper way to set constraints to keep your subview "pinned" to the sides:
override func viewDidLoad() {
super.viewDidLoad()
let myView = UIView()
myView.backgroundColor = .systemTeal
myView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(myView)
NSLayoutConstraint.activate([
myView.topAnchor.constraint(equalTo: view.topAnchor),
myView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
myView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
myView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
])
}
Or, since you should be respecting the Safe Area:
override func viewDidLoad() {
super.viewDidLoad()
let myView = UIView()
myView.backgroundColor = .systemTeal
myView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(myView)
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
myView.topAnchor.constraint(equalTo: g.topAnchor),
myView.leadingAnchor.constraint(equalTo: g.leadingAnchor),
myView.trailingAnchor.constraint(equalTo: g.trailingAnchor),
myView.bottomAnchor.constraint(equalTo: g.bottomAnchor),
])
}
Now your subview will automatically resize to fit its superview on device rotation.
the below code is the viewController that is navigated with a navigationItem navigationItem.leftBarButtonItem = UIBarButtonItem(title: from a previous tableViewController and I am trying to produce a UIView in my viewController. However nothing is showing.
import UIKit
class SecondpgController: UIViewController {
var inputContainerView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor .gray
let inputContainerView = UIView()
self.view.addSubview(inputContainerView)
//inputContainerView.backgroundColor = UIColor(red: 162/255, green: 20/255, blue: 35/255, alpha: 1)
inputContainerView.backgroundColor = .white
inputContainerView.translatesAutoresizingMaskIntoConstraints = false
//inputContainerView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 300).isActive = true
//nputContainerView.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 10).isActive = true
inputContainerView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor, constant: 200).isActive = true
inputContainerView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor, constant: 200).isActive = true
The app is running well however after reaching the view controller, Nothing is shown but only a grey screen.
Why is this happening and how can I solve it?
Your problem is that you constraints are only setting x and y position for the UIView you are creating. You are missing width and height.
Try this constraints:
inputContainerView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
inputContainerView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
inputContainerView.widthAnchor.constraint(equalToConstant: 100).isActive = true
inputContainerView.heightAnchor.constraint(equalToConstant: 100).isActive = true
This code means that your UIView will be centred vertically and horizontally in your self.view and also it has a width and height of 100. It will look like this:
Hope it helps. Happy Coding
You have added constraints to place inputContainerView to the centre of the screen but did not add constraints for it's height and width. Adding the following code might solve your issue:
inputContainerView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor, constant: 0).isActive = true
inputContainerView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor, constant: 0).isActive = true
inputContainerView.addConstraint(NSLayoutConstraint(item: inputContainerView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 200))
inputContainerView.addConstraint(NSLayoutConstraint(item: inputContainerView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 200))
Check this: https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/ProgrammaticallyCreatingConstraints.html
Ensure that the constants for CenterXAnchor and CenterYAnchor are 0, so the view aligns at the centre. And make sure you add inputContainerView only once either as an outlet or programmatically.
I'm trying to add constraint to navigation bar, I have UIImageView, which has width, height and is centered horizontally, I want to add vertical space between UIImage and navigationBar to 0, I'm trying this for like 1 hour and couldn't figure out how, i tried adding constraint to UIView, and added constant of navbarHeight + statusBarHeight, and it worked, but I want to make relationship between imageview and navbar
let verticalSpace = NSLayoutConstraint(item: image, attribute: .Top, relatedBy: .Equal, toItem: self.view, attribute: .Top, multiplier: 1, constant: 0)
view.addConstraint(verticalSpace) // this works
try with topLayoutGuide
let verticalSpace = NSLayoutConstraint(item: image,
attribute: .Top,
relatedBy: .Equal,
toItem: self.topLayoutGuide,
attribute: .Bottom,
multiplier: 1, constant: 0)
The above constraint explanation:
simply its called: vertical space between image.Top & self.topLayoutGuide.Bottom = 0
that means Top constraint of image view attached with a Bottom attribute of topLayoutGuide with constant 0.
You can use anchors as well to make this possible for iOS 10+
if #available(iOS 11.0, *) {
image.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
} else {
image.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor).isActive = true
}
llkenny's answer for iOS 11.0+ :
image.topAnchor.constraint(equalTo:
view.safeAreaLayoutGuide.topAnchor).isActive = true
With anchors:
image.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor).isActive = true
In storyboard. Two constraints:
The first:
The second:
Result:
code:
func mainCollectionViewConstraint() {
NSLayoutConstraint.activate([
mainCollectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 10),
mainCollectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
mainCollectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
mainCollectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
])
}
I am attempting to get a UIView courseView to autolayout. I would like to have the proportions of the UIView remain and fill up until the outermost edges are 15 point from the edge of the superview.
For some reason courseView fills the entire superview (minus the 15 points) and does not resize to fit. So some of it does not show and is cut off.
self.view.addSubview(courseView!)
let aspectConstraint = NSLayoutConstraint(item: courseView,
attribute: .Height,
relatedBy: .Equal,
toItem: courseView,
attribute: .Width,
multiplier: courseView.frame.size.height / courseView.frame.size.width,
constant: 0.0)
aspectConstraint.active = true
let topConstraint = courseView.topAnchor.constraintGreaterThanOrEqualToAnchor(topLayoutGuide.bottomAnchor, constant: 15)
topConstraint.active = true
let leadingConstraint = courseView.leadingAnchor.constraintLessThanOrEqualToAnchor(view.leadingAnchor, constant: 15)
leadingConstraint.active = true
let trailingConstraint = courseView.trailingAnchor.constraintGreaterThanOrEqualToAnchor(view.trailingAnchor, constant: -15)
trailingConstraint.active = true
let bottomConstraint = courseView.bottomAnchor.constraintLessThanOrEqualToAnchor(view.bottomAnchor, constant: -15)
bottomConstraint.active = true
Any ideas? Thanks!
Just disable translatesAutoresizingMaskIntoConstraints before adding the constraints and it should work just fine.
courseView.translatesAutoresizingMaskIntoConstraints = false;
And by the way, you do not need the aspectConstraint because that will most probably break the constratints (it did for me, when I tried).
I have to dynamically create some UILabel and UITextViews according to some Data ~ around 20 - all of them with dynamic height/lines of Text for an IOS App in Swift.
Since the screen is not large enough I am adding the Views to a ScrollView, but unfortunately the contentsize property of my ScrollView seems not to receive the proper values.
I'm debugging since a couple of hours and tried different set ups but so far none of them worked out.
The sizing is done in a custom method refreshUI() which gets firstly called in viewDidLoad(). The ViewController simply contains one centred Heading Label and the ScrollView which fills the rest of the space (pinned to Top, Left, Right, Bottom with 8.0).
Then I'm trying to populate my Data in that scrollView as follows:
func refreshUI(){
println("refreshUI()")
questionnaireTitle.text = site.questionnaireName
let questionnaire = site.questionnaire
//removes all SubViews in ScrollView
clearView(scrollView)
scrollView.setTranslatesAutoresizingMaskIntoConstraints(false)
for questionGroup in questionnaire{
//QUESTIONGROUP HEADING
let questionGroupHeading = UILabel()
questionGroupHeading.setTranslatesAutoresizingMaskIntoConstraints(false)
questionGroupHeading.text = questionGroup.questionsHeading
questionGroupHeading.sizeToFit()
scrollView.addSubview(questionGroupHeading)
viewStack.append(questionGroupHeading)
//QUESTION
for question in questionGroup.questions{
//QUESTION LABEL
let questionLabel = UILabel()
questionLabel.setTranslatesAutoresizingMaskIntoConstraints(false)
questionLabel.text = question.text
questionLabel.numberOfLines = 0
questionLabel.lineBreakMode = .ByWordWrapping
questionLabel.sizeToFit()
scrollView.addSubview(questionLabel)
viewStack.append(questionLabel)
if question.type == "selector"{
//SELECTOR QUESTION
println("selector Question")
for statement in question.statements{
//TODO add Statement + Picker
}
}
else if question.type == "standard"{
//STANDARD QUESTION
println("standard question")
let answerLabel = UITextField()
answerLabel.placeholder = "here goes your answer"
answerLabel.sizeToFit()
answerLabel.backgroundColor = UIColor.whiteColor()
answerLabel.setTranslatesAutoresizingMaskIntoConstraints(false)
scrollView.addSubview(answerLabel)
viewStack.append(answerLabel)
}
}
}
//setUpConstraints
var counter = 0
var height:CGFloat = 0.0
for view in viewStack{
let rightConst = NSLayoutConstraint(item: view, attribute: .Right, relatedBy: .Equal, toItem: scrollView, attribute: .Right, multiplier: 1.0, constant: 0.0)
let leftConst = NSLayoutConstraint(item: view, attribute: .Left, relatedBy: .Equal, toItem: scrollView, attribute: .Left, multiplier: 1.0, constant: 0.0)
let widthConst = NSLayoutConstraint(item: view, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: scrollView.frame.width)
view.addConstraint(widthConst)
scrollView.addConstraint(leftConst)
scrollView.addConstraint(rightConst)
//pin first view to top of scrollView
if counter == 0{
let topConst = NSLayoutConstraint(item: view, attribute: .Top, relatedBy: .Equal, toItem: scrollView, attribute: .Top, multiplier: 1.0, constant: 0.0)
scrollView.addConstraint(topConst)
}
//pin all other views to the top of the previousView
else{
let topConst = NSLayoutConstraint(item: view, attribute: .Top, relatedBy: .Equal, toItem: viewStack[counter - 1], attribute: .Bottom, multiplier: 1.0, constant: 8.0)
scrollView.addConstraint(topConst)
}
counter++
height += view.bounds.height
}
let contentSize = CGSize(width: scrollView.frame.width, height: height)
scrollView.contentSize = contentSize
scrollView.contentOffset = CGPoint(x: 0, y: 0)
println("refreshUI() done")
}
The ScrollView is not vertically scrollable, although some content is not displayed due to being out of the screen.
But it scrolls horizontally, although I'm setting the width of each view to the width of the SCrollView, which should mean that every SubView is just as big as the size of the ScrollView and thus not vertically scrollable.
If you are using AutoLayout then this tutorial will be useful for implementing scrollview.
When you run refreshUI() inside of viewDidLoad(), the subviews that are being created are using the Interface Builder defaults for the parent views instead of the actual sizes on the device. This is likely why your sizes are not what you expect. If you run refreshUI() inside of viewDidLayoutSubviews() instead, then the subviews will correctly read the widths and heights of the parent view.