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.
Related
I wonder how I can achieve the following with auto layouts in Swift 4 in the story board:
I have a quadratic collection view. In portrait mode, this should be on top filling the entire width and having a height equal to the width. Other controls should then be below it.
In landscape mode, the quadratic view should be on the left, having the height of the landscape and an equal width, thus again being quadratic. Now, other controls should be on the right.
Naturally, the behavior is the opposite: the order of controls is always top -> bottom, no matter the orientation. But for me it is crucial that the quadratic collection view fills as most of the screen as possible.
How can I achieve this behavior?
I found the answer. In XCode10, first set all your constraints, e.g. in portrait mode. Then switch to landscape mode. One can click afterwards click on "View as: iPhone ...", an area will pop up with some button "Vary for Traits".
In the dialog, we can choose to vary based on "Width" (= Landscape) or "Height" (= Portrait), which means that we can define a distinct set of constraints for the orientation that we have so far not utilized.
In the end, we have two set of constraints each for landscape and portrait mode.
This quite extensive tutorial explains more on it: https://www.raywenderlich.com/492-adaptive-layout-tutorial-in-ios-11-getting-started
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 -
I looked at UIStackView and I don't understand how it can be used with the Resize Class.
I would like to have a imageView and a textView inside stackView in vertical (portrait) mode. I would also like to have the same thing, but in horizontal (landscape) mode.
I can detect the rotation and I change the orientation of the stack. Is this correct?
The best way to change your stack view between portrait and landscape mode using size classes is the following:
Select your stack view in storyboard and look at the attribute inspector:
Click on the plus button next to the attribute you want to change when in landscape and select any width, compact height:
Finally, set the attribute for what you want when the device is rotated for instance:
Hope this answers your question. Cheers!
I have a subview in portrait orientation (storyboard scene):
that I want to move and resize like this when the device rotates to landscape orientation:
What the best (or easiest) way to handle this should be?
I'm thinking about the following options:
Creating different separated xib files (one for portrait and another for landscape), and loading the corresponding one?
Rotating + translating + resizing the subview when orientation changes?
Directly creating both subviews (horizontal-bottom one, and vertical-left one) and hidding the corresponding according to the orientation?
I need help with this scenario, I don´t find a solution that works for me. Also if I'm missing any other option, I'll appreciate to know.
Thanks in advance
EDIT: This is an app targeting iOS 7 and above. I'm not using the size classes feature, just autolayout.
EDIT 2:
Setting a new frame to the subview.
What should be the difference of this option with option 2?
Option (2) would be your best bet. Store two sets of constraints and install / uninstall them depending on the orientation.
If you were using size classes, you could do this completely in IB.
(1) is overkill, and (3) is unnecessary.
In portrait mode you have the following constraints for your subview:
Horizontal space constraints for the left, right sides
A vertical space constraint for the bottom side
A height constraint
After the device is rotated to the landscape orientation, you'll change the constraints so that you'll end up with the following constraints for your subview:
Vertical space constraints for the top and bottom sides
A horizontal space constraint for the left side
A width constraint
I am developing an iPad application with view-based template in landscape mode as it has to share a toolbar to all its views and provide the functionality similar to tabbar.
The problem is that any control added to a portion of the screen on the right side is disabled. For example, if a button is added, the part of it on that portion of the screen doesn't work.
Surprisingly, the width of that portion of the screen is equal to the width of the screen in landscape subtracted by the width of the screen in portrait so I think the problem has something to do with that.
Thanks in advance
I'm betting those controls are outside the bounds of their superview (or the superview's superview, or the super-super-superview, or…). When the view hierarchy does a hit test, it returns nil if the point is outside its frame, so subviews outside the frame can't be hit. Note that views in IB don't have the "clips subviews" option on by default, so it's hard to tell where the view bounds are. Also check the autoresize settings on those views--if one of the containing views isn't set to resize horizontally and it's sized to portrait width in the nib, it won't expand to landscape width when you rotate the device.