Auto Layout TextField. Center, top - swift

I try to understand auto layout. I have a Text field with 3 constraints:
- Align Center X to: Superview
- Top Space to: Superview 50
- Width Equals: 150
I have a warning: Equal constraints may cause clipping
If I change to
- Width Greater Than or Equal 150
I have the warning: Width and horizontal position are ambiguous.
I am confused. In fact, those Constraints work well for a button or a label.
- Why is it different for a TextField?
- How to position a TextField horizontal center, top 50, and width 150?
(It seems that I have to add a leading and trailing Greater Than or Equal. That seems redundant to the Width Greater Than or Equal 150. That works to silence the warning but that seems a solution too complicated and redundant. is that right?)


It's because UILabel and UIButton adjusts its size according to its content. In this case, you need to specify a proper width or you can give a leading and trailing anchor with the desired padding.
Here's is how you can resolve your constraint issue in this particular case. Give the text field the following constraints:
50 points from the top.
Leading from the super view with padding.
Trailing anchor from the super view with padding.
The last two anchors can be replaced with these two constraints:
Width constraint for the text field.
Centre horizontally to the super view.
Here's how you achieve this on a story-board:


I just checked this on:
Xcode 11.2.1
Xcode 11.4.1
The warning shows on 11.2.1 but does not show on 11.4.1
In my view, even though it is a valid warning, it was a silly one and appears to have been removed in the version update.
If you want a label to have a width of 150, of course you know the text will be clipped if it is too long. There is no way around that for a single-line label, unless you allow it to expand outside the bound of the window.
Again, that's a valid warning, but that may be exactly what you want.
If you want a text input field to have a width of 150, the text will scroll when you input too much to fit.
So, why the warning on a text field? No idea. That probably could be considered a bug.
You can get rid of that warning by giving your Width: 150 constraint a Priority: 250. Just single, quick test shows that the field width will remain at 150 even when typing too much text. But... I'd hate to rely on that assumption, and if the field width / leading / trailing etc is related to any other UI elements, I wouldn't count on it not causing other layout issues.
I would say (my opinion only) this is an IB warning that is safe to ignore.

Related

Label width not grown according to content of label

label width is not increasing according to content in table view cell
Please check the attached image for detail

You need to put below constraints to the UILabel instead of leading Constraints.
Why this happens so ?
As the leading is not defined flexible, It will choose the constant value and therefore it will by default will leave space equal or greater from leading.
If we set leading with safe area it will increase width as the text expand till it reaches the safe area line.
Hope this works !!!!

Make constraint >= 20(some constant) to Safe Area and it should work fine.

My custom cell will not budge, everything I add gets stuck to the left wall

I am working with xcode and I can't seem to get my custom cell to budge. I have the constraints set up and even reset them a couple of times but they continue to look a lot different when I run my simulator.
Here is a screenshot of my constraints:
Here is an screen shot of my simulator:
I have tried deleting the labels and imageView and then adding it again and reset the constraints a few times. Anyone else getting these problems?

You are defining too many constraints. It is key for you to always use THE LEAST number of constraints as possible.
From what I can see you are giving the labels '5' and 'Orders need to be viewed' constraints to the leading edge of the cell. If you are also setting a second leading constraint to the image (hard to tell from the image, code would be easier to debug) this contradiction would break your constraints.
What you want is to have the image leading edge to the cell and give it a height and width and a top constraint only.
Give the '5' label 'horizontal spacing' ( ctrl drag ) to both the image and the second label.
Provide a height and width for it and a top constraint.
IMPORTANT
since you have defined a horizontal spacing from the '5' to the other label, you do not need to provide another leading constraint to the last label.
simply give it a height, width, top constraint and trailing edge to cell
That should be all you need !
If this is too confusing let me know and I can share some snippets for more visualization

TableView calculates wrong height for dynamic width&height label

I've read multiple threads about this but I've found no solution yet.
I'm making a chat-like application
The app has a TableView that has dynamic height cells in it.
A cell consists of a view and a multiline label in it.
If the label has more characters than >250 it gets shortened with an ending "... see more"
Now the problem is that sometimes the label gets cut off.
I played a little with the Line Break setting of the label, and after changing it to Character Wrap the label shows its full text.
Left picture: Character Wrap - - - Right picture: Word Wrap (I need this)
As you see on the right picture, the "Bt... See More" gets cut off..
I realised that if I set the label's width or the view's width to a fixed size then the problem gets solved: So maybe the problem's root is in the bubble view's leading constraint:
Align leading to Superview
Constant: 0
Priority: 1000
Multiplier: 0.25
(This is needed so that the bubble view expands maximum to 75% of the superview)
I made a GitHub repo for this:
https://github.com/krptia/chatBubbleTest
Help please!
Anyone?

