IOS/Android status bar styling

#1

How do you style the ios style bar to be dark when on a white background and light when on a light background?

Googling this yielded no results for me.

#2

The latest IOS has multiple options for styling the status bar. You can pick opaque, translucent, light or dark, this is a feature of your app profile.

When you are using Flash Builder or some such tool, it is in the XML file where you control this.
For example, the project XML file will have some IOS addendum info:

<!-- <iPhone> -->
	<!-- A list of plist key/value pairs to be added to the application Info.plist -->
	<!-- <InfoAdditions>
        <![CDATA[
            <key>UIDeviceFamily</key>
            <array>
                <string>1</string>
                <string>2</string>
            </array>
            <key>UIStatusBarStyle</key>
            <string>UIStatusBarStyleBlackOpaque</string>
            <key>UIRequiresPersistentWiFi</key>
            <string>YES</string>
        ]]>
    </InfoAdditions> -->
#3

How would you accomplish this in OpenFL?

#4

Also is there a way to do it at run time?

#5

According to Apple’s documentation TN3105: Customizing the UIKit status bar style, you can change the status bar appearance in the Info.plist file by adding these keys:

<key>UIStatusBarStyle</key>
<string>UIStatusBarStyleLightContent</string>

<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

(I assume that there are other values besides UIStatusBarStyleLightContent that are supported too)

This appears to be the template file that Lime uses for an iOS app’s Info.plist:

https://github.com/openfl/lime/blob/develop/templates/ios/template/%7B%7Bapp.file%7D%7D/%7B%7Bapp.file%7D%7D-Info.plist

We can copy that file into your project and customize it.

In your project’s root directory, create a file templates/ios/template/{{app.file}}/{{app.file}}-Info.plist, and copy the contents of Lime’s file linked above into that file.

I see that it already has the UIViewControllerBasedStatusBarAppearance key already:

<key>UIViewControllerBasedStatusBarAppearance</key>
<::!WIN_FULLSCREEN::/>

You want to remove that, and replace it with the snippet from above.

Then, in your Lime project.xml, add the following line:

<template path="templates"/>

This tells Lime to check your project’s new templates directory for any customized template files. The nice thing is that you don’t need to copy everything from Lime’s default templates. Only the individual files that you want to change from the default.

Note: I haven’t actually tried this to see if it works, but I’m pretty sure that it will.

You’d probably need to create a native extension to do it at runtime. I don’t think that Lime has an API for it.