I am trying to get this view working with auto layout to accommodate both 3.5" screens and 4" screens. I am starting to feel like it is not possible only using auto-layout and IB.
Any insights? I have tried just about every combination of constraints I think would make sense (and many stabs in the dark) without luck.
Here is how it looks on a 3.5" screen (from IB but looks identical in the simulator)
Here is how it lays out on a 4" screen
Here are the constraints, let me know if there is a better way to show this information.
The simplest (but not best) way would be to take each item on page and add the following constraints
"pin" width
"pin" height
Leading Space to superview
Top Space to superview
Remove all the other constraints.
This should lay out every staticly with all absolute values. It should work fine.... unless you rotate, but I'm not sure if you support landscape. If you do, replace step 4 with "Horizontal Center in Container" constraint.
Side note. Pink constraints are put in by Xcode because it is missing something it needs to position properly (you can't remove these). Blue ones are one you put in. Many times pink ones will vanish as you put in blue ones because you've giving it missing data Xcode needed to position the item.
Related
I'm working on an app for iPad but when I set the contrains(so it works on iPad Pro/iPad Mini) everything moved. I don't know if I set anything wrong or if it's problems with XCode However, are there a way to just like scale up/down the screen without contrains? Or how to fix the constrains problem.
(I choose all buttons and click add missing constrains)
Picture:
IMO selecting add missing constraints is not exactly what you want. If you want your view to scale up when screen is larger, you need to set the constraints to its superview. So you just say I want it to be 10 pt from the leading edge and 15 pt from the trailing edge. By adding missing constraints Xcode probably tells the view to be xy points wide.
To set the constraints as I mentioned you need to Ctrl drag from the view to its superview and add leading constraint. Similarly for the trailing and eventually top and bottom constraints.
This is my first post. I just started coding. I want to make my first simple app. I own an iPhone 5S and when I add constrains in compact width / compact width & regular height(in XCode), it shows it right on the iPhone 6S plus simulator. When I try it on my iPhone it just looks weird. I know the sizes of the iPhones are different, but how can I correct this? Now, if I code in compact width / compact width & regular height, it feels like I am coding for an iPhone 6...
I hope someone can help me.
Here is the Storyboard:
I use compact/regular size classes for portrait, and any/compact for landscape, for those two phones you mention (actually, for all of the phones).
And, (squinting at your constraints in the tiny pic), it looks to me like the constraints are "wrong" (not optimal, at least). You've got the button pinned 550 down and 280 across from the edges, which won't look right for smaller devices.
Try aligning the button to horiz and vertical centers, and it will look right everywhere.
Or pin ONE of the edges of the button, and ONE of the top/bottom edges of the button, to the layout margins on one corner. Then it will look right on all devices.
Instead of removing the trailing and bottom constraints, as #Kevin suggests, set both of their constants to 0 (or whatever's reasonable), and make them greater than or equal, not equal.
For the constraints to appear fine for different screen sizes, one possible way is to add the required constraints to your button or label or any other component and have a preview look at it in the assistant editor section.(Click on assistant editor and in the split screen that comes up, find the Automatic section and within it the preview option)This helps to view the layout of your app for different screen sizes. This helps to manage your auto layout issues by a good extent.
I'm wondering if xCode auto layout / constraints are really as frustrating as I think, or am I just not understanding them. For example, I started with this basic label in the view controller:
Fair enough. A box with text that has equal margins on the left/right and a smaller top margin. Now when I run any size device, that gets skewed/cut off from the device view. So right away for some reason Xcode thinks that despite me putting the entire label in the view controller, it things it should display halfway off the screen. Don't get it but okay, so I went ahead and added auto layout constraits to the right, left and top margins. The result is:
So it centered it, which is nice, but now it just ignores the fact that I made the width larger and it just shrinks it down anyways? For something so simple this seems to be very...unreliable. I then added the "aspect ratio" constraint and it seemed to look fine in all of the devices...finally!
I curiously also simply tried to get rid of all those, and simply add the "aspect ratio" constraint and the "horizontal center in container" constraint. On the main storyboard preview (not the simulator) it looked like this:
Not what I'm looking for, as it's not stretched downward like I want, they shrunk it again. However...when actually running it in the simulator...it looks perfect, the way I want it to in the first picture of the view controller.
Why the preview and simulator differed, I suppose (from reading other questions) it's because there were a few warnings after I added these. One was that the horizontal and vertical positions are one initially and will be different at run time. But when I ran it, it definitely held the initial ones and not the ones they said it would be at run time. It also told me that vertical position was ambiguous...well yeah I only set a center and aspect ratio...pretty obvious and not sure how I'd even solve that error. It solves it when I delete the horizontal center...but now it's not centered which is a step back from what I wanted.
Long story short, how do I deal with this. My previews and simulations aren't accurate with each other even for the simplest auto layout specifics. Apps nowadays are so complicated and on every device they scale and work beautifully, and this seems to not agree with even just one label.
Does anybody have any good articles, advice, or anything that would help me? This auto layout stuff seems to be so picky and that's really all I know so I have to deal with it. And don't even get me started on why the text doesn't scale with the label...why would I want the text on an iphone 4 to be the same on an ipad even when my label is increasing in size with the device?
A lot to go through, but it's just very frustrating and I can't see myself doing much else before I try to understand these basics. Thank you and much appreciated.
I think you have to understand constraints first...without that you always made things frustrating....For understand the constraints you can check this links
http://www.raywenderlich.com/50317/beginning-auto-layout-tutorial-in-ios-7-part-1
http://mathewsanders.com/designing-adaptive-layouts-for-iphone-6-plus/
It takes a bit of experience to get used to it, but once you get it, you get it for good and it's very easy.
Basically the rule of thumb is don't trust exactly what you see in storyboard when it comes to the size of the actual object. Say you have a UIView centered horizontally and vertically in the main view. True it will try to keep the size of that UIView but center it in any size device, but I would never just leave it at that. I would either:
Add width and height constraints
Add a width/height constraint and an aspect ratio constraint
Add a width constraint and top and bottom constraints
Add a height constraint and leading and trailing constraints
Add top, bottom, leading, and trailing constraints
In other words, the exact size of the object should always be determined via the constraints, and not by the UIView itself. This gets away from the finicky behavior and also ensures that it's displayed on any device exactly the way you intend it to.
For some reason when I add constraints, by clicking "Add Missing Constraints," it actually looks worse than without constraints in the iPhone 4S simulator.
Here is how it looks in Xcode:
Here is how it looks in the simulator:
Notice that even with the auto constraints, the top text is hidden in the simulator. I want it to look exactly like it looks in Xcode, but I cannot figure it out. I have played around with the constraints for hours now to no avail. It looks better and better with the bigger screen size I use in the simulator, but I need it to have a universal look across all devices. What am I doing wrong?
First remove all constraint for the view.
1) Apply pin Width and Height constraint for your all three controls.
2) Apply Top space from Top Layout Guid for all three controls.
3) Apply Align Centre Horizontally in Superview of your all your three controls.
After applying above constraints your controls will appear in centre in any device.
I believe the three controls should be centre aligned with the top view and the vertical space between the three controls is constant.
The controls will automatically adjust their width according to the text given. So all you have to do is to only add the constraints for their positions. So each control will need two constraints, only for Y position, another for X position.
And of course, you can change the multiplier of the constrains to support the Landscape orientation.
I am struggling to use Xcode 5's constraints to fit content (relatively) between 3.5" and 4" screens. To simplify matters, I am only concerned about portrait at this moment
Here is an example screen of a layout on a 4" screen (the tab controller at bottom isn't shown):
I want to lock the proportions of any images (such as this truck), but allow all labels, buttons etc to squeeze more closely together on the 3.5" screen. As all iPhones are the same width, I think I need to leave the x-constraints as-is, but configure dynamic y-co-ordinates, but would appreciate advice on this.
Many thanks.
You can pin the width and height of your image in your storyboard by selecting the image and then adding the necessary constraints (your numbers will be different):
You can add constraints to automatically change the vertical layout by making the relation by "greater than or equal" or "less than or equal", but, in my experience, it is difficult that the result is exactly what you want, as the autolayout engine will not make the line separations the same.
My suggestion is that once you have the layout for one of the screen sizes, you add outlets for the vertical constraints and then adjust those constraints constant property in code on -viewDidLoad. That way the distribution of space will be exactly what you want.