Constraint to set max height for items inside stackView - swift

I have a stackView with UiViews boxes inside as you can see in the picture. I would like to set a max height of 50 or less for the boxes inside as they look too big right now but i also would like to keep the 1:1 ratio so that they would be square. I've tried to set a height constraint to the stackView but when i do that, the aspect ratio of 1:1 is being ignored.
Here's what it looks like right now:
And here's the code:
let stackview = UIStackView(arrangedSubviews: letterBoxes)
stackview.axis = .horizontal
stackview.spacing = 5
stackview.distribution = .fillEqually
stackview.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(stackview)
NSLayoutConstraint.activate([
stackview.topAnchor.constraint(equalTo: secondLine.bottomAnchor, constant: c/2 +
20),
stackview.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
stackview.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 10)
])
for box in letterBoxes{
box.aspectRation(1.0/1.0).isActive = true
}
Edit: i want the box to auto-resize and not overflow like the following (each time there's a different amount of boxes. so for example when there are only 3 boxes i want that the max size will be 50 but when there are 6 or higher number I want it to auto-resize so that it will fit the screen and not overflow. once I take the leading constraint off it overflows) :

The following will do the job.
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let letterBoxes = [UIView(), UIView(), UIView()]
for box in letterBoxes {
box.translatesAutoresizingMaskIntoConstraints = false
box.backgroundColor = .systemBlue
view.addSubview(box)
let heightConstraint = box.heightAnchor
.constraint(equalToConstant: 50)
heightConstraint.priority = .defaultHigh
NSLayoutConstraint.activate([
box.widthAnchor.constraint(equalTo: box.heightAnchor),
heightConstraint
])
}
let stackview = UIStackView(arrangedSubviews: letterBoxes)
stackview.axis = .horizontal
stackview.spacing = 5
stackview.distribution = .fillEqually
stackview.alignment = .center
stackview.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(stackview)
NSLayoutConstraint.activate([
stackview.centerYAnchor.constraint(equalTo: view.centerYAnchor),
stackview.centerXAnchor.constraint(equalTo: view.centerXAnchor),
stackview.leadingAnchor.constraint(
greaterThanOrEqualTo: view.leadingAnchor,
constant: 10
),
stackview.trailingAnchor.constraint(
lessThanOrEqualTo: view.trailingAnchor,
constant: -10
)
])
}
}
The point is to make the priorities of the heighConstraints for the boxes to be less than required.
So when there are not a lot of boxes, they will be of size 50, but when there are many, the height constraints will be ignored.
Also note that the stackview's leadingAnchor and the trailingAnchor constraint keeps the boxes in the screen bounds.
The following screenshots show the result:

Related

How to set specific width to stackview child, swift?

I'm creating a stackview, inside which there are 5 sub views. (3 custom views divided by 2 separator views). Two separator views's width must be 1 and every sub views must be center and fill equally.
Here's my current code and result which doesn't look nice.
var stackView: UIStackView = {
let view = UIStackView()
view.axis = .horizontal
view.alignment = .center
view.distribution = .fillEqually
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
func setUpView() {
containerView.addSubview(stackView)
stackView.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 8).isActive = true
stackView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -8).isActive = true
stackView.leadingAnchor.constraint(equalTo: homeLogoImageView.trailingAnchor , constant: 18).isActive = true
stackView.trailingAnchor.constraint(equalTo: awayLogoImageView.leadingAnchor, constant: -18).isActive = true
stackView.addArrangedSubview(homeWinView)
stackView.addArrangedSubview(seperator1)
stackView.addArrangedSubview(drawView)
stackView.addArrangedSubview(seperator2)
stackView.addArrangedSubview(awayWinView)
seperator1.widthAnchor.constraint(equalToConstant: 1).isActive = true
seperator1.heightAnchor.constraint(equalToConstant: 60).isActive = true
seperator2.widthAnchor.constraint(equalToConstant: 1).isActive = true
seperator2.heightAnchor.constraint(equalToConstant: 60).isActive = true
}
Output:
Expectation:
fillEqually doesn't work, when you just want some of your views in your stack view to fill equally.
Change fillEqually to fill, and add the "equally" part using constraints yourself.
NSLayoutConstraint.activate([
homeWinView.widthAnchor.constraint(equalTo: drawView.widthAnchor),
homeWinView.widthAnchor.constraint(equalTo: awayWinView.widthAnchor),
])

constraint object by percentage in a stackview

I want to create a constraint that is 80 percent of the width of the uiview controller not a 100 percent which is what it is now. I tried using the var percent but its not working. The code should be centered on the y axis. So 10 percent on the left side and ride side are not covered by the constraint. I am trying to do this in a stack view.
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
//Image View
let percent = ((UIScreen.main.bounds.midY) + (UIScreen.main.bounds.maxX * 0.8))
//Text Label
let textLabel = UILabel()
textLabel.backgroundColor = UIColor.yellow
textLabel.widthAnchor.constraint(equalToConstant: self.view.frame.width * percent).isActive = true
textLabel.heightAnchor.constraint(equalToConstant: 20.0).isActive = true
textLabel.text = "Hi World"
textLabel.textAlignment = .center
//Stack View
let stackView = UIStackView()
stackView.axis = NSLayoutConstraint.Axis.vertical
stackView.distribution = UIStackView.Distribution.equalSpacing
stackView.alignment = UIStackView.Alignment.center
stackView.spacing = 16.0
stackView.addArrangedSubview(textLabel)
stackView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(stackView)
//Constraints
stackView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
stackView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
}
}
Set the widthAnchor of stackView with that of superView's width (in this case view controller's view) and set multiplier value as 0.80
stackView.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.80).isActive = true
You can achieve this by setting 'widthAnchor' and 'centerXAnchor' like below. We need to always keep horizontal center of child view and super view same. Whereas width of child should be 80 percentage(here 0.8 indicates 80%) of super view.
stackView.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.8, constant: 0).isActive = true
stackView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
stackView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true

