I want to ask if it is better to have autolayout turned off when I want my application's views to adjust themselves properly to match the device's screen orientation when the user rotates the iOS device from portrait to landscape and vice-versa.
It's because when I have autolayout off, I can adjust my view's autosizing and masks manually via the size inspector. The views seem to adjust fine to match the screen orientation.
I have already tried this with autolayout on and when I rotate the device, the views don't put themselves in place properly for some reason. This only happens for some apps though(I guess it depends on the original placement of the views in portrait mode)
Am I just missing something like a feature or setting for the autolayout that fixes this automatically? Or is it better to go with autolayout turned off?
Thanks
My recommendation is to use auto layout. It sounds from your question like you have not done much work with autolayout or the constraints that are generated for you. Yes, the generated constraints depend on the original placement of the view in portrait mode, but you will need to review and possibly change the constraints to make them work as you expect in landscape.
One of the key ideas driving auto layout is to specify how your views relate to each other so that iOS knows how to draw them in various circumstances, eg, rotating.
You mentioned that the views don't put themselves in place properly when rotated. It sounds to me like the generated constraints are not setting the spacing from a leading or to edge to the super view for something important.
WWDC videos cover autolayout concepts but beware that how and when you specify constraints has changed in XCode 5, so be sure to review the XCode videos from WWDC '13 for those changes.
Related
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've had several attempts to try and convert my iPad app to make it universal.
I'm only supporting landscape on iPhone / iPad.
My existing iPad setup uses a storyboard without autolayout, which works fine.
My app had lots of images and about 10 screen each with a minimum of 6 views on each, however some have 20 or 30.
I decided a couple of weeks ago that it would a far greater nightmare with all the images, so I've created paint code classes for all my images.
When I first turned on sizing classes / autolayout, Xcode asked if it should enable suggested layouts, this seemed to make sense. However it's made a real mess of the any / any layout.
Without adjusting the sizing classes setting any / any, I tried to install constraints for differing sizing classes. I want to make views bigger to fill the space, so I installed constraints with equal width (with aspect ratio) to subview with a multiplier so I would get proportional sized views. However this means I have about three sets of constraints per view. Which is a nightmare on my simple screen.
I then thought it might be better in my case to leave my iPad storyboard and have an iPhone storyboard. But my iPhone 6+ layout won't look very good. Turning on sizing classes made little sense with multiple storyboards.
I'm now thinking I could click the sizing class to regular / regular and compact / compact and have different views for each?
However any / any, which I can't get any sort of layout to look good, will still need views?
I'm also wondering if should let Xcode setup autolayout when I first enable it? As I say any / any looks bad.
I was thinking I could just plop my views in a vague position with any / any, apply suggested constraints, then click / flip to compact / compact and regular / regular and move things around.
I guess I'd also need to do that for compact / regular for 6+ too.
I'm just not sure what steps to take, I can't even think of workable plan b.
I've watched a million videos and feel I understand but I can't put it into practice.
HELP
My Suggest steps would be:
When we use autolayout and size classes, We always take start from wAny hAny
Take your simple Screen First Let say your login screen on ipad LandScape without autolayout will look like this:
Now you enable autolayout and size classes. Change Scene size to inferred (600, 600).
Now your view look terrible:
First Adjust it by just moving the views to center and correct places like this.
Now we are all set for applying autolayout constraints.
First give constraints to parentview(grey view). Unless parent view has correct constraints, childs view cannot be given correct constraints. So always make sure parent view have correct constraints.
Now we select the grey view and apply constriants like this:
Center vertically and horizontally in container.
Add width and Height Constraints. You got options. Give fixed width and height and modify it for different classes. like this:
Or you can add proportional constraints for width or height.(Better)
Now start with childs. Give them leading, trailing, top and height.
Height of label is 50 for wR hAny and 40 for wR hCompact
Final Results:
IPAD LANDSCAPE:
IPHONE LANDSCAPE:
Autolayout and size class are great and easy when someone get used to it.
HOPE IT HELP.
You have 2 options
1) Create separate layout for iPhone and iPad. In this options you might have to compromise targeted customization for iPhone6+. This option will consume less time, and if you have a time constraint or you think that you are not convenient working with autolayouts then go with this option.
2) Using any/any size class and add constraints to make you interface alright for iPad. After that only modify/add those constraints for iPhone specific size classes which needs to be adjusted. Once you have layout set with any/any for one of the device either iPhone or iPad, you will be surprised to know how much less constraints you will have to modify for specific size classes. This option requires good understanding of autolayouts or even if you are not convenient working with autolayout but willing to try and have no problem with time constraint then you should definitely go with this option.
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.
Im starting to experiment with storyboard. As you can see I have chosen the storyboard size to be height=regular and width=compact, which says “For all iPhones in portrait”.
The simulator I am using is iPhone6 however when I run everything is slightly off to the right.
Can someone explain what is happening or what I am missing?
The problem is that (as described in the comments) you are positioning the views without AutoLayout. When you just drag and drop the views, it's actually setting the frame's positions and sizes. The main problem with this approach is that it doesn't set the position and size in a proportional and related manner, taking in consideration the container. This is why you're getting the view at the current position. If you run in another simulator, maybe you can get the correct position, or maybe not. What you can do to change this is apply auto layout constraints to those views. There's a special constraint to center views horizontally. With autoLayout you can go further, specifying relation between one or more views, and those views not necessarily need have the same container view.
One quick example:
Notes:
I'm using universal storyboard to take those screenshots. It's more flexible and with AL you don't necessarily have to concern yourself with the size, as views adjust themselves depending on the constraints applied to.
EDIT:
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html
This is a link to auto layout guide provided by apple, a great tutorial on how to get your hands dirty in this little world.
Below is my app when run on iPhone 6 simulator
As you might have guessed it looks good on iPhone 5.
Autoresize is on, but I'm not sure i fully grasp the concept, so i might be missing something.
Any suggestions for a solution are appreciated.
I also added another image for the storyboard structure.
It might be possible as you might have not set layout constraints. The below link will help you how to set constraints. In the below link i've used size class but it is not necessary for you to use sane view, similar constraints can be applied to the storyboard structure you have used.
Hi please visit below link:
iOS 8 Autolayout with Size Classes
Advance auto layout Constraints:
Adjust Center of Measure in Xcode 6
Auto layout is on but you are not using it. You need to add constraints so that when the main view is resized to fit the screen, the table view is resized along with it. Otherwise, it just stays at the same size you designed it (which happens to be the right size for an iPhone 5). These devices are different sizes; the idea of auto layout is to cope with that difference. Use it.