Resizing Button within a stackview

Question

So I've be studying Swift/iOS development recently and I'm having a little trouble with sizing buttons within a stack view, I have the following layout:

There are two TextFields and a button in a vertical StackView, the StackView is centred horizontally and vertically(with a bit of spacing). It's anchored width ways to the left and right margin.

I wanted to reduce the size of the button so it's about 80% of the width of the StackView.

Things I've tried:

• Adding a constraint to width of the button, this causes conflicts with the StackView.
• Adding a sub StackView and then trying to set it's left/right anchor constraint to 20 with the thought that it'd give it a bit of margin. Again this causes conflicts with the outer stackview.

I'm doing all this in the storyboard view rather than in code as I was trying to get to know the interface.

I've had a good hunt through and can't seem to find any answers that apply, apologies if it seems basic but thought it might be beneficial on the off chance anybody else new to Xcode/Swift comes across this.

Answer 1

Try this..

1. Remove leading and trailing constraints of the button.
2. Add constraint Horizontal in Container to the button.

3. Add constraint Equal Width of the button with super view (which should be stack view I suppose). Like this.. Press control + drag the pointer from button the StackView and then selec Equal widths from the small popup menu.

4. Edit the Equal Width constraint and set Multiplier to 0.8.

Answer 2

Hold the Control button and click and drag the button you want to resize to the same button and select Width and Height so select Add constrains. This will give you a size of image button, so you can change this in Inspector. Remember to change view to Scale to Fill. This is solved for me.

Answer 3

For those trying to resize the height of some view inside a stackView like in the following example:

First, set the constraints for the StackView(width/height,x,y), then set the StackView properties as follows:

Next, select the view you want to resize. I.e. the green one, and add these constraints:

Then just add more constraints to the other views/button/labels whatever. In this example here are the constraints for the blue and orange views:

Blue:

And,

Orange:

Hope it helps.