I'm developing for both iOS7 and 8 iPhone.
Since iOS7 doesn't support compact-height size classes, I thought the consensus way to go about this was to use the any-any size class for landscape iPhone layouts,
and use portrait compact-width regular-height (cWrH) size class for portrait iPhone layouts.
I set a constraint on a view in any-any, then modify a constraint constant in cWrH to be specific to that size class. However, iOS7 device as well as Xcode preview ignores the any-any constraint, and uses the cWrH constraint for both portrait and landscape orientations.
I have no clue why this is happening. All I want to do is set different constraints depending on orientation.
This is easily replicated using latest Xcode 6.0.1.
Semi-related: How can Xcode 6 adaptive UIs be backwards-compatible with iOS 7 and iOS 6?
Screenshots below:
As per your question what you did is you have given leading,Top,height and width constraints in Any-Any Size Class.
So now its position will be fixed for any devices in landscape and portrait.
Now when you changes size class to compact width and make changes in top constraints it will affect both portrait and landscape.
What you need to do using size class with Any-Any to place your controls in View controller and set those constraints which you would like to keep in both portrait and landscape.
e.g.: If you want to keep height and width fixed give those constraints in Any-Any Size Class.
Setting constraints in Any-Any Size Class will keep those constraints similar for both portrait and landscape.
1.) Setting leading and top constraints in portrait you can use width- Compact, height-Regular.
2.) Setting leading and top constraints in landscape you can use width- Any,height-Compact.
Visit link below it has the great explanation and your most of issues related to auto layout using size class will be solved:
http://mathewsanders.com/designing-adaptive-layouts-for-iphone-6-plus/
Hope this solves you problem.
Related
I am trying to take an image from filling the right hand side of the screen when viewed in horizontal orientation, to the top quarter when viewed in portrait.
I've followed lots of guides and points on here, but they all related to older version of XCode that seemingly have things XCode 11 don't - such as selecting constant - or just don't work.
I am completely perplexed as to how this should work as when I add "Vary for traits" it applies the move to all devices. I am sure I must be over thinking this, it must be simpler no?
I am using XCode 11.4 with iOS 13.x> above support.
Start by adding a new view controller - use iPhone 8 layout in Portrait Orientation (wC hR):
Add a new UIImageView and position it at the top with about 1/4 the height (doesn't matter how close):
Add top / leading / trailing constraints:
Add a proportional height constraint, at 0.25:
Now change View as to Landscape Orientation (wC hC):
It will look like this (as expected):
Click Vary for Traits, and select Height because we changed from (wC hR) to (wC hC):
Look at the constraints in the Size Inspector, and select This Size Class:
Delete the Leading and Proportional Height constraints:
and add a Bottom constraint and a Proportional Width (0.5) constraint:
And click Done Varying. Now it looks like this:
Notice that we have 2 "grayed-out" (inactive) constraints... If you switch back to View as Portrait Orientation, those two constraint will become "active" and the two (wC hC) constraints will show as "inactive".
Because apps can run in partial screens (iPad multi-tasking), it's advised to no longer think in terms of Portrait and Landscape. Rather, think in terms of size classes / traits.
If your design warrants, you might also add (wR hR) trait variations.
Now, if you really want Portrait vs Landscape, you'll need to use some code. Define a set of constraints for Tall/Narrow layout, and another set of constraints for Wide/Short layout. Then implement viewWillTransition(to size: ... and activate / deactivate the appropriate constraints based on the "to size" width > height or height > width.
my iOS project consists at the moment of one single UIView or UIViewController. The controller class is called MainViewController.swift.
The view of the view controller has a subview which I've placed at the bottom:
I've set the auto layout option to keep the distance of the subview for every device size the same:
Now I want to keep the sub view always on the short side of the parent view, which means that in landscape mode the sub view show be on the right side of the parent view:
I've checked some tutorials and other posts in the meanwhile:
Ray Wenderlich Tutorial
Stackoverflow Post
At this point it is not clear to my how to realize such a behavior best?
Possibilites I've found to solve the issue:
Vary for traits...but how?
Constraints?
Programmatically - I think this would be the fastest solution, but I really want to use storyboards and learn the correct usage.
Here you can play with size classes and traits. if you want give constraint in portrait mode you have to select compact width and regular height and for landscape compact width compact height.
Please go through following steps to constraint portrait and landscape separately.
1) Please select mode either landscape and portrait from traits.
2) Now, you can constraint each mode one by one. suppose i am giving constraint to red view in portrait mode and i will enable particular constraints for for portrait size class so it will be disable for landscape mode.
3)once we are finished with portrait mode i have switched to compact height compact regular size class which is landscape mode.
4) Now, we can constraint the landscape mode as shown in above screenshot.
As we can see constraints which is light in color are disable for current size class.
So this is how we can constraints landscape and portrait mode separately.
Because there is no size class or trait difference between an iPad in landscape, and an iPad in portrait, you will ultimately have to handle at least some cases programatically. That being the case, you might as well just handle all cases programatically with a method that does something like:
Get current screen size
If width > height, add constraints to center the subview vertical and pin it to the right edge. Otherwise, add constraints to center the subview horizontally and pin it to the bottom edge.
This is the first time I'm making an iOS app in both orientations.
I have a UIView placed like in above image.
I have set the following constraints: Horizontally Centered, Vertically Centered, Leading and Trailing Space : 8, Height : 265.
I want this UIView to look fullscreen in landscape mode such that Leading, Trailing, Top and Bottom is stuck to all edges.
Please help me in doing it. The above set constraints are not looking proper in landscape. See image below :
The above screenshots are of iPhone 6s size. I need app to support iPad in both orientations too.
These are the constraints already applied by me :
EDIT : After vary for traits is applied :
Portrait constraints are the active one and greyed out ones are applied to landscape. It looks as I want in storyboard but still taking height of portrait during runtime.
EDIT 2: Vary for traits is working on that particular size class but not on all size classes. Please suggest how to set same constraints on all size classes.
select landscape option (below the screen near to setting auto layout pane) then press vary for traits , now give new constraints that you want in landscape mode then select done varying.
Now you have two different constraints for landscape and portrait mode.
Add below constraints just change the value of constant according to your requirement -
Check below -
Is there a way to change the constraints?
I want to change the height, centerX and centerY of the button if the device is in landscape mode.
You can use different constraints by using Size classes. Size classes allows you to add different constraints for various modes i.e landscape and Portrait for various devices.
If you are using Auto-Layout then make outlets of constraints and change your constraint's constant value as per your need.
Example: If your height constraint is heightOfView then set heightOfView.constant = x , in your landscape mode
The size class will help you change the constraints in landscape and portrait mode both and even for the device screen ratio. For more details have a look at Ray wenderlich Auto layout tutorial
Auto layout makes things easy but still confuses me a lot when it comes to landscape orientation. I have to keep both landscape as well as portrait screen. My application will be for iPhones only i.e from iPhone 5 to iPhone 6s+.
What size class I need to use? everything seems so confusing. Every constraints conflict with each other. I have no problem in understanding leading, top, bottom, trail space. But what if device is rotated? How do I manage things? Please help!
I don't think you'll need size classes unless you're sure that there's going to be a significant GUI variations between different screen sizes or rotations.
In terms of rotation, the constraints don't change their orientation when the device is rotated. They still stand for what they stood for before.
For size classes, it depends on the app's design. Most likely, if you've setup your constraints correctly, you'll be fine with just a single size class for an entire family of devices.
If you choose to, for example, have significant changes in a tablet-focused variation, you can make those in code depending on the device type or screen size, or use a size class. Only use a size class to have variations in layout between various screen sizes that cannot be handled with constraints alone.
This site is a useful visual reference for size classes.
If you're making an iPhone-only app, what you basically need to know is that every iPhone uses regular height in portrait, and compact height in landscape. So focus on those two size classes.
Set the storyboard size class (in the bar under the canvas) to wAny hRegular. Then select your view controller and (in the Attributes inspector) set the size to iPhone 4-inch (or other device of your choice) and set the orientation to portrait. (These view controller settings don't interact with the size class but make it easier to see how things will look at runtime.) Now set up your portrait layout constraints.
Then set the size class to wAny hCompact. Change the view controller's orientation to Landscape. Now set up your landscape layout constraints.