I am brand new to iOS development (I have done some Android and Windows 8/ 10 development), and I am having the hardest time understanding constraints. I have read several online tutorials and am still confused. Currently, I dragged a label into the Storyboard designer and once I positioned it, went to Editor->Pin->Leading Space to Superview and Editor->Pin->Top Space to Superview.
I think that that should work, but it doesn't. Event with the constraints the iPhone 6 simulator displays improperly.
I can't seem to figure this out. Why do my constraints not work?
I am using wAny hAny and even added all pin constraints (top, bottom, leading, trailing).
My best guess is that your Label is too far to the right to be displayed. (You could check its frame in your view controller's -viewDidLayoutSubviews method.)
But in order to make sure that you're writing code that centers the label for all iPhone resolutions, though, you want to use Align > Horizontal Center in Container.
you must have given the constraint value too far. I tried your way , and yes it didnt showed for me too. I better understanding , I am attaching the screenshots too..
as you can see , the value I gave is more than 270 , and this constrtaint is fixed. This is too far from the screen.
Now lets try to give low value to the constraint:
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.
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.
I have been struggling for days with this implementation, and even though I have tried to do every tutorial I found on the web, I still cannot make things work the way I want.
Basically, I am trying to put my login form in a scrollview, so that it takes the whole screen at first (and on all iPhones / iPads), and if the keyboard appears everything should move. The problem IS, my view doesn't take the whole screen... Either it is too large, or too high, even though in Interface Builder everything seams correct (from layout to constraints). Below and image of the layout I want to achieve (I am using an universal storyboard, with Size Classes and Autolayout enabled):
http://img4.hostingpics.net/pics/829115app.png
Can someone point me out on achieving this layout ?
Thanks in advance.
I would suggest pinning top, leading and trailing spaces of your scroll view to its superview. And set a bottom space constraint less or equal to the keyboard's height if you set it to 0, the scroll view won't be able to resize.
With your form layout set vertical center constraints and top space to superview constraints for your top label being more or equal than the distance you set in the IB, and then you can set relative space constraints between each of the components.
Hope I answered your question.
Edit: Just the provided project and got it working. I think the problem is caused by it being a containerView inside a scrollView. And both the container and the scrollViews content view adapt to the size of its subviews. Because of that, setting relative constraints won't help.
What I did was to set an explicit size (screen's size) to the containerView and setting setTranslatesAutoresizingMaskIntoConstraints(true) to it.
I modified your project and uploaded it here
I'm using iOS 8. My nib has autolayout and size classes enabled. I've made two layouts in IB, one for Any Width/Any Height, and one for Any Width/Compact Height. I've tested different orientations and device sizes in IB and I don't have constraint problems in IB.
Now when I run the app on my phone. The view lays out correctly in portrait. Then I rotate my phone into landscape and I get a "Unable to simultaneously satisfy constraints." error. When I look at the list of conflicting constraints, I see a constraint that should have been uninstalled for landscape layouts. When rotation completes the landscape layout appears correctly.
It's as if iOS is trying to lay out the view with the new bounds before the old constraints are uninstalled. Is this a known problem with iOS? Is there a step I need to implement to correctly support size classes?
I ran into this same issue. Very frustrating! At first I added code to willTransitionToTraitCollection:withTransitionCoordinator: in order to detect if the newCollection was a size class that didn't need the constraint. If so, then I set the constraint.active = NO.
It did the trick, but I hated the code. I was just like, "Why should I have to do this? The constraint is not installed for the new size class!"
Then I figured out that if I lowered the priority of the offending constraint to 999 in interface builder I no longer got the constraint error in the console when I rotated. :-) And all is right with the world again.
I still think this is an iOS bug, but I don't have time to make a sample project to reproduce it. I think what is unusual about this layout is that I have an image view that moves to an entirely different location when the phone is rotated into landscape.
The width constraint on the image view had different constants for either size class, but this was throwing an exception.
The next thing tried was to use different width constraints. One was installed for compact height, the other was installed for everything else. This was still throwing an exception, even though the breaking constraint should not have been installed.
Finally, the solution I got working was to have two image views, one for regular layouts, and one for compact height. Only one image view was installed at a time. This works without exceptions and looks exactly the same.
I'm currently trying to grapple with constraints (using Xcode 6 GM seed). Using reset to suggested constraints, everything looks right in the universal storyboard and in the preview:
As you can see, I'm previewing for multiple screen sizes. All of them have the image of the dot (and the image itself takes up the whole view, set to draw in the center) in the center. However, when I load it on the simulator, I see:
I'm not sure why this is happening. As far as I can tell, the constraints are all as they should be:
Is there something I am doing? Or is there a bug here in xcode 6?
Thanks in advance!
You don't need to add Leading, trailing, and vertical space constraints. To place your dot in center you need to add Horizontal and Vertical center in container constraint. Place your dot in the center of controller and add these two like in the given image.
The storyboard "Preview" doesn't match the simulator if you have any constraint errors/conflicts. I was having this problem, and found this question while searching for an answer.
One I got all of the conflicts resolved, the Preview worked. It still seems like the preview should consistently show what the simulator would show to help during the setup.