I have a Horizontal StackView inside vertical StackView.
Horizontal StackView contains a image (w=30 , h= 30) and a label.
Need
I need to make image & label to center horizontally as per label intrinsic content size.
So, it looks like ----Space----- image & label -----Space---
How can I achieve that?
Thank you,
i am using only horizontal stackView to make it center.
What i did.
Step 1:
make my image with specific width and height.
Step 2:
Both are inserted in Horizontal stackView and make that stackView center aligned.
Edited:
If i use vertical stack View On top, i can't find any problem for centering label and image
You can use UIView inside Horizontal StackView then add image and label on UIView
Please take a look on attached image
Because the VerticalStackView forces the HorizontalStackView to have same width, So you have to wrap imageView and label inside a UIView. Like this
Add two extra views, I named it View 1 and View 2(green color) on left and right of your image and label, set two views width equal so your imageView and label will automatically center, don't forget set width for imageView and label. Set view 1 and view 2 clear color or under other view view if needed(to see background, other views, interaction with other views...).
Related
I am new. And I want to create a structure like this:
label (unknown size) | View
label (unknown size) | View
My structure like this:
But the label is cut, How can I do this dynamically?
I would suggest you go for a hierarchy like the screenshot below. How you can do this is by changing your views as follows,
Change the axis of the parent UIStackView to vertical, and the 2 child UIStackView to horizontal. Make sure the parent Stackview has no height set
Make sure the distribution of the horizontal StackViews are fill
Add The labels into the horizontal StackView and set ONLY the width (ex- 250 in my example)
Then add the UIView into the horizontal stackview. It should fit in the rest of the StackViews space
Voila!
In the image below
Blue, Purple are UIViews
Red, Green are UIStackViews with background colors
Hello thanks for question. You should set Label’s line property to Zero 0 in attribute inspector. It should stop cutting text and will wrap it in new line.
I would like to overlap two views (one view on top of each other) inside uistackview . My objective is to display initials of username on top of his image. The image size is constant and the initial label should be in centre of image view
I have a uitableviewcell on which other labels and buttons are also organized
here is the view hierarchy.
I tried to fix this in following way and it works
Excluded the view which I wanted to overlap from UIStackView
Make that Label to align with following constraints
Center Vertically with ImageView
Center Horizontally with ImageView
Equal Widhts with ImageView
Equal Heights with ImageView
To overlap views use -ve spacing in StackView
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
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 ?
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.
You need to set the alignment to center inside attribute inspector of UIStackView
Check attribute inspector for stackview settings:
follow these steps.
1) drag Uiimageview.
2) click on UIimageview. Press Ctrl and drag downward or sidewise to parent view.
3) click on "centre vertically in view" and centre "horizontally in view"
4) then set height and width like below.
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.
today i have set up some constraints in a view but there looks awful. Which Constraints have i to add (see screenshots)
In XCode
In Simulator
If I have understood your requirement right, you need to have four images with labels below these individual images. If this is the case, you can use collection view whose cell contains a image view and a label. You can give the spacing between cells, size of cell and intercell spacing through delegates. Also just you need to specify image view and label constraints in collection view cell. Like for instance, image view placed horizontally centre and pinned to top of superview, label placed horizontally pinned to bottom of image view and top of label to give a gap between them.
Fix the all images height and width, and given the leading, trailing, top and vertical spacing between label and images. Also fix the label height. You will given the min 4 and max 6 constraints for every fields.
The issue : Image take most of the stack and text shrinks
I tried to change content hugging priority but no changes !
How to do it in UIStackview using storyboard?
What I want the cell to look like Eventbright event Cell?
What I got is an image that take most of the cell?
Instead of Fill, change the Distribution of the UIStackView to Fill Proportionally and add constraints for the width of each element. Those constraints will serve as a guide to proportions on one element to each other and not as fixed sizes.
I tried it the following way.
The overall set up is given in pic:
At run time result is as given:
First Stack view is fill proportionally
imageview width is 1:4 of stackview width (control and drag from imageview to stackview and set equal width to 25% )
From control and drag select equal width. as shown
stack view 2 is fill equally
stack view 3 is fill equally
Hope it can help