CODEWITHSUNDEEP
iosswiftuistackview
Rujoota Shah
Rujoota Shah

Reputation: 1341

Stack view arrangement of controls percentage wise in iOS swift

I am building an iOS app with a form and I am using stackviews. This is the example of what I want to achieve: Example stackview

The textbox and button are part of horizontal stack view. What I need is a way to allocate percentage-like width to them. For eg, textbox would take 80% of total stackview width and button would take 20%.

Stackview's alignment and distribution property are set to 'fill'.

I tried adding width constraint to the button but I feel that its not proper way of doing it as width would differ for different screen sizes.

Upvotes: 5

Views: 3401

Answers (2)

Jasmine John
Jasmine John

Reputation: 921

You can use "Equal Width" property and assign respective multiplier of 0.80 and 0.20 to the child views.

Please check below steps:

1. Select textbox and Stackview and assign "Equal width" contraints to it.
2. Then select the contraints and edit it by applying multiplier of 0.80 to the textbox contraints.
3. Then select button and Stackview and assign "Equal Width" contraints to it.
4. Then select the contraints and edit it by applying multiplier of 0.20 to the button contraints.

With above solution width will be distributed percentage wise in all screen sizes.

For more info refer this page: https://jascode.wordpress.com/2019/08/15/weight-assignment-in-stack-viewpercentage-wise-size-calculation/

Upvotes: 4

matt
matt

Reputation: 535945

You are looking for the UIStackViewDistributionFillProportionally setting.

This will use the proportion between the intrinsic content sizes of the view as the proportion between their actual sizes. So, for 80% to 20%, make one view 80 wide and one view 20 wide (in their intrinsicContentSize overrides), and they will be resized in the proportion of 80-to-20.

Upvotes: 2

Related Questions