viewDidLayoutSubviews() issue

I have the following screen, in order to centre the boxes between the uilabel and the keyboard I created a simple calculation where I added the header height then the uilabel height and then the keyboard height minus the whole screen size and divided everything by two in order to get the centre point [i added the code below although it's not relevant]
The issue is that in order to get the UILabels height I have to set the constraints in viewDidLayoutSubviews(). Now the idea is that every time you fill one box the next box becomes the first responder but that doesn't work because every time a box becomes a first responder viewDidLayoutSubviews() is being called.
What can I do about this ? is there a way to get the height of uiLabel without calling viewDidLayoutSubviews().
This is the code for centering the boxes :
override func viewDidLayoutSubviews() {
let allItems = headerC.frame.height + stackViewOfDefin.frame.height + 270 + 20
let getSpace = UIScreen.main.bounds.height - allItems
let stackview = UIStackView(arrangedSubviews: gameBoxes)
stackview.axis = .horizontal
stackview.spacing = 5
stackview.distribution = .fillEqually
stackview.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(stackview)
NSLayoutConstraint.activate([
stackview.topAnchor.constraint(equalTo: secondLine.bottomAnchor, constant: getSpace/2-30),
stackview.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
stackview.leadingAnchor.constraint(greaterThanOrEqualTo: view.leadingAnchor, constant: 10),
stackview.trailingAnchor.constraint(lessThanOrEqualTo: view.trailingAnchor, constant: -10)
])
}

UIStackView - force label to be tight and view to be as wide as possible

I have UIStackView
let sv = UIStackView()
sv.axis = .horizontal
sv.distribution = .fillProportionally
sv.spacing = 2.0
sv.translatesAutoresizingMaskIntoConstraints = false
Now I have added two elements (UIView and UILabel). If I run app, I have see something like this:
| Content (UIView)| Content (UILabel)|
But I want it like this:
| Content (UIView) | Content (UILabel)|
How to do this?
My code for setting stack view:
let lb = UILabel()
lb.font = UIFont.systemFont(ofSize: 14, weight: UIFont.Weight.light)
lb.lineBreakMode = .byTruncatingTail
lb.numberOfLines = 2
lb.textAlignment = .right
lb.backgroundColor = UIColor.red
lb.adjustsFontSizeToFitWidth = true
let v = UIView()
stackView.addArrangedSubview(v)
stackView.addArrangedSubview(lb)
self.contentView.addSubview(stackView)
NSLayoutConstraint.activate([
stackView.topAnchor.constraint(equalTo: self.contentView.topAnchor, constant: 2),
stackView.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor, constant: 10),
stackView.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor, constant: -10),
stackView.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor, constant: -2)
])
Just set content compression resistance priority to 1000 for view's horizontal axis
v.setContentCompressionResistancePriority(.required, for: .horizontal)
... then your view should take as much space as it needs because it won't be compressed

Swift UIStackView: Positioning elements from center programmatically

I am trying to get elements inside a UIStackView to position themselves equally from the center.
This is the desired effect I would like:
As you can see, I would like the two text fields to be equally spaced from each other and aligned center within the stack view.
This stack view will have either 1 - 7 textfields that I need lined up.
Here is what is currently coming out:
This is how I am setting the Text Fields
let textLabel = UILabel()
textLabel.backgroundColor = UIColor.red
textLabel.widthAnchor.constraint(equalToConstant: 40.0).isActive = true
textLabel.heightAnchor.constraint(equalToConstant: 20.0).isActive = true
textLabel.text = "Hi"
textLabel.textAlignment = .center
let textLabel1 = UILabel()
textLabel1.backgroundColor = UIColor.red
textLabel1.widthAnchor.constraint(equalToConstant: 40.0).isActive = true
textLabel1.heightAnchor.constraint(equalToConstant: 20.0).isActive = true
textLabel1.text = "Hi"
textLabel1.textAlignment = .center
I am generating the stack view like so:
//Stack View
let stackView = UIStackView()
stackView.axis = UILayoutConstraintAxis.horizontal
stackView.distribution = UIStackViewDistribution.equalCentering
stackView.alignment = UIStackViewAlignment.fill
stackView.spacing = 16.0
stackView.addArrangedSubview(textLabel)
stackView.addArrangedSubview(textLabel1)
stackView.translatesAutoresizingMaskIntoConstraints = false;
self.view.addSubview(stackView)
//Constraints
stackView.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 50).isActive = true
stackView.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -50).isActive = true
stackView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 100).isActive = true
How do I get the elements inside to align center?
I thought it was
UIStackViewDistribution.equalCentering
However, that didn't do much.
Thats odd. Normally a horizontal UIStackView with center alignment and equal centering distribution should do exactly that:
But maybe I'm not understanding you correct and you actually want something like this:
In which case you have to chose Fill Equally as the distribution method and make the labels itself center their text: