如何将兼容的现有应用程序制作到iPhone X.

Question

We have an application with 6 to 8 screens which was developed by Swift 3.2 version. And I am using Size classes (Auto Resize),not using autolayouts for all devices its working fine.

But, Now, We want to make it compatible with iPhone X device.

While we testing app in iPhone X, there are lot of issues on top, bottom views and even centre of the screen in Subviews.

I have seen, few forums which were told, "Use adaptive Sage Guide" in Story board files of UI, and issue would be solved. But, Event I tried that, still lot of gaps and issues coming bottom and top while testing app with iPhone X.

So, how to make compatible with iPhone X with my existing code, do I need to change everything in programmatically for below iPhone X and iPhone X, or is there anything there?

Can anyone suggest me, how to proceed for this.

Note : We are using Xcode 9.2

Answer 1

It's not just an iPhone X thing, it's also an iOS 11 thing. iOS 11 introduces a brand new inset adjustment API that deprecates most (maybe all?) of what preceded it. And with iPhone X's physical design, even more attention to safe areas must be made.

So get used to writing these:

if #available(iOS 11.0, *) {

    // new iOS 11 syntax
    someView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true

} else {

    // pre-iOS 11 syntax
    someView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor).isActive = true

}

the safeAreaLayoutGuide is now a property of the view itself and it's more intuitive, IMO. More examples of the new API syntax:

someView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
someView.widthAnchor.constraint(equalTo: view.safeAreaLayoutGuide.widthAnchor).isActive = true
someView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true

And if you're interested in getting inset values:

if #available(iOS 11.0, *) {
    someViewAnchor.constant = view.safeAreaInsets.bottom
} else {
    someViewAnchor.constant = bottomLayoutGuide.length
}

If you're using storyboards, you should open them now, go the file inspector, then select the Use Safe Area Layout guide checkbox – that will switch you over to the new system. https://www.hackingwithswift.com/articles/12/how-to-update-your-app-design-for-iphone-x

Answer 2

After adding Safe Area Guides you need to do little changes in constraints attribute like those constraints which are using superview.top and superview.bottom of the screen after applying the Safe Guide the superview need to change to the Safe Area like in the picture below