I designed something on table view cell and then i clicked "Add missing constraints"
it looks like this
But when i run it on iphone 5s simulator, it looks like this
It doesn't fit the layout and overflows
How can i make it looks fit on all iphone 4-5-6 ?
Xcode does not know how to set up constraints that will cause a UI to "look good". Looking good is a subjective human judgment and computers can't do that.
"Add Missing Constraints" will just make some rough guesses, as best as the Xcode engineers were able to generate algorithmically. They are guaranteed to be sufficient to resolve ambiguities in the current set of constraints, but not guaranteed to do anything especially smart for keeping a UI looking good.
Auto layout requires you, the developer, to do thoughtful, careful consideration of how the UI should look under various circumstances. You then have to set up the constraints to achieve that. You can't just go on autopilot. You have to do the work.
If, after setting up the constraints, you still get results which are wrong, you need to show the specific constraints you set up, how you expected the UI to be laid out in various circumstances, what behavior you actually got, and how that differs from what you wanted/expected.
For example, you say about the screenshots, "it doesn't fit" and "[it] overflows". Well, which elements of your UI would you want to have moved and/or resized, and how, to get it to fit and not overflow? Do you want the image to be made smaller? Do you want the "Feedback" and "Download" buttons and the stars to get closer together? Would you want any of those to be truncated or clipped if the overall width is just too narrow to fit all of them? Etc.
Related
I feel like there should be an easy solution to this, I don't want to do anything incredibly complex with resizing, but have been struggling to even understand the basics of auto layout. My app can't rotate, so that isn't an issue. I just want my app to scale to whatever size the screen is. I built it on the iPhone 7 screen, but if I go to a 7 plus it should just be a bit bigger. As far as I'm aware they're the same screen ratios, so I feel like it shouldn't be that difficult of a task.
Any help is greatly appreciated!
Use Constraints
Top, Left, Bottom and Right should be 0 between your subview and parent view.
Don't set the width/height of the element unless it's not supposed to change.
" I built it on the iPhone 7 screen, but if I go to a 7 plus it should just be a bit bigger."
What if you use a smaller screen? Are you making this app for iphone 7 only? Then your app will get rejected.
You can't make everything automatically "grow bigger" in proportion to what screen it uses.
You need to configure constraints for each view and subview to make things grow "bigger" or "smaller" proportionally.
If you have labels question is how much bigger, what font size. etc.
If you have images, question is how much bigger, what contentmode , scaling? aspect fit? fillmode? etc.
If you have tableviews/collectionviews then you need to configure the layout for each cell by subclassing it with autolayout, and also configuring the delegate methods to return a cell size in proportion to what screensize etc.
So , my tip is basically, play around with autolayout and, test, fail, test, fail, read, read, read, test , fail, until you get a hold of everything.
Check youtube, many good clips and tutorials there. Most importantly Have patiance!!
EDIT:
If you have a "simple" app, then update your question with a screenshot where you have painted something to show what you want to achieve, or an example. And maybe we can help you achieve it. But your question is too broad to answer at this moment.
In Xcode, when using the autoresizing option for any type of object, things seem to stay where they're supposed to be while maintaining a proportional size to the scene. I generally just select the inside arrows in the autoresizing box and everything maintains adequate sizes and proportions. However, I've seen multiple times on tutorials, blogs and videos that using constraints is "the right way". Why would the use of constraints be better than autoresizing when autoresizing seems to work perfectly? Would any problem surge when using autoresizing if I work only on iPhone in portrait mode?
Well there are a two reasons I think. The first is probably the most accurate, but might leave you feeling weird after. Because Apple is pushing it. Usually when apple is backing a new tool in their api, its wise to follow because they will drop support for old things you get used to like Autoresizing. Kinda sucks I know.
The second (better) reason that Autolayout will let you write view components that you can reuse between many different screen sizes. Yea Autoresizing helps, but Autolayout gives you more control when the screen size makes a large change like from iPhone to iPad. I've written views that live in all my iphone/ipad/apple tv apps.
An important reason is to allow views showing text, such as labels or buttons with titles, to adapt to the text content and font.
The text content should change due to internationalization/localization.
The font can change if Apple changes the system font or if the user asks for larger text to make reading easier.
With proper application of auto layout, your layout can adapt to such changes and still look good. Without auto layout, you would need to manually alter the layout to accommodate such changes.
I have looked at umpteen tutorials, google posts and questions on SO but am still struggling with best way to layout a page for an iPhone app.
Part of the problem is many of the tutorials and questions are old and discuss ways that may have been optimal at some time in past.
Now, in May 2015, what is best-simplest way to have things like textfields and images layout so they display properly in common iPhones i.e. iPhone 4, 5, 6 and 6Plus?
Is it necessary to use constraints? I've gone down this road but found it very labor intensive?
Can you use blue lines as recommend in Stanford 193P tutorial? Or is there any rule of thumb way to layout a picture or a text box so that it looks good in multiple formats i.e. some number of points or using blue lines.
Storyboard in Xcode 6.0 is now 600x600 from what I can tell so a lot of times what you lay out looks horrible in the simulator. But the simulator is not an actual iPhone.
Thanks for any suggestions on right way to do this.
My answer is AutoLayout,in other words Create constraints
You can change storyboard to device as you like by click here.
You can use blue line as reference then let XCode auto create. But in this way,you are not always get right layout
Also,you can create layout by here
And you can create layout by Control + drag
By create layout,it is easy to place you views
You essentially have two choices; constraints or frame math. Both have their benefits and detriments.
The benefit of layout constraints is that you can figure out universal relationships between subviews and their superview. (e.g. It's always 20 points from leading and trailing edges or it's always dead center x and y) Once you do that, you only need to write layout code once and it will work across all device screen sizes. Also, if you ever plan to support iPad or rotation on iPhone, the work it will take to support that functionality is minimal. Another huge benefit is that if a view's frame changes, it will take care of resizing and laying out all of its subviews for you so you can modify the size of a container for example and not have to reset all of it's children's frames manually.
Constraints are "more modern" than frame math and definitely Apple's preferred method.
The issue with constraints is that the code is more verbose. Views also depend on their superviews to lay themselves out. If everything is done correctly it works great. But if you make a mistake adding constraints to one view it has the potential to trash everything else that depends on it. Once you get everything figured out it does exactly what it advertises. But getting to that point can be, in my opinion, more complicated than setting frames explicitly since there are more moving parts.
Frame math still has it's place sometimes. It has the benefit of being fast and relatively concise. Back when iPhones all had the same sized displays it worked great and if you are laying out in a view with a guaranteed rect there's no reason to need to avoid setting frames.
The problem with frames is that you are expected to support all the devices that run iOS 8. If you are laying out with frames that means you could have to write 5 different sets of layout code to support 4s, 5, 6, 6+, and iPad and 5 more sets if you want them all to rotate. This isn't always tenable.
In the end it comes down whether or not your containing view has a guaranteed height and width. If the answer is yes (like laying out inside of a collection view cell with a static width and height for example), I would have no problem leaning towards frames. If not, auto layout is the way to go.
I've been having such a hard time trying to figure out how this thing works. It's so random and I have no idea what else to try. I've looked up multiple articles on this issue and everyone just says change the scale. Changed the scale does not help, it's got nothing to do with what's happening here. I'm not sure if this is related to the bottom of Xcode where you can change the dimensions (Any vs Any / Any vs Regular Height, etc...) I've asked my mobile development teacher at school as well and he couldn't figure it out either. Any help would be greatly appreciated!!
Picture below:
http://tinypic.com/r/281fw5w/8
Your problem is not scaling. What you need to look at is auto layout and constraints.
You can use the icons in the lower right edge of the interface builder to get at them or control drag from a view controller (like a button, label, etc.) to the containing view (or any other view controller for that matter.) Usually, the main view window itself. When you release you can now add constraints to "attach" the element to that other element relatively. For instance, you could attach the things on the left to the left side and the things on the right to the right side. Now, regardless of the dimension of the actual device screen, those elements will appear in those locations relative to the device screen.
The problem is that the position of elements from your perspective is right for the canvas you see in the Interface builder, but once the app is run, the real canvas has different dimensions.
To manage the position, size and other attributes of UI elements, there is a system called AutoLayout.
It is quite ingenious because it is similar to natural language.
For example "I want this element to be in the middle of the screen."
or
"I want this element to be 20 pixels from the left corner and 57 pixels from the element that is above this element."
By combining these rules you basically create a set of layout constraints, that are applied in runtime to the view hierarchy and view are laid out properly.
Autolayout allows for very sophisticated layouts.
Another aspect you need to take into account that you might want your app to look well in all form factors from 3.5 inch iPhone up to iPad air.
Since these devices differ considerably in size, Apple introduced an abstraction called Size Class.
Size Class is an abstraction on top of concrete size. Concrete iOS devices have vey concrete dimensions. But in natural language you often say it's big ,or small ,or normal. And this the level of abstraction size classes use.
For each size class you can have a particular set of auto layout constraints.
So by combining AutoLayout and SizeClasses, Apple solved the problem oh how to have one application but one that can still accommodate specific form factors and can adjust its layout to them.
In Xcode6, all storyboards/xib files have autolayout & sizeclasses enabled by default. Interface builder provides you with a comfortable environment where you can set up your layout by creating constraints for each size class combination.
I have three different alternatives to design a view, at least three that I could think of / understand from different blog posts and SO questions. The layout is pretty simple, some labels and textfields to provide a login. The thing is that it should adapt to any device screen (iPhones portrait for now to limit scope).
Each one of the three alternatives seem to have pros and cons, but I want to understand which one (if any) is the proper way in which we are supposed to design with adaptative layout, size classes and universal storyboards in mind.
Please, don't hesitate to point me wrong!
1.- Design on Any W | Any H size class, and once I'm happy with the default design move on to specific situations:
The issue here is that there isn't a size class that allows me to specify a constraint only for 3.5inch devices (all cases I tried affect none or several). Therefore, I don't know how to properly define a specific constraint that overrides the default one in this unique case.
2.- Same as before, design on Any W | Any H but using smaller gaps between elements.
It looks as good as it gets in smaller devices, but a whole lot of space is lost in bigger ones as the constraints don't adapt. Maybe constraints should be overridden in this case, which would be the inverse case as the previous point.
3.- Use a subview hierarchy to distribute the elements.
Embedding elements in subviews inside other subviews I managed to have a dynamic layout that adapts to the height of the screen, but it doesn't look right at all in bigger screens. The subviews are expected to take up the same height, but I'm not sure this is quite correct.
i think it really depends what you want, its hard for us to tell you what your app should be like, although i would think the last case is what you would most likely want (in general, for a login page like this i would choose number 2), i think it can be achieved without using subviews though, try setting each textfield to having a vertical center, and set the multiplier to a value that puts it in the right place, then it should stick proportionally where its supposed to be