The Page.On method specifies that this platform-specific will only run on iOS. SetPreferredStatusBarUpdateAnimation(UIStatusBarAnimation.Fade) On().SetPrefersStatusBarHidden(StatusBarHiddenMode.True) It's consumed in XAML by setting the Page.PrefersStatusBarHidden attached property to a value of the StatusBarHiddenMode enumeration, and optionally the Page.PreferredStatusBarUpdateAnimation attached property to a value of the UIStatusBarAnimation enumeration: Īlternatively, it can be consumed from C# using the fluent API: using After you launch the in app browser from within your application and then close it, your status bar will disappear! Since we're using PhoneGap Build we can't do much about editing the plugin directly (although there is a fix that is available for this is you're maintaining a local PhoneGap project).This iOS platform-specific is used to set the visibility of the status bar on a Page, and it includes the ability to control how the status bar enters or leaves the Page. If you're using the Inappbrowser plugin and trying to implement the example above you are going to run into some trouble. backgroundColorByHexString ( "#1f1e2e" ) Īs you can see we're telling it to show the status bar again, not overlay the web view, change the text to white by specifying "light content" and then changing the background color to the specified hex value.
#Status bar ios app code
Now in our applications launch() function, or the equivalent 'deviceReady' function if you are not using Sencha Touch, we place some additional code to display the status bar again and change the styling: To do this we would start by including the following in the config.xml to hide the status bar entirely: Let's say you want to have the status bar hidden during the application startup (whilst the splash screen is showing) but then display a purple status bar that has white text and is separated from the application. backgroundColorByHexString ( "#cecece" ) Same as above but allows the use of a hex string: backgroundColorByName ( "red" )īlack, darkGray, lightGray, white, gray, red, green, blue, cyan, yellow, magenta, orange, purple, brown, clear The opposite of the above, uses light text on a dark backround:Īlso uses light text but makes the status bar overlay the content and is somewhat see through:Ī solid black background with white text:Ĭan be used only when overlaysWebView is set to false. Uses the default style which is dark text on a light background: StatusBar.overlaysWebView – can not be used with PhoneGap BuildĬan be set to true or false and controls whether or not the statusbar overlays the WebView: There's quite a few methods that we have access to after including this, here's a summary of what we can do: To do this, simply add the following line to your config.xml file:
#Status bar ios app how to
I'm going to walk through a few examples of how to control the status bar by using the StatusBar plugin for PhoneGap Build.įirst we will have to make the plugin available to use within our project. Perhaps you want your application to occupy the entire screen or want the the status bar to be a certain colour and be separate to your application (in this case, it wouldn't be necessary to include the fix above). In some circumstances, we may not necessarily like this default behaviour of the status bar. If it is then we take the status bar change into account by applying some padding to the top of the toolbar. This code uses Sencha Touch's ' Ext.os' to see if it is being run on an iOS device with an iOS version of 7 or later. My apologies to the creator of this fix, I like to give credit but I can't track down who I got this from. The community quickly provided a few workarounds to this, my favourite being to include the following code:
![status bar ios app status bar ios app](https://truetiger.info/wallpaper/hide-status-bar-in-xamarin-forms-for-ios-and-android.jpg)
This caused a problem where Sencha Touch was not taking this change into account and if we were to have a toolbar with buttons at the top of the application, the status bar elements would overlay parts of our interface. In the most recent iOS updates the default behaviour of the status bar changed, which would cause it to overlay our applications rather than being separated from the application entirely. By default a Sencha Touch application packaged with PhoneGap Build will just inherit the native behaviour of the iOS status bar. The status bar is the little horizontal bar at the top of an iDevice that displays network connectivity, time, battery and so on.