20

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:

enter image description here

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.

Community
  • 1
  • 1
Mrk Fldig
  • 4,244
  • 5
  • 33
  • 64

3 Answers3

13

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

enter image description here

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

enter image description here

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

enter image description here

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: Constraints of the blue view

And,

Orange:

Constraints of the orange view

Hope it helps.

MLBDG
  • 1,357
  • 17
  • 23
10

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.

enter image description here enter image description here

James Toomey
  • 5,635
  • 3
  • 37
  • 41
Bilal
  • 18,478
  • 8
  • 57
  • 72
  • Hmm thanks for this. The thing is there don't appear to be any constraints on the button they're all on the stackview and deleting them from the stackview then applies it to everything within. – Mrk Fldig May 21 '17 at 11:22
  • If you don't have other constraints on the button its fine... You can skip the first point add other constraints.. it should work i think. – Bilal May 21 '17 at 11:30
  • Ahh sorry gotcha, hmm equal width is disabled. I'm guessing because the StackView constraints would conflict. – Mrk Fldig May 21 '17 at 11:32
  • you have have to press `control` and drag the button to StackView then a small window popup will appear. Select "Equal widths"... I am going add some screenshots, hope that will work. – Bilal May 21 '17 at 11:41
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.

Fabio Almeida
  • 31
  • 2