iOSでのステータスバーのスタイルの変更

NativeScriptを使用すると、豊富な共通APIを公開することにより、マルチプラットフォームアプリケーションを構築できます。 さまざまなプラットフォームの詳細を知る必要はありませんが、すべてのプラットフォームには独自の機能があります。 アプリケーションを微調整してよりネイティブに見えるようにする必要がある場合、NativeScrptはネイティブAPIおよびプラットフォーム固有の機能への完全な制御とアクセスを提供します。 そのようなシナリオの1つは、iOSでステータスバーのスタイルを変更する場合です。

NativeScriptでiOSアプリケーションのステータスバーのスタイルを変更するには、2つの方法があります。

• NavigationBarスタイルを変更する
• Info.plistファイルを使用する

NavigationBar barStyleプロパティを使用してステータスバーのスタイルを変更する

この方法は簡単ですが、ActionBarを使用することを意味します。 NativeScriptのActionBarは、一般的な抽象概念の、iOSのUINavigationBarおよびAndroidのActionBarです。 通常は画面の上部にあるバーで、アプリケーションのタイトルとナビゲーションコントロールを提供します。

• ページのXMLファイルを使用して、アプリケーションでActionBarを宣言します。
  例1： タイトル付きのデフォルトのActionBarを作成する方法

  <Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="loaded">
  	<Page.actionBar>
  		<ActionBar title="Sample title"></ActionBar>
  	</Page.actionBar>
  </Page>

  図1は、例1のサンプルコードを追加した結果を示しています。

  図1： ActionBarのデフォルトスタイル

  

  UINavigationBarステータスバーとステータスバーの背景色をそれぞれ簡単に変更できます。 これを行うには、ActionBarのbackgroundColorプロパティを設定する必要があります。 これは、XMLまたはCSSで実行できます。

  例2： ActionBarのbackgroundColorプロパティを設定する方法

  • XML
  • CSS

  <Page.actionBar>
  	<ActionBar title="Sample title" backgroundColor="green"></ActionBar>
  </Page.actionBar>

  ActionBar
  {
  	background-color: green;
  }

  図2はその結果です。

  図2： NavigationBarとStatusBarの変更された背景色

  

  iOSには、UINavigationBarをDefaultとBlackに設定できる2つのスタイルがあります。 UINavigationBarスタイルの変更は、自動的にステータスバーのスタイルを変更します。 デフォルトでは、iOSのUINavigationBarスタイルはDefaultです。 つまり、文字は黒になり、背景色は白になります。

• UINavigationBarのスタイルを変更する

  UINavigationBarのネイティブインスタンスにアクセスするには、frameモジュールを使用する必要があります。 次に、そのbarStyleプロパティを使用してスタイルをBlackに変更できます。

  例3： ネイティブコードを使用してUINavigationBarスタイルを変更する方法

  • JAVASCRIPT
  • TYPESCRIPT

  var frame = require("tns-core-modules/ui/frame");
  var platform = require("tns-core-modules/platform");
  function loaded(args) {
  	if (platform.isIOS) {
  		var navigationBar = frame.topmost().ios.controller.navigationBar;
  		navigationBar.barStyle = UIBarStyle.Black;
  	}
  }
  exports.loaded = loaded;

  import { EventData } from "tns-core-modules/data/observable";
  import { topmost } from "tns-core-modules/ui/frame";
  import { isIOS } from "tns-core-modules/platform";
  
  export function loaded(args: EventData){
  	if (isIOS) {
  		let navigationBar = topmost().ios.controller.navigationBar;
  		navigationBar.barStyle = UIBarStyle.Black;
  	}
  }

  図3は、その結果です。

  図3： デフォルトのUINavigationBarスタイルを黒に変更

  

  図3に示したように、UINavigationBarのスタイルとステータスバーが、灰色の背景色と白のテキストやアイコンに変更されました。

ステータスバーのスタイルのみを変更する

ActionBarを使用しないシナリオでは、このオプションを使用する必要があります。 iOSでは、ステータスバーには2つのスタイルタイプがあります。 デフォルトのスタイルタイプUIStatusBarStyleDefaultとUIStatusBarStyleLightContentです。 デフォルトのスタイルは、図4のように黒と白の背景色のアイコンなります。