SOLUTION
I figured out that if I set the bubble view's leading constant the following:
Align leading to Superview
Constant: 0
Priority: 1000
Multiplier: 0.25
In order to set the maximum width to 75%, the label inside wraps incorrectly.
SO I deletet the leading constraint and instead of that I maximize the width via aspect-ratio!
If I use aspect-ratio 2:3
Then I achieve the same outcome, but with the label wrapping correctly!!
Yay
SOLUTION 2.0
Okay, now I have figured out that the bubble view's leading constraint's second item (SuperView.Trailing) was Relative to Margin
After unchecking it, the problem gets fixed, so I don't have to use aspect ratio! Yay
BUT PAY ATTENTION
Because using Line Break: Word Wrap also causes some problems.
Sometimes it tries to break the text into a new line (minimum 2 words) but if the cell was reused then the app might calculate wrong height for the view.
First picture: Word Wrap - - - - - - - Second picture: Clip
Maybe this issue can be fixed with layoutIfNeeded() or i don't know. Clip is fine for me
UPDATE (2019.03.27)
Umm.. I realised that the problem occurs still... I don't understand why.
Still trying to figure it out..

Stack view constraints changes top-layer's view width

I have a stack view holding 2 images.
One image's width to be lower or equal to 140 and 1:1 ratio
Stack view top constraint 20 and trailing constraint 5
When I want to set the stack view leading constraint to 5 (looking at the safe area leading) it enlarges the safe area to a width of 1920 and I have no idea why it does that.
It might have something to do with that the total width of the stack view (including the constraints) is smaller than the width of the safe area so it's ignoring the images width constraint and enlarging it to the default size (1920)? Because, when I change the stack view's distribution to fill proportionally instead of fill equally it does obey to the image's width constraint and the safe view's width stays normal.
If I am thinking correctly, how can I find a workaround for this?
Thanks in advance.
EDIT: I was trying to think logically and I found a solution by changing the image's width to GREATER or equal to instead of SMALLER or equal to. I was following a devslopes guide and in that Xcode version (Beta XCode9) it did work, it just gave a warning it wasn't obeying that constraint anymore (I think it was saying that, I just saw the width being red). So it works now, if anyone has this problem following their guide, just do what I said and it will work.

UILabel Text Not Wrapping

I am working on a Swift project with Storyboards where I want text to wrap in a label. In the old Objective-C version where I did not use a Storyboard I used the following settings and things worked perfectly.
Here are the settings for Swift
I have been reading about the potential auto layout issues with preferred width settings. I currently have them set to auto layout and the label itself is set to a width of 560. I've added a constraint to keep the label 20 pixels from the trailing superview and while I thought this would work I still cannot get the text to wrap. The dimension settings are below.
Can someone explain how to get the text to wrap?

First, the good news: You have set the label to 2 lines and Word Wrap. So it can wrap. Excellent.
Now you must make sure the label is tall enough. Either give it no height constraint, or give it a big enough height constraint that it can accommodate two lines.
Finally, you must limit its width. This is what causes the text to wrap. If you don't limit the label's width, it will just keep growing rightward, potentially continuing off the screen. The limit on the label's width stops this rightward growth and causes the text to wrap (and the label to grow downward instead).
You can limit width in several ways. You can have an actual width constraints. Or you can have a leading constraint and a trailing constraint, to something relatively immovable, such as the superview. And there is a third way: on the Size inspector (which you do also show, at the bottom right of your question), set the Preferred Width (it is shown at the top of the Size inspector): this is the width at which, all other things being equal, the label will stop growing to the right and wrap and grow down instead.

Declare your UILabel programmatically and give
yourUILabel.contentMode = .scaleToFill
yourUILabel.numberOfLines = 0
yourUILabel.leadingMargin(pixel: 10)
yourUILabel.trailingMargin(pixel: 10)
This worked for me.

Your text will wrap if you have provided lines number more than 1. However you may not be able to see it wrap if the label height is not enough to show the content. I suggest you to remove the height constraint or increase its value.

In case this helps anybody: I had followed the advice given here to fix my label not wrapping to two lines but nothing worked. What worked for me was I first deleted some of the relevant constraints in storyboard (I'm using auto layout) and saw that the label wrapped properly. I slowly added back the constraints I needed and everything still seems to work fine. So deleting and remaking your constraints may help.

What fixed this problem was changing the label type to "Placeholder" under Intrinsic Size in IB. When I changed this the text wrapped and the warnings went away.

As I see you interface builder. There are two problems. First one is with your constraints, and another one is with the property.
You gave it a fixed height which is wrong while line wrap. You need to make the auto-resizing label, i.e. remove height and add the bottom constraint or simple remove height depend on your situation. Your text is moving to the next line, but due to fixed constraint, you can't see it.
You enable the option to clip subviews which is wrong as it cuts your view and you are unable to view wrap word.

Add a new case:
DO NOT add constraints to your label with a TEXTVIEW, or the label will expand to right without limitation.

In my case i set my parent stackview alignment from center to fill and set UILabel to
label.textAlignment = NSTextAlignment.right