My GUI looks like that:
Image
I don't really know how to set the constraints of the image view in the middle properly.
It works in portrait mode if I set constants but if I rotate the device it doesn't work anymore because the constant value is wrong for landscape.
Do you know how to solve that?
When you see a red-lined constraints that means the there is at least one missing constraint. When adding constraints to a component it should cover the whole frame of it (size: height/width and origin: x/y). If you want to let the height/width of the imageView dynamic (based on screen size), then you should add Equal Widths and Equal Heights constraints between the imageView and view container.
Also, in xcode 8, you can easily choose the desired size class, by choosing the device and its orientation. So, let's assume that you want to setup the constraints for all the iPads in landscape mode, in storyboard you should pick -for example-:
Also, you might want to check this video from WWDC 2016.
Hope this helped.
Related
In my application i have a screen which contains close button on top and program information at bottom and both trailing,leading,bottom and top constraints related to safe area.
Button width and height is 1:1. Program info area height is 0.25 of view height. In run time adding avplayerviewcontroller view on screen whose height is 75% of self.view.It's working fine in all device except iPhone X. If i launch app in landscape then alignment is fine and if I change orientation I can see 44 pixels as x value. If I launch app in portrait first then portrait orientation values are correct if I change orientation to landscape then 44 pixels top(y) value is adding. I am not getting how to fix this issue. Please guide me.
[![enter image description here][1]][1]
I guess your problem is that you have defined constraints in percentages, which might be an issue. When you rotate the screen the mid section might be too small. Have you tried the rotated layout in interface builder to see what is happening? Defining layouts with constraints is relatively easy in interface builder and you can test the layouts as well.
If you programmatically set the constraints, it is hard to find out where it went wrong. If you have one ambiguous constraint, the whole screen can be weird.
If you need to make programmatically set constraints, you should make a test setup in interface builder and implement the good setting in the program code, when everything works as planned.
I have checked your storyboard and I think the issue might be that you have two safe area defined. One outside the containerview and one inside. What you put inside the container view, might be wrongly calculating the constraints inside.
Try to take out this checkbox and try it again.
I am new in iOS , I am an android developer self-learing iOS just for fun.
As you can see from the picture , I want to make my ImageView full-displayed in the window in different inch iPhone.
If you are an android developer, you may know what I mean is how to make ImageView match_parent in both width and height?
You must set the UIImageView Constraints, like this to adjust in the full screen, 0 spacing in all sizes, and click in Add 4 Constraints
After that, you must check in the UIImageView settings the mode to Aspect Fit, so it will keep the aspect ratio of your image.
I Took the image from your print, here is the expected final result.
Pin the image view on all four sides to its superview via constraints with a constant of zero. Now configure the image view's content mode so that it doesn't distort the image, but rather keeps its aspect ratio (there are two ways to do this, and I don't know what one you want, so you will have to experiment).
Originally I am working off of a view of size 4.7 inches in my storyboard and laying out everything from there, however I'm running an issue when running the app on a smaller screen.
The view in question is a view with a scrollview inside of it and a bunch of labels and text fields inside that. When running on the iPhone 4s for example, or even the 5, the scrollview appeared to be pinned at the bottom and I was wondering why, I had tried playing around with insets and offsets but nothing worked.
Looking at my storyboard, when I switched the fixed size of the view to 3.5 inches, it looked like all my top elements were outside of the view altogether.
I'm not exactly sure how to go about this situation.
Any help would be appreciated.
Can't help too much without more information but it sounds like you don't have constraints set properly. You should have constraints set for the scrollview to match the views size and be centered as well the labels have constraints to the scrollview, other wise when the screen sizes change there will be issues. When working in storyboards you should try using the inferred size instead of a certain screen size, that way you don't try to design the interface for a certain screen size.
In code you could do something like this to set proper constraints
scrollView.frame = view.frame //Or I could set the height, width, center contraints
label.translatesAutoresizingMaskIntoConstraints = false
label.centerXAnchor.constraintEqualToAnchor(scrollView.centerXAnchor).active = true
I would try to help with the storyboards but I would need a little more info. I tend to do my constraints in code.
I have a simple layout with multiple views and constraints to position and size them as I need. When I deploy the app to a simulator or device, the X, Y and Widths of all the views have the proper sizes. The Height on the other hand is always 0. All the views have proportional heights according to the super view.
Now, if I flip the orientation to Landscape and then back to portrait, everything shows up properly (the heights are no longer 0).
I've used the same logic with proportional heights previously, and I started seeing this problem with newly created view controllers after updating to Xcode 7.
EDIT You can get the .xib from: http://1drv.ms/1M81EUQ
you have to Set different view update method call regarding the orientation changed if you use auto mask resizing or used autolayout to fix this .
Your .xib was configured with Size Classes enabled, but your views and constraints were all configured to only be applied for Compact width, Regular height.
I went through and changed the views and constraints to apply to Any width, Any height, and this resolved the issue with landscape layouts.
Download the modified .xib file here
I recommend using Xcode 7's Preview Assistant View when working with Autolayout, as it will let you see multiple devices, in multiple orientations at the same time. This really helped in this case with showing that the layout was fine in portrait, but not in landscape.
This is what I saw in your .xib as you provided
And with the changes in my .xib
How could this have happened? One way is that you may have accidentally set the storyboard editor to a specific size class. If you see a blue border at the bottom of the editor, anything you add will be configured to be only installed for that specific size class. You can click on the size class shown to change it out to w Any h Any to return to the default mode.
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