I've been learning how to make iOS apps, and have come across a minor annoyance. I can't find an easy way to align my text inputs.
Looking at the below screenshot, you will see that I've managed to align my text fields, which is what I want.
However, I did this manually by changing the individual Leading Space between each Label and Text Field.
My question is, how can I dynamically align my text fields?
Anand has posted nice way, but I personally use equal widths and heights in this kind of situation. So let's make a brief of it:
1) First, put constraints onto the age label:
left leading c.
top leading c.
width c.
height c.
2) Put constraints onto the top right textfield:
right trailing c.
top leading c.
height c.
the constraint, that will be related to spacing between label and textfield, so CTRL drag from textfield to label a select horizontal spacing c.
3) Then, make a second row of you elements - place second label and second textfield approximately of the same width and height in storyboard (with IB you can fix it later using magic function Update frames).
4) Then, set this for your weight label:
left leading c.
top leading c.
then select both labels and check equal widths checkbox, and equal heights checkbox.
5) The same repeat width your second textfield. You don't have to make spacing constraint in the second step.
FINISH Now all four items are aligned.
If you want to change height of labels for example, just select the height constraint of it and your other labels will follow this change as well.
So final experience is here in this animation:
Need to fix width of every label, every textfield's X- coordinate distance should me same according to bottom textfield's make sure every label's width should be same then add constraints to textField.
Related
I'm doing an assignment from a book for learning iOS development. The assignment requires that the name label at the upper left area of a table cell should be able to display multiple lines if the name is too long and it should not go beyond the leading constraint of the value label at the far right of the same cell like this:
Besides the other usual constraints, I added the trailing constraint to the name label, which is equal to the trailing constraint of the value label, like this:
And the run result is like the following:
The name label text undesirably runs over the top of the value label text.
I've also tried to add a horizontal space between the name label and the value label, but the compiler reported a conflict of constraints. Would you please tell me what I should do to make it right?
Thank you very much!
First You need to set Your name label trailing constraint to your value label leading like as below
Then If you try to increase content of your name label it shows error like this
To Solve this error go to View Controller View hierarchy and change the priority of name label
Then You achieved...
If you typed that correctly, then your problem is you set the trailing anchor of the name label equal to the trailing anchor of the value label. That would mean that the right edge of each label has to be equal. You don't want that. The system is probably breaking your constraint and making its own weird one instead which is causing the undesirable behavior.
Set the trailing anchor of the name label equal to the leading anchor of the value label minus some constant (whatever padding you want).
Programmatically you do something like this
nameButton.translatesAutoresizingMaskIntoConstraints = false
nameButton.trailingAnchor.constraint(equalTo: valueButton.leadingAnchor, constant: -10)
If you must use storyboard, which I advise against in general, I think this or some other tutorial page will show you how. I don't know how to use storyboard very well at all.
https://www.raywenderlich.com/811496-auto-layout-tutorial-in-ios-getting-started
tried this one, hoping the following is the result you required
final result
in order to acquire this
first insert two labels in the cell as follows
labels added
given top and leading constraints for the title label
title label constraints
in order to give constraints (Horizontal spacing) between title and the amount
right click and hold in title label and drag to amount label. it will show a
pop up window as follows
horizontal spacing
once we select the horizontal spacing we have to change according to our need
in-order to change select title label then select size inspector from the
right window
then change the trailing space to the amount label
updated value
now given constraints for title label
leading
top
horizontal spacing to amount label (trailing)
once it given it will show error in the constraints since the amount label constraints are not given
next have to give constraints for amount label
trailing
width and size
vertical position on the cell
constraints for amount label
now try to input larger text values in title label
look like one more step to complete
in order to get multiple line change the number of line property value of title label to 0 in attribute inspector
final output
I Have a view like so:
And I am trying to add constraints so the text fields are side by side so the auto looks the same no matter the device width, how would I do that?
I have tried the following for all 6 of them:
But it ends up looking like this:
What am I doing wrong?
Ctrl drag from the description TextField to vendor TextField and select Equal Widths from popup
You can also use a vertical stackView where each row is a horizontal 1 with distribution set to Equal spacing and drag the text fields to it that will be more easier
Well, let's look at what we know about the horizontal axis (I assume you've got the vertical axis taken care of). There are two text fields; call them Left and Right. We know these things:
Where Left's leading edge must be
Where Right's trailing edge must be
The distance between Left's trailing and edge and Right's leading edge
The relationship between Left's width and Right's width, i.e. they are equal
Ta-daa:
(A UIStackView would construct these same constraints for you, but in a simple situation like this it's probably more trouble than it's worth.)
There are many ways to do it
I give you two but recommend the first one in your case.
First :
Define a constraint by draging one of your UITextFiled to the other one and set it to “Equal Widths”
You may also be able to define a percentage for each (60-40%) if you like.
Second :
Define a constraint like above (draging) And define a relative ratio (0.5) for UITextField width against its superview. Do it for the other one. You need to go to Object Inspector Tab and change the values if needed (so this requires two constraints, one for each UITextField as each of them are relative to the their superview) this is also a little bit slower than the first approach since margins should be defined with priority.
I'm desperately trying to constrain the first baselines of a UILabel and a UITextView in Interface Builder. From my understanding this should be quite easy by simply adding the following constraint (Pseudo-Code):
label.firstBaseline = textView.firstBaseline
However, depending on the other constraints and some view settings I get really awkward results as shown in the following screenshots.
1st Case: Disable scrolling & Align the top edges
This is only for showing the general view setup. I have disabled scrolling for the textView to avoid ambiguity. (Otherwise the textView cannot calculate its own height from its containing text.)
2nd Case: Disable scrolling & align the first baselines
Same setup as in the 1st case with the only difference that I have removed the constraint that aligns the top edges of the views and added a constraint that aligns the first baselines of the views instead.
For some reason, the label "takes off" well beyond the bounds of its superview and ends up at a y position of 7764. No idea why.
3rd Case: Constrain height & align the first baselines
Now I have scrolling enabled for the textView and constrained its height instead.
Obviously the label's first baseline gets aligned with the textViews top edge even though the constrained says to align both their first baselines. I read in the Apple docs that the firstBaseline parameter returns a view's top edge if that view doesn't have a baseline. So it seems that the textView doesn't have a first baseline in this scenario.
Does a UITextView in general have no firstBaseline?
And if so: Why? After all, it's a view that draws text and thus this property should be set.
Any thoughts on this are appreciated.
I have a problem with a label constraint.
My goal is to have 2 labels on the same Y coordinate of a tableViewCell. One of the labels is pinned on the left side and the other is pinned on the right side.
Like that:
[This is the first label] [Second]
The first label should have a dynamic width based on the text which it has to display, BUT it should end about 20 points to the second label.
I tried that with numerous constraints, but sometimes the first label seem to push the second label out of the view and sometimes the first label just overlaps the second label like in this example:
The first label has constraints for:
Top Space to Superview
Leading Space to Superview
Bottom Space to a third label
Trailing Space to THE second Label (<= 20)
What is the correct way to display the two labels correctly?
Thanks in advance, appreciate your help!
EDIT
Tried the solution with giving the second label a maxwidth. Now, it is randomly working or not working. I don't get this at all.
Like others have said, you need to set the trailing constraint from the left label to the right label as greater than or equal to, so that there is a gap of at least 20 between the two.
But, you also need to designate which label truncates first. By not doing this, iOS will take it upon itself to choose, which is probably why your current solution works only some of the time. This is where Content Compression Resistance Priority comes into play. Set the value lower for the label you want to truncate first.
You can do this on your storyboard under the size inspector.
I'm assuming you want your left label to truncate first. In that case, make sure the left label has a lower horizontal content compression resistance priority than the right label. Notice how above I just dropped it to 749, as the default is 750.
Check out this answer for a good explantation on content compression and content hugging.
if your second label on the right side has fixed width or max width :) here is what you can do :)
Set the distance between left label and right label to >= 20
set the width of the right label with some value using [yourvalue] or [>=your value]
SO overall here is how label's constraints should appear
|-(distance_to_left_Label)-[left-label]-(>=20)-[right_lable(your_value)]-(distance_to_right)-|
Hope my answer helped :)
I am trying to convert my app to use Auto Layout.
This is how it is supposed to look (before I used Auto Layout):
Now I am unsure how to achieve the following using Auto Layout:
The left text label (with 22:35 in it) must be in the horizontal
center of the KL1032 label when the right label is not present (with
-14 min in it).
If the right label actually is present, then the right edge of the
22:35 label should align with the horizontal center of the KL1032
label and the left edge of the -14 min label should also align with
the horizontal center of the KL1032 label, leaving a little space
between the labels just as in the screenshot.
Which constraints do I need to use for achieving this? Do I also use Content Hugging priority's?
I tried just centering the 22:35 label, which is fine if the right label is empty/not present. But when the right label is present, this of course does not work correctly.
Embed each label in a view and give all the views a minimum width constraint of 14. Then the layout adjusts as you describe when the right label is empty. So, you layout the embedding views:
You're going to have to add and remove the "(-14 min)" label rather than just hide it or set it to be empty.
Set the 22:35 label to be have its horizontal center aligned with that of the KL1032 label, but with a somewhat reduced priority (say 750). Also set a constraint so that the trailing edge is greater than or equal to the center of the KL1032 label minus whatever slight spacing you want. This one should be at priority 1000 (required).
When the "(-14 min)" label should be present, add it and set up constraints on it. Constrain its leading edge to be the trailing edge of the 22:35 label plus the spacing you desire. Also create a constraint to align its center with the center of the KL1032 label, but set its priority to be between required (1000) and the constraint centering the 22:35 label, for example 800. The layout system won't be able to center it because that would force the 22:35 label past its required constraint, but it will get it as close as possible.
When that label should not be present, just remove it from the hierarchy, which will also remove its constraints. The 22:35 label will move back to being centered (because it can and it "prefers" to).
If you prefer, you can do the layout in the NIB with both labels present. Make outlets to the "(-14 min)" label and also the constraints on it. Make them strong because you'll be removing them from the hierarchy temporarily but don't want them released. That way, your code can just remove and re-add them as appropriate, without having to express the constraints in code.
Edit: Oh, and you'll want a constraint setting the baseline of the "(-14 min)" label to be equal to the baseline of the 22:35 label. You'll have to add that each time in code or set it up in the NIB with a strong outlet and re-add it each time, just like the others.
Edit 2: Another approach occurred to me. You could leave the "(-14 min)" view in the hierarchy and all of the constraints in place all the time. When you don't want it to show, set the view to hidden and set the constant of the constraint between its center and the center of the KL1032 label to be a much larger value. Definitely large enough to allow the 22:35 label to take its preferred position of being centered, potentially large enough to be well off-screen.
Since you don't want the 22:35 label to follow it all the way over, the constraint establishing the spacing between those two labels should be made to be "greater than or equal" rather than "equal". This change would not be conditional on whether the "(-14 min)" label is showing. It's just how that constraint should always be.
When you do want the "(-14 min)" label to show, reset the constraint that tries to center it back to having constant equal to 0. Also, of course, unhide it.