iPhone X: Safe Area Layout

Safe Area

The iPhone X has an almost fullscreen display. That’s great, but there are some challenges for developers:

So how can you make sure that you both take care of these challenges and let the app work as usual on smaller devices like the iPhone 8? You just have to use the so-called safe area! If your content is inside this area, your app is working on all devices. Take a look at the safe area (blue area) for the iPhone X:

Portrait:

Landscape:

And this is the safe area on the iPhone 8:

As you can see, on the iPhone 8 the safe area is basically the whole screen without the status bar. So if you are using auto layout and place your content within the safe area, your app will be displayed properly on all devices.

You can take advantage of the safe area by using the safe area layout guides. These are available since Xcode 9 and the iOS 11 SDK.

Example

Let’s take a look at an example: We want to add a button to the bottom of the screen. So first, we drag and drop the button into a view controller.

After that, we add the layout constraints. For that, we right-click on that button and drag to its superview and release the click. Now, Xcode automatically suggests to add the constraints to the safe area layout guide. We add constraints to the bottom, left and right. After that, we set all the constraints to zero in the size inspector of the button:

Here you can see the whole controller inside the storyboard:

Now let’s start the app on different devices and look how it works:

As you can see, it’s working as expected on both the iPhone X and the iPhone 8.

Conclusion

So pls follow the above step and And if you have any issue or suggestion you can leave your message in the comment section I will try to solve this.

. . .

Comment

Add Your Comment

Be the first to comment.

css.php