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.
Related
I am trying to create the following in a xib:
https://imgur.com/nyLv65t
Please ignore the poor drawing. Basically, the black border is the main view. Inside that main view, I have a smaller view (in blue) that should be on the right side of the main view, centered vertically. The blue view also has a label as a subview, so I need the blue view to have a dynamic width based on the length of the label.
However, I can't seem to get the constraints right. Every time, I get red constraints and errors. What would the correct constraints for this be?
You need to give below three constraints
Vertically center to it superview
Constant trailing space.
Leading constrain with >= value to specify the value of x
Storyboard constraints:
Download demo code
I have a 4 labels in a storyboard, one large one at the top, and 3 smaller ones, with the bottom one centered in the middle(horizontally and vertically) like so:
I have a few constraints set already, like locking the top label at the top of the screen, and centering the bottom. However, I do not know constraints I should use so that all four labels are equally spaced, AND the bottom label remains at the center. I have played around with some constraints such as the spacing between the labels, but when I try to view this using a different screen size, everything is messed up:
Any ideas?
The best approach is a UIStackView with axis-> vertical , distribution -> fillEqually , so hook it's top ,leading , trailing to main view , drag the 4 labels inside it , and ctrl drag from the bottom most label to main view and select center vertically && horizontally
You can made a trick here:
Set the top global label top constriants and center horizontally to super view.
Set the bottom label constraints center vertical and horizontally to super view.
Take three dummy view between label one-two, two-three, three-four.
Set constraints between these dummy view as equal height.
Then set top-bottom contraints between label and dummy view properly.
Set horizontal constraints of the label and dummy view. I have set as center horizontally.
Here I have attached the image:
For better understanding I have colored the dummy view as light-gray. You can set it as clear.
I have two UITextFields in a vertical UIStackView. I want their leading and trailing edges to be 20 points away from the edge of the UIStackView. However I cannot figure how to do this without conflicting constraints. The conflicting constraint errors don't make sense to me as they say that I have two constraints that conflict but as you can see I only added one constraint for each UITextField.
Here is my situation in images:
Here is one option...
Embed your UITextFields inside UIViews and let the stack view stretch the Views to the full width. Then constrain the text fields to their "containing" views.
Adding a Height constraint to the text fields, and then "pinning" the top and bottom to the top / bottom of the containing view will also get the view to "auto-size" to the heigh of the text field.
For clarity, I set the background color of the containing views to "Cantaloupe" so you can see them, and the blue rectangle is just a plain UIView (as you showed in the Document Outline in your image), with a Height constraint of 80.
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...).
I want to horizontally center multiple UILabels - as a group - on a line in Interface Builder. One the straight view controller i could not figure out how to do this. I read comments about place the UILabels in a View and then centering the view in the view controller. When I tried this, overtime I said to update frames in the interface builder, the View would be resized down to nothing. (i.e. its height and width would be set to 0 by IB). I need to know how to get this to work in interface builder.
An example of a line containing multiple labels I want horizontally centered is below. The braces simply indicate the start and end of each label and are not art of the text. The <- 6 -> is meant to indicate the trailing space from label 1 to label 2 is 6
Label 1 Label 2
[Rating: 0.0]<- 6 ->[Distance: 125.34 Kilometers]
Any suggestions would be greatly appreciated.
Here is an EXACT example of what I have done and it does not work:
Create a new view controller in IB
Place a page label at the top of the page centered horizontally and aligned to the top of the layout guide.
Add a view with the following constraints on the page:
Now add two labels to the view with the following constraints:
Once this is done I get the following error and updating the frames will cause it to be give a height and width of 0
Here is what the page looks like in IB:
I need the height and width of the view to size automatically so that I have put a multiline label in the view and have all the contents of the view treated as a group and centered on the page.
Any suggestions would be greatly appreciated.
Here is a snapshot of a working set of all the constraints on an abbreviated layout that produces an always-centered view that automatically resizes with the child views (i.e., as the content of any label changes, the view grows or shrinks around it).
Important to your solution, the view has neither a height nor width constraint; its size is constrained entirely by its descendant constraints.
The key is that every component has a direct or indirect constraint from which its size and position are specified or can be inferred. For example, in order for the view to infer its width, the child labels must have a leading space constraint on the first label, a trailing space constraint on the last label, and a horizontal space constraint between interior labels. Those constraints plus the contents of the labels allow the width of the view to be inferred ... and force the view to dynamically conform to that width.
The same applies for the view's height. For example, you can specify the top and bottom space of just one label, or all of them. If just one, the remaining labels can be vertically aligned with it (see "Align Center Y to: Label1" in the screenshot).