iPhone X has recently been released, and Delphi developers are a little in the dark about how their apps can support the new devices. This article goes some way to make a start in the right direction.

Update 2: Delphi Tokyo 10.2.2 now supports the new layout on iPhone X, including launch images, so if you are using that version, almost all of what is described below does not apply. 10.2.2 accounts for the height of the notch area when in portrait mode, however you will still need to account for it when in landscape mode.

Update: I have released a Delphi 10.2.1 Tokyo version of the IDE expert I have been working on, which (among other things) automatically patches the .info.plist for you. It is located in the Kastri Free library. Please read the CodexInstall.txt file that accompanies it.

The code etc in this article has been tested with Delphi 10.1 Berlin and Tokyo 10.2.1, however it may be possible to make it work with earlier versions.

Delphi apps for iOS seem to work OK (so far) on iPhone X, however if you have seen a Delphi app (or other apps that are yet to support iPhone X display) on one of the devices, you’ll immediately notice that they take up as much of the screen as an app running on earlier devices. Take for example the FireUI App Preview app from Embarcadero:

Note how it doesn’t take up as much of the screen as this app I have been working on, which has had a few tweaks to make it look better on iPhone X:

There’s a number of changes that need to be made in order to make your apps look and work better on iPhone X than they otherwise would:

This article by Geoff Hackworth over at Medium goes some way to explain the changes in iPhone X. As per his article, iPhone X requires 2 new launch screen images, so they need to be added to your app deployment. In addition, the .info.plist file that Delphi generates will need to be customised because (at the time of writing) the IDE is yet to be equipped to handle iPhone X launch images.

You’ll need to deploy the app at least once in order for the <projectname>.info.plist file to be created. Once that is done, open the file in your favourite editor, navigate to the UILaunchImages key, and add the following two entries inside the array node:

[sourcecode language=”xml”] <dict></dict>
<key>UILaunchImageSize</key>
<string>{375, 812}</string>
<key>UILaunchImageName</key>
<string>Default-812h</string>
<key>UILaunchImageMinimumOSVersion</key>
<string>8.0</string>
<key>UILaunchImageOrientation</key>
<string>Portrait</string>
</dict>
<dict>
<key>UILaunchImageSize</key>
<string>{812, 375}</string>
<key>UILaunchImageName</key>
<string>Default-Landscape-812h</string>
<key>UILaunchImageMinimumOSVersion</key>
<string>8.0</string>
<key>UILaunchImageOrientation</key>
<string>Landscape</string>
</dict>[/sourcecode]

Save this file using a different file name (e.g. <projectname>.patched.info.plist), add it to the deployment, and disable the original <projectname>.info.plist:

Note that if you make any changes to the project options that affect the <projectname>.info.plist file, you’ll need to go through the re-patch process. I have an expert for the IDE in development that could make this process seamless.

Create your launch images (sized 1125×2436 pixels and 2436×1125 pixels), and add them to the project deployment. Modify the Remote Name properties of each entry in the deployment to coincide with the changes that were made in the .info.plist, e.g:

Now your app will able to make use of the extra space on iPhone X, however you’ll notice that this introduces a new problem. This is an example:

Notice how the app now invades the status bar/notch area, and goes below the horizontal stripe at the bottom. Depending on what is actually displayed at the bottom, that might be OK, however there will probably be occasions when you don’t want your app to invade that space, either. In landscape mode, the sides of the application can invade the “notch” area:

In order to “fix” this, I created a function that could detect whether the device is an iPhone X, which is in this unit in the KastriFree project, and used the function to make layouts visible that border the actual content of the application. e.g:

You may wish to use another method; whatever the case, you’ll need to account for the different layout in iPhone X.