I'm working on my first swift app and I found out quickly that I need to use constraints to properly layout my page. So far I'm running into two issue.
The first one is that after adding some constraints, my view is pushed off the screen on the storyboard, but it looks fine(outside of my second issue) in the Assistant editor.
My second issue is that on some phone sizes the constraints are causing the text fields to expand when viewed in the Assistant editor and on an iPhone 6s test device.
I've added some screen shots below. Any help with this issue would be really appreciated.
Each time you add a constraint in storyboard, it is not automatically applied to your working view. You may think it should be applied immediately, but try to think think like this. If you have a view, and you apply height constraint (for example) and if Xcode applied it automatically you would get a view of width 0, since you haven't applied width constraint. That's why you need to tell Xcode to update constraints explicitly.
So when you want to update constraints, select view you want to update and go to Resolve Auto Layout issues, and click on Update Frames. This is located in the bottom right corner of your storyboard. It looks like a small triangle between two lines. Here you can update all views or just selected views.
For the second issue, you need to apply fixed width constraint to your stack view, instead of adding leading and trailing constraints. By doing that stack view will have the same width on each device.
Related
I have an issue that makes no sense to me. I have the following setup:
| UITableView |
|| UITableView header ||
||| UIView |||
So inside my UITableView header I have a container view that has leading, trailing and top constraints to its superview. Everything is set up correctly for my test device size (which is iPhone 8). If I change the test device to iPhone 8 Plus I get a strange offset for my trailing constraint - 39pt to the right edge, which is exactly the difference between iPhone 8 plus width in points and iPhone 8.
When I switch between devices in Xcode and see that the trailing constraint is not correct I just make an adjustment myself (change trailing to 1 and then back to 0) and the problem goes away for the particular device.
Initially I thought it is bug in Xcode but when I tested on a device the problem is still there.
I tried setting up a new view controller and adding the same elements but with no effect.
I am attaching screenshots to make my issue clearer.
Before: Adjusting the desired constraints
After: Switching to a device with different size
Adding this as an answer because it's too much for a comment - even though it's really just a confirmation, not a solution.
OK - looked at your project.
I'd say it's an IB / Storyboard bug, which I've seen in other circumstances. If you change the View As... device, the frame does not update immediately.
However, if you change anything that would cause a layout update - such as temporarily changing the background color of a view or font size of a label - everything should snap into place.
You'll also notice that if you select an element and move it slightly, the Update Frames button / menu item becomes enabled... and that will also correctly update the frames.
Note: When I ran the app, regardless of how the layout looked in Storyboard, the constraints correctly sized the views at run-time.
At first I accepted DonMag's answer (thanks for your time) as this really seemed to be an Xcode Interface Builder bug. As I investigated further when having the scenario I mentioned auto layout constraints are not updating the layout when I need it hence not giving me the right view.bounds.
I tried getting it in viewDidLayoutSubviews() without success as well - it was still giving me a size that suits another device.
What did the trick was calling view.layoutIfNeeded() before working with view's bounds. What it does is to update the view's layout immediately. As a result you can access the desired view's bounds.
I have read through several tutorials and stack overflow posts about this but I can't get it to work.
Here is what I'm doing:
Create fresh Xcode project
Add Button to center of default view in IB
Make sure size is set to Any, Any
click align button in lower right corner to Add New Alignment Constraint
Check box for Horizontally in Center: 0
This works as expected. However, if I copy and paste a button from an existing project, and go through the same steps, I encounter problems.
For example, if I resize to a compact width, the new, copied button is not centered, and instead has a +100.5 next to its constraint.
I have compared the settings of the two buttons and they are the same.
What is the issue here?
I have a number of views from an old project (xcode 5) that I would not like to create, but all elements have this issue.
Just for future reference to this issue, the issue was related to not adding constraints on the second screen. One easy way to do that is by asking Xcode to add suggested constraints for you.
When you drag your button in the middle of screen, you can see that Xcode gives you some hints and shows you horizontal and/or vertical lines when you move the view in the middle of the screen. You can make sure that the view is in the middle of the screen if you can see both horizontal and vertical lines:
And then you can ask Xcode to add missing constraints for you by tapping the first item in the lower right, and choose Add Missing Constraints
For more information on Auto Layout and how to use it, I would suggest checking out Auto Layout sessions in Apple WWDC sessions.
I'm trying to figure out how to use autolayout, and there seems to be a lack of info about it on the internet. I placed a view within my view controller with three buttons inside it. Before I place any constraints, the buttons show up on the preview. However, as soon as I make ANY constraints, the whole sub view completely stops showing up in the preview. I made a constraint to center vertically, and then one to place it 25 pixels from the left edge. It should know exactly where to place it, but still nothing shows up.
Any ideas on why constraints cause my buttons to not show up?
With Autolayouts the constraints should be as clear as possible. You can try by adding size constraints as well as fix(right, top or bottom) constraints if necessary.
When you don't use auto-layout it positions everything manually. When you enable auto-layout it switches this behaviour off so you have an unconstrained object, which is why it dissappeared.
Turns out I didn't have constraints on the size of the sub view, so it didn't know how to center it. I didn't think I needed that because I thought it would default to what it's already at.
When I select "Vertical Spacing" in interface builder, I expect the bottom of the upper view and the top of the lower view to have a relationship. However, frequently what seems to happen is that the bottom of the lower view gets linked to the bottom of the upper view. Then at runtime the bottom view will have the wrong frame (after resizes, animations, etc.). Is there a way I can ensure that views are consistently linked bottom to top?
[EDIT]
Here's another example. I set a height of 419px. I select "Top space to top layout guide". But instead it puts a constraint for how far the bottom of the imageview should be from the top of the superview. Then I change the height from 419px to 374px, and the view has correct height, but a gap at the top.
I've noticed this many times (usually when attaching the top of something to the topLayoutGuide), and I've put it down to a bug in Interface Builder. It seems like the issue has gone away in the betas of Xcode 5.1
The only workaround I've found is to initially move your view away from the view you're attaching it to, and then create the constraint. In this situation, Xcode will usually do the right thing. Then manually edit the constraint's constant back to 0 (or whatever you want it to be).
Instead of adding vertical spacing, try by adding "Top spacing to nearest neighbor" constraint. Please refer attached image,
Hope this will help.
This issue is fixed in the latest versions of Xcode. You can now select which part of the constraint you want to attach to. It may attach wrong initially, but the constraint editing controls are much better now.
I have 3 image views that I have placed in the nib. They need to start at a different y value based on portrait or landscape. Additionally, they will move to the bottom of the screen based on a button click. At that point, I remove the top constraint and add a bottom constraint.
Due to the complexity of this, I decided to handle those particular constraints in the code. However, I still get a warning that the y position for those image views is ambiguous.
Is there any way for me to tell Xcode not to worry, that I have set the constraints in code? The only solution I can think of is to create a constraint in the nib and delete it on view did load but that seems hacky.
You can add constraints that are removed at build time. This tells interface builder that you're going to handle it in code. Working on capturing a screen shot.