10

I have a simple UIImageView with 50x50 size. If I had a UIView of size 100x100 and I wanted to center the image inside of it, all I have to do is set these enter image description here

But how do I do the same with a UIStackView of size 100x100?

EDIT i think i should have been more clear. The questions is, how do i center the image both vertically & horizontally inside of the UIStackview ?

Just a coder
  • 15,480
  • 16
  • 85
  • 138

4 Answers4

29

Use two stack views.

Vertical stack view with centre alignment.

Inside that is a horizontal stack view with centre alignment t.

Inside that is your image.

Fogmeister
  • 76,236
  • 42
  • 207
  • 306
11

You need to set the alignment to center inside attribute inspector of UIStackView

enter image description here

Hussain Shabbir
  • 14,801
  • 5
  • 40
  • 56
  • The question asks how to centre vertically and horizontally. – Fogmeister Jul 31 '17 at 08:37
  • @Fogmeister Then just add leading and trailing constraints with i.e. 16 pt and set priority to Greater or Equal. That's all for horizontal stackView. For vertical you should set top & bottom constraints accordingly. – Mykhailo Lysenko Sep 27 '19 at 13:57
  • @MykhailoLysenko uistackview is there so that you don’t have to mess around with so many auto layout constraints. Nested stack views are suggested and recommended by Apple. And adding a vertical stack view inside a horizontal stack view is perfectly fine for centring vertically and horizontally. – Fogmeister Sep 27 '19 at 17:06
  • @Fogmeister any stackView is a UIView subclass that leads to take some graphic memory. And constraint is an NSObject sublclass and takes only either a few values and references to view or string of visual format. It's like you may add many sublayers onto a view (i.e. drawing custom borders) but it would be better to draw them withing CGPath that is just an array of points. BTW it's not hard and tricky to add those 2 constraints and that is more lightweight for an app. And if you finally count all those improvements you'll find out constraints to be a better approach. – Mykhailo Lysenko Sep 30 '19 at 12:06
  • @MykhailoLysenko UIStackView is not a rendered view and does not take up any graphics memory. It is not like a transparent layer etc... it is there to be used as a layout device. Much like constraints. – Fogmeister Apr 23 '20 at 11:03
0

Check attribute inspector for stackview settings:

image

suma
  • 9
  • 1
-3

follow these steps.

1) drag Uiimageview.

enter image description here

2) click on UIimageview. Press Ctrl and drag downward or sidewise to parent view. enter image description here

3) click on "centre vertically in view" and centre "horizontally in view"

4) then set height and width like below. enter image description here

Thats it. your imageview will be at centre regardless of the device type. good luck.

leave a comment if you any question. Accept the answer if it helps you.

Faisal
  • 162
  • 1
  • 12
  • i think i should have been more clear. The questions is, how do i center the image both vertically & horizontally inside of the UIStackview ? – Just a coder Jul 31 '17 at 07:05
  • May be i didnt get your question right. but UIStackview also work as a normal view. you can apply these steps even if UIImage is inside a UIStackView. you can position it with respect to any parent view with same steps. drag UIImage to UIStackview and click centre horizontally and vertically. it will align the UIImage in the centre of stackview. but before that you have to apply constraints to UIStackView. – Faisal Jul 31 '17 at 07:19
  • 1
    The whole point of using StackView is that you don't need to use constraints inside the stack view. If you're using constraints (for anything other than height and width) inside the stack view then you shouldn't be using a stack view. The way to centre like this with stack views is to use nested stack views. One for the horizontal centre and one for the vertical centre. – Fogmeister Jul 31 '17 at 15:38
  • the question was center inside UIStackView!! – Md Imran Choudhury Jun 17 '18 at 04:55