UIStackView flexible width and constant width items - ios

Question

TL;DR
I want to replace a custom (different from other items) width item in UIStackView with flexible width item and center all UIStackView items.
More info:
I have a UIStackView that holds few custom UIView's:
self.handleButtonStack.axis = .horizontal
self.handleButtonStack.alignment = .center
self.handleButtonStack.distribution = .fillProportionally
self.handleButtonStack.spacing = 10.0
let hbVideo = HandleButton(image: "icon", title: "", type: .video, delegate: self)
hbVideo.widthAnchor.constraint(equalToConstant: 50).isActive = true
let hbInstagram = HandleButton(image: "icon", title: "", type: .instagram, delegate: self)
hbInstagram.widthAnchor.constraint(equalToConstant: 50).isActive = true
let hbWhatsApp = HandleButton(image: "icon", title: "", type: .whatsapp, delegate: self)
hbWhatsApp.widthAnchor.constraint(equalToConstant: 50).isActive = true
let hbHints = HandleButton(image: "icon", title: "title", type: .hint, delegate: self)
hbHints.widthAnchor.constraint(greaterThanOrEqualToConstant: 100).isActive = true
self.handleButtonStack.addArrangedSubview(hbVideo)
self.handleButtonStack.addArrangedSubview(hbInstagram)
self.handleButtonStack.addArrangedSubview(hbWhatsApp)
self.handleButtonStack.addArrangedSubview(hbHints)
After the user has preformed some action I want to change the UIStackView and remove the hbHints button and center the items.
I do that in this way:
if let subviews = self.handleButtonStack.arrangedSubviews as? [HandleButton] {
if let hintsButton = subviews.last {
self.handleButtonStack.removeFully(view: hintsButton)
let leadingSpacer = self.createSpacer(width: 50)
let trailingSpacer = self.createSpacer(width: 50)
self.handleButtonStack.insertArrangedSubview(leadingSpacer, at: 0)
self.handleButtonStack.insertArrangedSubview(trailingSpacer, at: subviews.count)
}
}
And adding a spacer like that:
func createSpacer(width: CGFloat) -> UIView {
let space = UIView(frame: .zero)
space.backgroundColor = .red
space.translatesAutoresizingMaskIntoConstraints = false
if width != 0 {
space.widthAnchor.constraint(equalToConstant: width).isActive = true
}
return space
}
My problem is that the Constraints are breaking with error and I can't figure out why. Is it possible to add a flexible width as spacer that stretch as I put it in place?
What I already tried:
Set a contentHuggingPriority to the items
Set a contentCompressionResistancePriority to the items
Adding constraints to the spacer item
Removing the width constraint for the spacer item
No success.
Here is the constraints breaking log:
[LayoutConstraints] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want.
Try this:
(1) look at each constraint and try to figure out which you don't expect;
(2) find the code that added the unwanted constraint or constraints and fix it.
(
"<NSLayoutConstraint:0x283414050 H:[UIStackView:0x124599e30]-(0)-| (active, names: '|':UIView:0x1245e9f20 )>",
"<NSLayoutConstraint:0x2834142d0 H:|-(0)-[UIStackView:0x124599e30] (active, names: '|':UIView:0x1245e9f20 )>",
"<NSLayoutConstraint:0x283416e90 UILayoutGuide:0x282e94460'UIViewSafeAreaLayoutGuide'.trailing == UIView:0x1245e9f20.trailing + 40 (active)>",
"<NSLayoutConstraint:0x283416620 UIView:0x1245e9f20.leading == UILayoutGuide:0x282e94460'UIViewSafeAreaLayoutGuide'.leading + 40 (active)>",
"<NSLayoutConstraint:0x283428b90 MyApp.HandleButton:0x124589460.width == 50 (active)>",
"<NSLayoutConstraint:0x283428af0 MyApp.HandleButton:0x124589e40.width == 50 (active)>",
"<NSLayoutConstraint:0x283428a50 MyApp.HandleButton:0x124589610.width == 50 (active)>",
"<NSLayoutConstraint:0x2834281e0 'UISV-canvas-connection' UIStackView:0x124599e30.leading == UIView:0x124576f20.leading (active)>",
"<NSLayoutConstraint:0x283428230 'UISV-canvas-connection' H:[UIView:0x1245897c0]-(0)-| (active, names: '|':UIStackView:0x124599e30 )>",
"<NSLayoutConstraint:0x2834282d0 'UISV-fill-proportionally' UIView:0x124576f20.width == 0 (active)>",
"<NSLayoutConstraint:0x28342bc50 'UISV-fill-proportionally' UIView:0x1245897c0.width == 0 (active)>",
"<NSLayoutConstraint:0x283428280 'UISV-spacing' H:[UIView:0x124576f20]-(10)-[MyApp.HandleButton:0x124589460] (active)>",
"<NSLayoutConstraint:0x28342acb0 'UISV-spacing' H:[MyApp.HandleButton:0x124589460]-(10)-[MyApp.HandleButton:0x124589e40] (active)>",
"<NSLayoutConstraint:0x28342af80 'UISV-spacing' H:[MyApp.HandleButton:0x124589e40]-(10)-[MyApp.HandleButton:0x124589610] (active)>",
"<NSLayoutConstraint:0x28342b2a0 'UISV-spacing' H:[MyApp.HandleButton:0x124589610]-(10)-[UIView:0x1245897c0] (active)>",
"<NSLayoutConstraint:0x283429810 'UIView-Encapsulated-Layout-Width' MyApp.AngleColorsView:0x124599fc0.width == 414 (active)>",
"<NSLayoutConstraint:0x283415f90 'UIViewSafeAreaLayoutGuide-left' H:|-(0)-[UILayoutGuide:0x282e94460'UIViewSafeAreaLayoutGuide'](LTR) (active, names: '|':MyApp.AngleColorsView:0x124599fc0 )>",
"<NSLayoutConstraint:0x283416440 'UIViewSafeAreaLayoutGuide-right' H:[UILayoutGuide:0x282e94460'UIViewSafeAreaLayoutGuide']-(0)-|(LTR) (active, names: '|':MyApp.AngleColorsView:0x124599fc0 )>"
)
Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x283428a50 MyApp.HandleButton:0x124589610.width == 50 (active)>
Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.

Answer 1

Here you need not give any centre alignment. As per your requirement you don't need that I think as you are giving constraints for all of your views and for the last view you are also giving greaterThanOrEqual constraint which automatically stretches your view to fill up the gaps.
So try changing the alignment from .center to .fill.
Then after you delete your last view you don't have to add any empty spacer to fill up the missing fields. Instead you can give constraints for your stack view itself.
For the leading and trailing anchor of the stack view give greaterThanOrEqualTo constraint instead of equal and also add a centre aligned constraint to the stack view.
So when you remove the view now the stack view automatically arranges the view for you in your needed centre aligned position.
Hope this is your expected end result.
expected output in GIF