0

My problem all the time is how to center one element inside the stack view

Please look at my screenshots below to explain:

enter image description here

Number 1) Is the main StackView

Number 2) Is the concerned StackView which I want to make its content ( UIView in No 3 ) centering inside it

Number 3) This UIView I want to center it inside No.2 and give it a smaller width matching the blue line in the pic

Note: The problem is when I give a fixed width to the UIView in No.3 it always affect the scroll view behind the main StackView and shrink it !!

Here below is the configuration of the main StackView in No.1

enter image description here

Here below is the configuration of the sub StackView in No.2

enter image description here

As I said when I give a fixed width to the UIView in No.3 it always shrink and damage the scrollView which is in the App background

So can you help how to deal with this issue please?

Let.Simoo
  • 93
  • 9

1 Answers1

1

I'm assuming you don't actually want the green color - that's just to make the view visible.

What you probably want to do is embed the horizontal stack view (containing the two buttons) in the green view, instead of the other way around (as you have it now).

Try it like this:

enter image description here

MainStack settings:

enter image description here

BtnsStack settings (I'm guessing you want some space between the buttons - I used 8):

enter image description here

Here's how it looks at run-time, with the green BtnsStackHolderView background set to clear:

enter image description here

and, rotated to show the buttons remain centered horizontally:

enter image description here

Edit how to center the green view inside the stackView without embed it inside another View?

The reason your green view is not centered in the stack view is because you have your stack view's Alignment set to Fill, which stretches the arranged subviews to Fill the Width of the stack view.

For a stack view with a Vertical axis, alignment options are:

  • Fill
  • Leading
  • Center
  • Trailing

Here is an example with Center (the stack view itself is constrained Top / Leading / Trailing 40-pts from the edges):

enter image description here

Starting from the bottom...

The blue wEqToStack h60 view is constrained:

  • height = 60
  • width equal to the stack view's width

The yellow w200 h60 view is constrained:

  • width = 200
  • height = 60

The orange wNone h60 view is constrained:

  • width = no width constraint set
  • height = 60

And the green BtnsStackHolderView has no width or height constraints... its size is determined by constraints to its content (the BtnsStack with 20-pts on each side).

If we run this, we see (red dashed line is just to show the frame of the stack view):

enter image description here

Whoops! Where did the orange view go? Since we didn't give it a width constraint, and the stack view's Alignment is set to Center, it ends up with a width of Zero.

So, if most of the views in your stack view have their own width defined, using center reduces the number of "containing" views needed. But if most of the views need to stretch the width of the stack view, it's probably easier to embed content you want centered in "containing" views.

DonMag
  • 69,424
  • 5
  • 50
  • 86
  • No, Actually I want the view which is in green color to be centered as well with a spacing around... what I did: I emptied the green view inside a view then I centered inside it then I hide the back view by setting a clear color to its background... – Let.Simoo Jun 27 '20 at 22:56
  • But, my question is... how to center the green view inside the stackView without embed it inside another View ?? – Let.Simoo Jun 27 '20 at 22:57
  • @Let.Simoo - see the edit to my answer for an explanation. – DonMag Jun 28 '20 at 14:12
  • Wow What the detailed and excellent answer... Thank you for the good explanation my friend. I really appreciate your effort – Let.Simoo Jul 02 '20 at 07:32
  • So, as I understand... with the Center filling option we must give either a fixed width or points from the Leading / Trailing constraint right? – Let.Simoo Jul 02 '20 at 07:35
  • for the Orange case.. it disappeared because no fixed width or points to the constraint given... correct? So, width and constraints are mandatory for Center Filling option! – Let.Simoo Jul 02 '20 at 07:37
  • 1
    @Let.Simoo - stack views ***arrange their subviews***. You wouldn't give Leading / Trailing constraints, because you're telling the stack view to center that element horizontally. You either give it a constant width or a proportional width (such as equal to the stack view width with a multiplier of 0.8 to make it 80% of the width). If the Orange view has an **intrinsic content size** - such as a `UILabel` - you wouldn't need to give it ***any*** constraints. Note: *the green `BtnsStackHolderView` has no width or height constraints... its size is determined by constraints to its content* – DonMag Jul 02 '20 at 12:00
  • Understood my friend thank you again for the clarification!.... and please if you found my question is useful for others kindly support me and vote it up because I want to unlock the next level in my account! – Let.Simoo Jul 03 '20 at 07:16