When you create your iOS application, it must be able to run on many different devices. The iOS 11 operating system runs on the iPhone 5S and later, various iPad Airs, iPad minis, iPad Pros, and even the sixth-generation iPod Touch.
So let's create a new project and it AdaptiveUIDemo and go to the storyboard file. You can change the current device perspective at the bottom.
In Xcode, by default, you are initially shown the ViewController roughly as it would look viewed on an iPhone 8 in portrait mode. We have added several labels them at all four corners.
At the bottom of the storyboard, you can see that we are viewing it an iPhone 8, and in the Xcode toolbar, we have chosen to run on the iPhone 8 Plus simulator.
You can see some blank space at the bottom because the iPhone 8 Plus has a larger screen than the iPhone 8. Let's switch the simulator to landscape mode.
Go to the Hardware menu, and select Rotate Left or Rotate Right.
You can see that this is even worse because we are unable to see some content on the bottom of our user interface.
When you make a new Xcode project, Auto Layout is already turned on. In the storyboard, go to the first inspector, i.e., the File Inspector.
You can see that Use Auto Layout is checked, there are a couple of other associated options also checked. One is this Safe Area; it is that part of the user interface that won't be obscured by something else.
Let's go to our demo project, and you can see that on top right corner we have positioned the label using an iPhone 8 view. But you want to change it to a narrower screen like an iPhone SE.
Now you won't see most of the button because it's default position is to a certain distance from the top left corner. So here we need the button to orient itself to the top right corner, but not to the top left. So we will define two constraints here;
To do so, hold the control key, click the label and drag to the right side of view.
When you leave the mouse button, you will see a small pop-up with multiple options.
Click on the first one, which is Trailing Space to Safe Area.
-We have added our first manual constraint for the top right label, Xcode is no longer generating any constraints for that label. -Now the problem is that we have to change the horizontal position of the label, but it doesn't know what to do with the vertical position if the screen was to get shorter or taller.
So we need one more constraint, hold the control key, click the label and drag up.
Select the constraint that is the Top Space to the Safe Area. Now let's change iPhone 8 view to an iPhone 8 Plus.
You can see the top right label has moved out to the right, whereas the bottom right label hasn't changed its position. Let's back to that iPhone SE.
You can see the top right label now, but the bottom labels are not visible. When you turn an iPhone to landscape mode, iOS turns off the top status bar with the battery and the time.
It means that in landscape mode, the Safe Area goes to the top of the screen that's why the top labels are not aligned. So let's define the constraints of other labels as well with their corresponding sides of the view.