アプリケーションのInfo.plistファイルを使用して、ステータスバーのスタイルを変更できます。

1. app/App_Resources/iOSフォルダーに移動します。
2. Info.plistファイルを開きます。
3. Info.plistに、以下に示すコードを、</dict>タグを閉じる前に追加します

   <key>UIStatusBarStyle</key>
   <string>UIStatusBarStyleLightContent</string>
   <key>UIViewControllerBasedStatusBarAppearance</key>
   <false/> 

その結果、Info.plistは次のようになります。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
	<dict>
		<key>CFBundleDevelopmentRegion</key>
		<string>en</string>
		<key>CFBundleDisplayName</key>
		<string>${PRODUCT_NAME}</string>
		<key>CFBundleExecutable</key>
		<string>${EXECUTABLE_NAME}</string>
		<key>CFBundleIconFile</key>
		<string>icon.png</string>
		<key>CFBundleIcons</key>
		<dict>
			<key>CFBundlePrimaryIcon</key>
			<dict>
				<key>CFBundleIconFiles</key>
				<array>
					<string>icon-40</string>
					<string>icon-60</string>
					<string>icon-72</string>
					<string>icon-76</string>
					<string>Icon-Small</string>
					<string>Icon-Small-50</string>
				</array>
				<key>UIPrerenderedIcon</key>
				<false/>
			</dict>
		</dict>
		<key>CFBundleInfoDictionaryVersion</key>
		<string>6.0</string>
		<key>CFBundleName</key>
		<string>${PRODUCT_NAME}</string>
		<key>CFBundlePackageType</key>
		<string>APPL</string>
		<key>CFBundleShortVersionString</key>
		<string>1.0</string>
		<key>CFBundleSignature</key>
		<string>????</string>
		<key>CFBundleVersion</key>
		<string>1.0</string>
		<key>LSRequiresIPhoneOS</key>
		<true/>
		<key>UILaunchStoryboardName</key>
		<string>LaunchScreen</string>
		<key>UIRequiresFullScreen</key>
		<true/>
		<key>UIRequiredDeviceCapabilities</key>
		<array>
			<string>armv7</string>
		</array>
		<key>UISupportedInterfaceOrientations</key>
		<array>
			<string>UIInterfaceOrientationPortrait</string>
			<string>UIInterfaceOrientationLandscapeLeft</string>
			<string>UIInterfaceOrientationLandscapeRight</string>
		</array>
		<key>UISupportedInterfaceOrientations~ipad</key>
		<array>
			<string>UIInterfaceOrientationPortrait</string>
			<string>UIInterfaceOrientationPortraitUpsideDown</string>
			<string>UIInterfaceOrientationLandscapeLeft</string>
			<string>UIInterfaceOrientationLandscapeRight</string>
		</array>
		<key>UIStatusBarStyle</key>
		<string>UIStatusBarStyleLightContent</string>
		<key>UIViewControllerBasedStatusBarAppearance</key>
		<false/>
	</dict>
</plist>

図5にその結果を示します。

ステータスバーの代わりに、1本の白い線が表示されています。これは、アイコンの色を白に変更したために発生しました。 ただし、背景色はアイコンと同じ色です。 これを修正するには、ページのbackgroundColorプロパティを設定する必要があります。 また、backgroundSpanUnderStatusBarプロパティをtrueに設定する必要があります。 これは、ステータスバーの下の背景色に広がります。

<Page xmlns="http://schemas.nativescript.org/tns.xsd" backgroundSpanUnderStatusBar="true" backgroundColor="red">
	<StackLayout>
		<Label text="Tap the button" class="title"/>
		<Button text="TAP" tap="" />
		<Label text="" class="message" textWrap="true"/>
	</StackLayout>
</Page>

図6にその結果を示します。

両方のケースのサンプルプロジェクトは、次のGitHubリポジトリで利用できます： StyleStatusBariOSviaActionBar StyleStatusBariOSviaInfo.plist