I have established constraints to like buttons, timestamp button, etc. below bottom of textfield a certain distance. You can see the issue in the image; if the textfield doesn't have enough letters, they overlap, how do I fix this? Here's a link to image:
https://docs.google.com/document/d/1_btZBSsL3SQA1IulFTasMFBghF_2hJYzrFlbuQPkKrM/edit?usp=sharing
The problem is setting the constraints with respect to the bottom of textfield. That bottom moves depending on the amount of text the field has and if that bottom position is above the bottom position of the icon to the left of the text field, you'll get the overlap you see. The solution, you might think, is to set the constraints with respect to the bottom of the icon but that won't work when the text field has a lot of text. You should try that just to understand the problem more clearly.
The actual solution is to set this particular constraint programmatically, as text is entered into the text field. You want to set that constraint with respect to the bottom of the view (icon or text field) that has the lowest bottom. That way, with little text, the constraint is set relative to the bottom of the icon but when there's enough text for the text field to vertically extend below the icon, the constraint is set relative to the text field instead.
Where would you set this constraint programmatically? Probably in the textField:shouldChangeCharactersInRange:replacementString: delegate method of UITextField.
Alternatively - and perhaps a better solution - you could have a view containing the icon and the text field and set the constraint in question with respect to the bottom of the container view. That way you can set the constraint in IB rather than have to do it programmatically.
To clarify my answer, after the discussion in the comments below, here's a picture of what I mean by having container views and setting constraints between them to avoid the observed overlap.
Set appropriate constraints within each of the container views then set constraints between the container views and between them and the cell content view (I'm assuming, from your picture, that you have all of this in a table view so you have some template table view cell).
Related
I've come up against a problem I cannot sort out. I have a nib file where I added a table view and a UISearchbar with a scope bar. Everything was working perfectly until I added constraints to all the views (tableview, searchbar, a few labels and buttons). Since that moment, I cannot see the scope bar anymore. It seems to be hidden behind the searchbar because I can see a kind of blue surrounding the search area where text is entered (see below):
Does anyone have already been facing this problem?
EDIT:
This is the image with the constraints mentioned as a possible issue:
There might be either of below two constraint causing the issue.
Height constraint to the searchBar - you can resolve this by deleting the height constraint
OR
If your tableview has top constraint to the superview you will need to either delete it or you will not increase it till you see the scope bar.
I have a simple view with a few labels, textfields and a big NSTextField that spans across the remaining interface.
I can setup auto layout so that the text field spans over the width of the window, but as soon as I add the last contraint Bottom space to container to its super view the window can no longer be resized.
These are my constraints:
So currently I have to omit this constraint and I end up with the following result:
See Screenshot
You need to fiddle with priorities on the constraints. Especially consider doing this on the height constraint.
Without using code, I'm basically trying to achieve the "Desired outcome" in this picture:
I want the constraint on the "Hello!" label to shrink its length when the screen height is shorter.
As you can see in "Actual result", the Button in the bottom is off the screen. I want the image view to have fixed width and height.
I know I can create IBOutlets for constraints and doing it by code like this kind of posts suggest (autolayout - make height of view relative to half superview height), but I'm trying to avoid using code as much as possible.
Side question: If there's no way to do this in IB, what are the best ways to do this in code?
Thanks for the help!
Yes. The easiest way to have this kind of "split height" constraint is to put a "header" view between your image view and the top of the screen, and embed your "Hello" label inside this new header view. Then add a constraint to keep the "Hello" label vertically centered inside the header view.
To keep the header view the right size, add constraints to keep the top of the header view pinned to the top of the screen, and the bottom of the header view to the top of the image view.
Then you'll just add constraints to keep the button and image view pinned to the bottom of the screen. (Or, see comment from Sulthan, below.)
In Xcode 5.1 (in beta), there is UI to make more general constraints, including the ones you want, but you have to do it like this or in code in earlier versions.
I am updating an application for iOS 7 and have decided to use Auto Layout.
When I try to add constraints to any of the elements in the below screenshot :
i.e. View Controller, Table View, View, Table View Section, Table View Cell, Content View, Label.
I am unable do to so, as no item in the Add New Constraints panel ( as seen below ) is interactive.
(Apart from the Update Frames Item)
In my attempts to resolve this issue I have researched that
"When using Auto Layout you may no longer set the frame of a view directly. This line either has no effect, or it may directly interfere with what Auto Layout is doing."
also
"When setting the contentSize of a scrollview with Auto Layout, the content size is automatically derived from the constraints that you set on its child views."
The problem is still there when I update the ViewContoller code to accommodate this advice.
I had a similar issue. I was able to add constraints for items on a Table View Cell - Content View (e.g. UILabel, UIImageView), once I switched the Table View Cell Style to Custom.
If I added images or UILabels on top of a default Table View Cell type (e.g. Subtitle), I could position them on the Content View, but couldn't set constraints on them.
Changing to Custom Table View Cell Style was the solution for me.
To set the constraints you need to select the items and then set the constraints with either the constraints menu or with ctrl+drag.
However, there is no way to set constraints for a tableViewController as it is a already completely set up.
There might be set Autoresizing Mask as layout in Size inspector.
Try switching it to Constraints:
I'm having trouble with autolayout and labels that get their text set in the source code based on some external conditions. These layouts (portrait and landscape) look like this on the simulator:
http://imgur.com/l6Iirun
http://imgur.com/n7RwwSD
The second one is obviously not what I want it to be, the label with the URN should fill the whole screen.
I have a width constraint for the dynamic label added by Xcode which I can't get rid of even though the "Name"-label has a fixed width and all horizontal spaces are fixed as well which should logically rid me of the need to have a width constraint for the label containing the dynamic text.
Any help on how to achieve what I want? Thanks in advance!
It looks to me like your labels are not binding their trailing edge to the superview. In the lower right there is the little 'I beam' icon, click on your label and then that icon, the top of the menu should be 'Pin' and pick trailing edge to superview. The label should expand to fit the width of the screen, minus some padding. Once that is in place you should be able to remove the width constraint - although you may need to find it in the size inspector and select promote to user constraint before you can remove it.
If you don't see the pin menu, try going up to the top and picking Editor -> Pin and you should see it there.
If it is already pinned, try increasing the content compression resistance priority and decreasing the priority of the width - although if pinning it does not fix it then there is another constraint at play.