UIStackView Weight like Linear layout

Question

How to design the following layout with StackView

I know that it can be easily created without using stackview but is it possible using stackview because i have lots of ui which already designed using stackview how can i add divider between views like above image

For that i set the following constraints

**But run time it shows like **

What do you mean by "Blank black area" – PGDev Aug 19 '17 at 08:53 — PGDev, Aug 19 '17 at 08:53
see the above update question – Jaydeep Vyas Aug 19 '17 at 09:03 — Jaydeep Vyas, Aug 19 '17 at 09:03

PGDev · Accepted Answer · 2017-08-19T08:51:38.150

3

You can use some simple Autolayout constraints to get this kind of interface with a UIStackView.

The below image describe the hierarchy and constraints that you can apply:

Also the Accept and Reject buttons have Equal Width constraint.

Output screenshot:

edited Aug 19 '17 at 08:51

answered Aug 19 '17 at 08:17

PGDev

23,751
6
34
88

it looking perfect in storyboard but when i run project divider is not displaying – Jaydeep Vyas Aug 19 '17 at 08:40
Have you set the middle view's background to black and imageView's background to white? – PGDev Aug 19 '17 at 08:42
I have added the screenshot of the output I am getting with the same view. – PGDev Aug 19 '17 at 08:52
Here you can find the storyboard link: https://github.com/pgpt10/Tester – PGDev Aug 19 '17 at 08:58
Sure..Happy Coding..:) – PGDev Aug 19 '17 at 09:21

Mo Abdul-Hameed · Answer 2 · 2017-08-19T08:14:34.560

You can do that using UIStackViews, here is how:

First, create a subclass of UIView to use as the class of the UIView in between the 2 buttons.

class CustomWidthView: UIView {

    override var intrinsicContentSize: CGSize {
        return CGSize(width: 1, height: self.frame.height)
    }
}

You only need to override intrinsicContentSize.

Now, add your 2 buttons and an empty UIView between them, and set the class of the UIView to be CustomWidthView. Embed your 2 buttons and the view between them in a stack view, and set the position of the stack view properly using the appropriate constraints.

Select the stack view and from Attributes inspector, find the property named Distribution and from the drop down menu next to it, select Fill Proportionally.

To reflect your changes in the UI Builder, select the custom width view and go to Size inspector, go down to the bottom of the list and you'll find a property called Intrinsic Size, change its value to be Placeholder, and from the width drop down menu, select 1.

There may be a better way to achieve this, but this is the one I found for now and I'd like to find a better one.

You don't need to create any subclasses. You can just do it with constraints on the subviews. [The `UIStackView` documentation](https://developer.apple.com/documentation/uikit/uistackview) explicitly says “You can also fine tune an arranged view’s appearance by adding additional constraints to the arranged view.” — rob mayoff, Aug 19 '17 at 08:24
I agree that this is overkill, the first solution I tried was similar to the one in your answer, but for some reason, it is drawn as expected in the UI Builder, but when you run, then middle view didn't get displayed. — Mo Abdul-Hameed, Aug 19 '17 at 08:31

score 2 · Answer 3 · answered Aug 19 '17 at 08:22

Since UIStackView uses auto layout to arrange its subviews, you can modify its behavior by creating constraints.

I assume you have three views in the stack: the accept button, the divider, and the cancel button.

Create two constraints:

An equal-width constraint between the accept button and the cancel button.
A fixed-width constraint on the divider (presumably setting its width to 1).

UIStackView Weight like Linear layout

3 Answers3