How To Upgrade and Get Your iOS App Ready For The New iPhone X

0
Shares
How To Upgrade and Get Your iOS App Ready For The New iPhone X
5 (100%) 1 vote

create apps for iphone x

When life gives you lemons, you quickly learn how to make a lemonade out of it. This is the exact situation Apple has created for app owners & iPhone app developers.

One of the best features of iPhone X that really sets it apart from Apple’s other iPhones is undoubtedly the display notch. Hate it or love it, but it makes the iPhone X much more recognizable in the vast sea of same-looking smartphones available in the market. In fact, app owners and iOS app developers now have to get used to it because Apple clearly stated that the new iPhone X’s design will inspire the majority of upcoming iPhones in the future.

In the new iPhone X, the screen is no longer a rectangle; now there are rounded corners, and a cut-out for the front sensor housing. In addition, the home button has also been removed and is replaced by a software on-screen indicator.

iphone-layout

All these changes will certainly have implications for your iPhone app. Though, Apple has also provided tools to help us in creating and providing better user experiences to our new iPhone X users. So, let’s move forward and see how to create apps for iPhone X.

Updating Your App for iOS 11

The first thing you need to do to upgrade or create apps for iPhone X is:

  • XCode 9
  • Make sure that your iPhone app uses a Launch Screen storyboard, not the launch images
  • And Creating apps for iPhone X against the new iOS 11

Similar to 4”, 4.7”, and 5.5” iPhones introduced in 2014, you can opt your iOS app in to support iPhone X by either using a launch storyboard or a default image with correct dimensions. If you choose the second option, you’re more likely to be already using a LaunchImage set inside of an Asset Catalog.

Though, there is a surprising part here.

When you open it, there’s actually no spot for the new iPhone X. Therefore, you’ve to select the corresponding checkmark manually, in the Attributes Inspector – iOS 8.0 or later. Once you do this, then you can bring in the launch image.

default-image-support

Now let’s see how to make these necessary changes.

Enable Safe Area Layout Guides

Safe Area layout guides are the main building block using which you can enable the iPhone X support. In existing iOS apps, It’s not enabled by default in the Storyboard. So, when upgrading your app for the new iPhone X’s display, you need to enable the Safe Area Layout Guidelines.

iphone-x-safe-layout

Once you enable it, the XCode 9 will migrate your constraints, which used pinned to the layoutguides. Now, if your iPhone app uses Auto Layout and standard UIKit components, then your app may just work with no changes necessary. But, if your app does manual layout and uses custom controls, then you might have to do some upgrading.

Now, if your app does require necessary changes, then we recommend that you exercise your entire iPhone application, every screen, in every orientation (Portrait & Landscape – left and right) to detect any layout anomalies. In fact, XCode 9 already provides iPhone X simulator to make this task easy.

The safe area describes an area of a view not occluded by ancestors such as search bar. This means you’ll have to check and update your layouts to honor this safe area. For instance, if you’ve put some control at the bottom of view whose bottom constraint is relative to iPhone X’s bottom edge, then that control may now be obscured by the iPhone X’s home indicator. The fix for this issue is to update your control’s bottom constraint to be relative to the safe area layout guide.

You can access this safe area in the code by using SafeAreaLayoutGuide, or by using layout margins (if calculating manual layouts), or in Interface Builder. Also, as shown in the picture above, the safe area layout guides must be enabled in the storyboard.

One more thing…

When you turn on/enable safe area layout guides, it will automatically upgrade constraints connected to the scene’s top and bottom layout. Therefore, it’s necessary to review and test your entire iPhone application in the simulator after enabling the safe area layout guides.

The UITableView Changes for The New iPhone X

The UITableView brings a precise change. For the new iPhone X display, the table view will run edge to edge, but the ContentView of the UITableViewCell will be constrained by the safe area. This will basically allow cosmetics to fill the screen but can keep your content where users can see it.

Besides, the new iOS 11 also provides a UITableView.insetsContentViewsToSafeArea setting to modify this behavior that may or may not be needed according to your requirements. In addition, also note that the BackgroundView does extend to edges, which means it can be another option for adjusting customization. This makes testing all of your screens much more necessary, especially left and right landscapes.

Taking Care of Corners & Home Button Area

Any controls placed in the corners will need to be moved, maybe just inset, to make sure that they are not clipped by iPhone X display’s rounded corners. In addition, the controls placed at the edges will also need an inset to help with the gestures. This is especially for the controls at the bottom because more space will be needed to make sure trouble-free gesturing between the iPhone X’s home indicator and your controls.

Embracing The Large Navigation Bar!

In iOS 11, the Apple has unified the search bar with the large navigation bar because a non-unified search bar looks bad on the iPhone X display.

The good news is, the fix is quite easy. To enable it, you need to do following 2 things.

  • Allow large titles in navigation bar
  • Specify which navigation items should have which bar

Now, since you want to continue support of the older version of iPhones with new iPhone X included, we’ll enable the large bar only on the iPhone X, and only in a subset of your app’s navigation stack.

In order to do it, apply the following code to your topmost ViewController.

// Set up the large title bar on iPhone X
if (@available(iOS 11, *)) {
if ([UIApplication sharedApplication].delegate.window.safeAreaInsets.bottom > 0) {
self.navigationController.navigationBar.prefersLargeTitles = YES;
self.navigationItem.largeTitleDisplayMode = UINavigationItemLargeTitleDisplayModeNever;
}
}

Now, in the ViewController, the topmost one of the subset should also have the large navigation bar. To implement it, use following code:

if (@available(iOS 11, *)) {
self.navigationItem.largeTitleDisplayMode = UINavigationItemLargeTitleDisplayModeAlways;
}

After implementing, here’s how your app’s navigation bar should look like:

fr9c8

Conclusion…

Overall, these are the key areas for app owners and iPhone app development company to address in their existing iOS apps to make them ready for the new iPhone X.

Although, there might be more work to do because the Apple has designed the iOS 11 and iPhone X to behave in a backward-compatible manner for apps that were built in the Xcode 8. And even if your app used Auto Layout and have launch storyboards shown in the middle of the screen, it still might not be able to handle the new device. So if this situation occurs, you can Contact Us with your app details and we can help you with best possible solution to make your iPhone app compatible with the new iPhone X.

 
0
Shares
 

LET'S TALK VALIDATE YOUR IDEA!