I'm trying to set up a simple UITableViewCell in which there is a prompt on the left and then a text field right next to it that takes up the rest of the width of the cell; however, with the following constraints, no matter what I set the width of the UITextField to, the width of the field is only wide enough for 1 character. Note: the UITextField is appearing in the correct position (it's directly to the right of the prompt), it's just really small.
cell.contentView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-[prompt]-[uitextfield]", options: NSLayoutFormatOptions.AlignAllCenterY, metrics: nil, views: views))
cell.contentView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-[promt]-|", options: nil, metrics: nil, views: views))
cell.contentView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-[uitextfield]-|", options: nil, metrics: nil, views: views))
One solution that has worked is to set the width of the uitextfield to a ridiculously high number:
cell.contentView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-[prompt]-[uitextfield(1000)]", options: NSLayoutFormatOptions.AlignAllCenterY, metrics: nil, views: views))
I can't use this solution however because sometimes the UITextField is a UISegmentedControl (or other control), and I don't want to stretch those controls out.
Why is the UITextField forcing its width to be really small even if I explicitly set frame.size.width to something large?
The UITextField's content hugging priority along the horizontal axis should be lower than your prompt element's content hugging priority.
You can check out the content hugging priority by doing yourTextField.contentHuggingPriorityForAxis(.Horizontal). And set it using yourTextField.setContentHuggingPriority(250, forAxis: .Horizontal). You may also do this in the interface builder (which I prefer).
Try setting the text field's content hugging priority to 250, and set prompt's to 251.
Solution:
1) Pin the UITextField to the right edge of its superview
2) Change the hugging priority of the UITextField to less than 250
Can someone explain why this works? Why doesn't it work to just do step #1? Or, if you only do step #1, why don't prompt & uitextfield expand equally to fill up the extra width in the superview?
Related
I am trying to put two UILabels within one line: one UILable on left side, with text left-aligned, one UILabel on right side, with text right-aligned. Please see above image. They have different font sizes.
I used below auto layout constraints:
let labelHorizontalConstrains = NSLayoutConstraint.constraints(
withVisualFormat: "H:|-20-[nameLabel]-15-[birthDeathDateLabel]-20-|",
metrics: nil,
views: views)
allConstraints += labelHorizontalConstrains
But the result shows that they are not vertically aligned: The left UILabel is lower than the right UILabel. How to fix this?
You need to add a centerYAnchor constraint.
birthDeathDateLabel.centerYAnchor.constraint(equalTo: nameLabel.centerYAnchor).isActive = true
However, if you want it aligned with the base of the text, you should use a UIStackView.
let stackView = UIStackView(arrangedSubviews: [nameLabel, birthDeathDateLabel])
stackView.alignment = .firstBaseline
stackView.axis = .horizontal
// Add other stackview properties and constraints
you need to add a leading constraint and a height constraint to the right label. add a trailing and height constraint to the left label. then specify an equal widths constraint. also on the right label add the distance from the left label with a trailing constraint and for the left label add a leading constraint how far you want it from the right label.. much easier on storyboard. you could also use fit equally.. I can't remember the actual code, but it might have refreshed your memory. if I was too add that sort of constraint I would do it on a skeleton storyboard.
I've been trying to achieve something like the example below for quite a while now without success.
Here's what I have so far:
H:|[firstView][secondView(== firstView)][thirdView(== firstView)][fourthView(== firstView)]|
Which works, but, it yields this result:
I'm trying to get it to look like this:
In other words, I'm trying to place 4 UIViews with equal width and fixed height, on the bottom of the screen.
Does anyone have any input or reference to visual format constraints?
I'm not too sure how to do multiple views in a single constrait but here is how you would do it one view at a time.
This would do your left and right constraints:
NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "H:|-0-[V]-0-|", options: [], metrics: nil, views: ["V" : firstview]))
This would constraint the view to the bottom of the screen:
NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "V:[V]-0-|", options: [], metrics: nil, views: ["V" : firstview]))
Then to add a height constraint:
NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "V:|[V(25)]|", options: [], metrics: nil, views: ["V" : firstview]))
I have a UIScrollView that fills all the window and that contains a vertical UIStackView where I want to add UILabels that fill all available width.
The UIStackView is pinned to all the edges of UIScrollView, and I expect it to fill all the UIScrollView. But it seems that it completely ignores all the constriants and it only sizes to fit it's childs. Why that behaviour?
To illustrate that if I add labels that way:
scrollView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[stackView]|", options: NSLayoutFormatOptions.alignAllCenterX, metrics: nil, views: ["stackView": stackView]))
scrollView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[stackView]|", options: NSLayoutFormatOptions.alignAllCenterX, metrics: nil, views: ["stackView": stackView]))
for _ in 1 ... 20 {
let textLabel = UILabel()
textLabel.backgroundColor = UIColor.yellow
textLabel.text = "Hi World xxxx"
stackView.addArrangedSubview(textLabel)
textLabel.widthAnchor.constraint(equalTo: stackView.widthAnchor).isActive = true //Doesn't work as expected
}
what I get is this: (the cyan background is the UIScrollView and you can see that labels doesn't take all width due to that UIStackView contraints doesn't apply)
And only if I change the label contraint to use scrollView it works as desired:
textLabel.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
Then the result is as expected:
Why that behaviour? Someone can explain why the constraints on UIStackView doesn't work as I expect?
Complete source code avaiable at that gist
Everything is correct. Its just that you have not specified the width of the content view(the stack view).
Add this line and thing will work perfectly.
scrollView.widthAnchor.constraint(equalTo: stackView.widthAnchor, multiplier: 1).isActive = true;
Note: Pinning scroll view's leading trailing with content view does, not provide the width to the content view. A separate width constraint is required, other wise the content view will have its width equal to its intrinsic width.
Links: https://stackoverflow.com/a/18341997/1790683
So, I have the following XIB
This XIB when loaded as a tableviewcell looks like this
I've since decided that I will not need a TableView, so I changed my XIB class from UITableViewCell to UIView. In a ViewController I added this code to viewDidLoad()
var nView = MyChartView.instanceFromNib() as! MyChartView
self.view.addSubview(nView)
And I got this as a result
As you can see, it ignores the margins and continues to right side (ignore the red color since I was using it to try and debug the problem. No chart data is not the problem either). I've printed the xib's frame width and I've seen that it's quite a bit bigger than the screen size, but I've not been able to fix it. Anyone can figure out the problem?
When you add a subView programmatically, you should also add constraints between the subView and its superView
var nView = MyChartView.instanceFromNib() as! MyChartView
self.view.addSubview(nView)
nView.translatesAutoresizingMaskIntoConstraints = false
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[nView]|", options: [], metrics: nil, views: ["nView": nView]))
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[nView]|", options: [], metrics: nil, views: ["nView": nView]))
You haven't constrained the MyChartView instance's width, either by specifying an exact size when you add the subview, or programmatically adding constraints between the MyChartView instance and its superview. Without doing one or the other of these, the view's dimensions will match whatever they are in the xib.
I'd like to create an "adding a new credit card viewController".
We don't want to aggravate users with all of the required fields presented at once.
This action contains several steps.
On each step the view-controller reveals a new subview (which contains one or more textfields) and collapses an old one (the current text field after it's text is validated).
I've created the ViewController on the storyboard. and placed all of its subviews one above the other.
I've created all of the constraints on the storyBoard, each subviews' clips to the above subview etc'.
i.e:
NSMutableArray *constraints = [[NSLayoutConstraint
constraintsWithVisualFormat:
#"V:|[titleView]-[subtitleView]-[amountView]-[cardNumView]-[cardsImagesView]-[mmYYCvvView]-[billingInfoView]-[buttomView]|"
options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom
metrics:nil
views:variableBindings] mutableCopy];
Each of these subviews contain a height constraint.
In each step one of the height constraints are set to zero and another one is changed from zero to the required height.
i.e:
self.hgtCrtMMYYCvv.constant = showFields? 50 : 0;
self.hgtCrtBillingInfo.constant = showFields? 140 : 0;
self.mmYYCvvView.hidden = !showFields;
self.billingInfoView.hidden = !showFields;
I got two issues:
Without calling layoutIfNeeded the initial layout was valid but did not change after changing the height constraints.
Calling layoutIfNeeded did not clip the bottom view to the last visible one - placed it at the bottom of the view as if all the subviews appear at once, but since some are hidden a gap was created.
changing the height constraint of the subviews was applied on the screen but still the gap stayed.
Please advise.
Calling "layoutIfNeeded" did not clip the bottom view to the last visible one - placed it at the bottom of the view as if all the subviews appear at once
Look at your constraints. You have pinned the bottom of the bottom view to the bottom of its superview! So its bottom must appear at the bottom of the superview, since that is what you instructed it to do.
Indeed, I am surprised that your constraints work at all. You have basically overdetermined them. If you give every field a height and pin its top and bottom, for every field, then it will be impossible to satisfy your constraints unless you are very lucky. The height of the superview is fixed, so your constraints would have to add up perfectly to that height.
I'm going to suggest a complete alternative approach, which I think you will find easier. Instead of messing with individual constants, plan what the correct (not overdetermined) constraints would be for each possible situation, and store those constraints in properties. Now when you want to hide/reveal a field, you just remove all the constraints and swap in another set.
This will also solve the layoutIfNeeded problem.
It happens that I have an actual example showing how to do this. (It is written in Swift, but I'm sure you can compensate mentally.) In my example code, we have three rectangles; I then remove one rectangle and close the gap between the remaining two. The preparation of two sets of constraints is tedious but elementary:
let c1 = NSLayoutConstraint.constraintsWithVisualFormat("H:|-(20)-[v(100)]", options: nil, metrics: nil, views: ["v":v1]) as [NSLayoutConstraint]
let c2 = NSLayoutConstraint.constraintsWithVisualFormat("H:|-(20)-[v(100)]", options: nil, metrics: nil, views: ["v":v2]) as [NSLayoutConstraint]
let c3 = NSLayoutConstraint.constraintsWithVisualFormat("H:|-(20)-[v(100)]", options: nil, metrics: nil, views: ["v":v3]) as [NSLayoutConstraint]
let c4 = NSLayoutConstraint.constraintsWithVisualFormat("V:|-(100)-[v(20)]", options: nil, metrics: nil, views: ["v":v1]) as [NSLayoutConstraint]
let c5with = NSLayoutConstraint.constraintsWithVisualFormat("V:[v1]-(20)-[v2(20)]-(20)-[v3(20)]", options: nil, metrics: nil, views: ["v1":v1, "v2":v2, "v3":v3]) as [NSLayoutConstraint]
let c5without = NSLayoutConstraint.constraintsWithVisualFormat("V:[v1]-(20)-[v3(20)]", options: nil, metrics: nil, views: ["v1":v1, "v3":v3]) as [NSLayoutConstraint]
self.constraintsWith.extend(c1)
self.constraintsWith.extend(c2)
self.constraintsWith.extend(c3)
self.constraintsWith.extend(c4)
self.constraintsWith.extend(c5with)
self.constraintsWithout.extend(c1)
self.constraintsWithout.extend(c3)
self.constraintsWithout.extend(c4)
self.constraintsWithout.extend(c5without)
NSLayoutConstraint.activateConstraints(self.constraintsWith)
But the payoff comes when it is time to swap the middle view in or out of the interface: it's trivial. Just remove or insert it, and then remove all constraints and now insert the complete new set of constraints appropriate to the situation, which we have already prepared:
#IBAction func doSwap(sender: AnyObject) {
if self.v2.superview != nil {
self.v2.removeFromSuperview()
NSLayoutConstraint.deactivateConstraints(self.constraintsWith)
NSLayoutConstraint.activateConstraints(self.constraintsWithout)
} else {
self.view.addSubview(v2)
NSLayoutConstraint.deactivateConstraints(self.constraintsWithout)
NSLayoutConstraint.activateConstraints(self.constraintsWith)
}
}
The preparation of the multiple sets of constraints is tedious but can be done by rule, i.e. the constraints can be "machine-generated" in a loop (writing this is left as an exercise for you). Swapping constraints in and out is again according to a simple rule, since only one set will be right for the particular set of fields you wish to show/hide. So once this is set up it will be much simpler and more maintainable than what you are doing now.