I need clarification on how the container view in Swift 4 is supposed to work. I was under the impression (maybe falsely so), that if I set up all my labels, buttons, etc. inside of a container, set that container to zero for the left and upper constraints, centered it vertically and horizontally in the main view, and then pinned all of the fields within that container, then everything would be proportionally increased or decreased, depending on the screen size.
I designed my screens on a storyboard, using an iPhone 6 sized screen.
The App should be viewed only in Portrait mode, so I needn't worry about dealing with Landscape modes. I am finding out that the text fields within the container are keeping their sized fonts; when going to a larger screen (8 Plus), I am getting a large border on the bottom and right.
When going to a smaller screen (SE), most of the verbiage gets truncated. Have I misunderstood how this is supposed to work, or am I not doing it correctly?
I am almost ready to submit my first App to the Apple Store, but want to make sure that it will handle all possible sized screens. The 2 IOS courses I've been referring to are pretty vague on exactly how auto layout works. Also, I am getting over 24 warning messages that all of my fixed width constraints may cause clipping. (15 yard penalty?).
Hopefully, someone out there will have the patience to explain what I thought should be an easy thing to do. Here are screenshots of my initial view controller using each of the 3 sizes:
Originally Designed Screen, set to iPhone 6
Screen set to iPhone 8 Plus
Screen set to iPhone SE
Many thanks in advance for helping us out,
Jones
Stack views are meant to do exactly what you are trying to do. Here is a version of your app that uses stack views to create the example below. There is also a link to the GitHub page with the code - feel free to use it, tear it apart, whatever. Good luck!
https://github.com/squarehippo/Baseball2.git
Related
Since Apple is requiring a storyboard launch screen in a few months I went ahead and tried to add one. Adding one is simple and it works just fine but it screws up the layout after loading the app. No longer does a larger screen automatically adjust the resolution, instead I'm left with an SE layout on an 8 Plus screen placed in the top-left corner with the background image repeating (like wallpaper from a 90s website). I'm not using constraints, but I'm not even sure if that's the issue. If so I have a feeling I have a lot of work ahead of me (keep in mind I've never had a need for constraints). A side thought though is, from what I understand, Apple wants all apps to look correctly on all devices... makes perfect sense. But my apps have always appeared correctly no matter the device. So it's ironic that adding the launch screen is breaking my apps' appearances. Is it the constraints? Is there an alternative solution? Or is there hopefully something simple in the launch screen that needs to be changed? Thank you!
Below is the output of my application when displayed on an iPhone X, it works perfect with all other iPhone, since they are not full screen with rounded edges.
as you can see the top portion where the time and battery icons are located is not fully filled in?
I am not sure how I can fix this. Should it be in the code or can I do it in the storyboard, I have tried in the storyboard but I have not been successful yet. Does anyone have any idea and/or tips of what I need to adjust in the storyboard to get it fo fill the full screen.
Please note this has the stretchy header, like twitter profile effect, which I still wish to retain.
EDIT
This question may have the answer you are looking for if you wish to extend your view underneath the status bar on an iPhone X.
Original answer
Is the constraint to the top of your view a hard coded value? You should be using the safe areas to attach auto layout constraints so that your app will layout correctly on the iPhone X.
More information on laying out your ViewControllers for the iPhone X can be found here
Now, before all you angry people say "hOLY DUCK THIS IS A DUPLICATE", just wait. I've seen at least 10 articles on this, NONE of which have been a help. My issue is im trying to make my iPhone app (xcode 8, swift 3.1, iOS 9 deployment)
match all screen sizes and set the app size to the NATIVE screen size on the device. I've seen the launchscreen articles, and they have been no help because they aren't specific. If somebody could either provide a tutorial or link one so I can figure this out, that would be great. Thanks all
You want to set the constraints for your views.
Here's a tutorial specifically for XCode 8:
https://www.appcoda.com/auto-layout-guide/
Here's another for Adaptive Layouts:
https://www.raywenderlich.com/113768/adaptive-layout-tutorial-in-ios-9-getting-started
At their most basic, constraints lock parts of the view to known areas (top, bottom, left, right) on the screen. Compounding constraints can be helpful for specific problems, but they get complicated quickly. If you're having problems getting them to work properly, I have found it works best to remove all of the constraints and start again with something simple and increase complexity as needed.
I am working on an app and have come into some graphical problems when designing my app.
First off, my app is only support by iPhone. My current storyboard is using the iPhone 5 as the screen size, so everything screws up when I try to run in iPhone 4 and 4S. Is there a way to make multiple storyboards for each different screen size? Or do you all have another solution?
Thanks!
- Brad
There is a way to make different storyboards for separate screen sizes, but another way to do it is like this:
Whenever you add objects to your views, be sure to have them aligned to something (using constraints). If all items are relative to other items, then most likely the layout will be fine on all devices. Also, if you find that your controls start overlapping, then perhaps you ran out of room. In that case simply add a scroll view to your layout, and then put the controls on top of it. Then, it won't scroll on the larger screens because all controls are shown, but on smaller devices it will allow you to scroll down to see the rest of the objects.
Good luck.
There is a small button in the lower right hand corner that lets you toggle between 3.5" and 4" screen sizes so you can see how it will look on different devices. By using Auto Layout introduced in iOS 6 you can make sure to set up your constraints so that your UI looks good on both older and newer iPhones.
Is there any way to limit the amount of curling of that kind of presentation? I know that system automatically curls depending on content inside view of the viewcontroller that we present modally in taht way.
But thta's not working for me in my iPad app. I have only a little table at the bottom right corner of the view but the page curls more than a half.
I double checked all properties and autoresizing masks without find a solution.
Any suggestion?
I am having the same problem. Same source code for iPhone and iPad, but the iPad version is curling the page too much, leaving a lot of free space. Then I tried to only put a label on the bottom of the iPhone version and the same thing happens.
Explanation: Apparently UIModalTransitionStylePartialCurl always curls half the page, at minimum. The only reason in iPhone does not leave free space but it does in iPad is because, as the screen is much smaller, in iPhone usually your controls take not a lot less than half the page, which does not happen in iPad.
The only workaround I have found is re-designing the iPad layout so that your UI controls take more space, or just "living with it".