Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Add Constraint for view inside stack view

I have one stack view that contains with 4 buttons. And each button I also add subview to that. The subview of that 4 buttons, I try to program to add constraint into it. Some constraint such as .Trailing .Leading .Top .Bottom I cannot add to it by error constraint and stack view problem. How any solution to add that constraints to subview of stackview. if have any sample it's really good for me. thank in advance

like image 235
Leang Socheat Avatar asked Jun 30 '17 17:06

Leang Socheat


People also ask

How do you add constraints in stack view?

As you embed the buttons in the stack view, they are resized to its intrinsic size. If you want to set the width to 200, you will need to add the size constraint to the stack view. In the document view, control-drag from the stack view to itself to bring up the context menu. Choose Width to add the width constraint.

Do stack views have intrinsic content size?

Stack views don't have an intrinsic content size, so you must set it either implicitly with Auto Layout constraints or explicitly via its intrinsicContentSize property. When nested in a scroll view, constraints between the stack view and the view containing the scroll view are necessary for things to work as expected.

How do you stack view in storyboard?

To use a stack view, open the Storyboard you wish to edit. Drag either a Horizontal Stack View or a Vertical Stack View out from the Object library, and position the stack view where desired. Next, drag out the stack's content, dropping the view or control into the stack.


1 Answers

UIStackView's power is to reduce your using of constrains, just give it some setting info such as axis, distribution, alignment, spacing. stack view will layout your subview item automatically, cause stack view's size is based on its' subviews' intrinsicContentSize, you can set subview's size by extra constraints to override.

adding constraints to subview of stackView is the same as other items in UIView. but is not a StackView way, and you should be care about adding conflict constraints.

hope this code demo helps:

let stackView = UIStackView()
let demoView = UIView()
demoView.backgroundColor = UIColor.red

stackView.addArrangedSubview(demoView)
demoView.translatesAutoresizingMaskIntoConstraints = false

// add your constraints as usual
demoView.widthAnchor.constraint(equalToConstant: 300).isActive = true
demoView.heightAnchor.constraint(equalToConstant: 200).isActive = true
demoView.trailingAnchor.constraint(equalTo: stackView.trailingAnchor).isActive = true
demoView.topAnchor.constraint(equalTo: stackView.topAnchor).isActive = true

view.addSubview(stackView)
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
stackView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
like image 66
vg0x00 Avatar answered Sep 29 '22 23:09

vg0x00