Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Resizing Button within a stackview

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.

like image 808
Mrk Fldig Avatar asked May 21 '17 10:05

Mrk Fldig


People also ask

How do I resize a button in Xcode?

Option1. Set the StackView to Distribution Fill and then control drag the 0 Button onto the . Button . Select Equal Widths and then set the Multiplier (times 2 since it should be twice the size) in the Size Inspector.

How do I resize a stack view?

This is the instructions: Go to the Storyboard and drag a Vertical Stack View to the main View. Drag a Label inside the stack view and give it a title of "00:00". Next, drag three buttons to the Stack View below the Label.

When should I use StackView?

Best use of stack view is that if you want to set multiple controls allinged vertically or horizontally to each other you just add all of them in stack view. stackview will handle its allignment you just need to give frame contraints to stackView.


3 Answers

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.

like image 99
MLBDG Avatar answered Nov 01 '22 04:11

MLBDG


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

like image 25
Bilal Avatar answered Nov 01 '22 04:11

Bilal


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.

like image 20
Fabio Almeida Avatar answered Nov 01 '22 03:11

Fabio Almeida