ユーザーインターフェイス / テーマ

NativeScriptアプリのCSSテーマ

NativeScriptのスタイリングインフラストラクチャにより、Web上のBootstrapのようなフレームワークを使用するのと同じように、ネイティブアプリケーション用にCSSテーマを作成して使用することができます。

NativeScriptプロジェクトは、任意のプロジェクトに追加できるコアテーマを提供します。 テーマには、明るい色と暗い色の2つの配色と、エレガントなユーザーインターフェイスをすばやく構築するのに役立つ一連の便利なクラス名が含まれています。

インストール

公式のNativeScriptテンプレートにはすべて、NativeScriptコアテーマがあらかじめパッケージ化されており、すぐに使用できるため、手動でインストールする必要はありません。 何らかの理由でテーマがプリインストールされていないアプリを使用している場合は、次のコマンドで追加できます。

npm install nativescript-theme-core --save

あなたのapp.cssファイルは、あなたのアプリでテーマを使用するためにCSSルール@importが必要です。これは次のセクションで学びます。

配色

NativeScriptコアテーマには、明るい色と暗い色の2つの標準的な配色が含まれています。Android（左）とiOS（右）での外観は次のとおりです。

明暗の配色

明るい配色を使用するには、app.cssファイルの先頭に次のコード行を追加します。

@import '~nativescript-theme-core/css/core.light.css';

暗い配色を使用するには、app.cssに次のコード行を追加します。

@import '~nativescript-theme-core/css/core.dark.css';
ヒント： 暗い配色を使用する場合は、次のことを確認してください。
  • "page"クラス名を適用して、アプリのテキストが適切に表示されるようにします。
  • アプリのステータスバーの色を変更します。
  • Androidで暗い親テーマを使用するには、App_Resources\Android\values[-v21]フォルダのstyle.xmlファイル内にある "parent"属性からLightを削除します。（例えば、Theme.AppCompat.Light.NoActionBar は Theme.AppCompat.NoActionBarになります）

また、NativeScriptコアテーマに含まれる11のその他の配色のいずれかを使用することもできます。 これを行うには、app.cssファイルを、次のインポートのいずれかを使用するように変更します。

@import '~nativescript-theme-core/css/aqua.css';
@import '~nativescript-theme-core/css/blue.css';
@import '~nativescript-theme-core/css/brown.css';
@import '~nativescript-theme-core/css/forest.css';
@import '~nativescript-theme-core/css/grey.css';
@import '~nativescript-theme-core/css/lemon.css';
@import '~nativescript-theme-core/css/lime.css';
@import '~nativescript-theme-core/css/orange.css';
@import '~nativescript-theme-core/css/purple.css';
@import '~nativescript-theme-core/css/ruby.css';
@import '~nativescript-theme-core/css/sky.css';
ヒント： この画像は、iOSとAndroidの13の配色をすべて示しており、どの配色がアプリに適しているかを判断するのに役立ちます。

クラス名

NativeScriptコアテーマには、アプリケーションのスタイルをすばやく設定するために使用できるさまざまなCSSクラス名が含まれています。クラス名とその機能の完全なリストを以下に示します。

Headings

次の見出しクラス名を使用して、Web上の要素<h1>または<h2>要素を使用するのと同じように、見出しを作成できます。

これらのクラス名を使用する方法の例をいくつか示します。

<Label class="h1" text="This is a big heading"></Label>
<Label class="h6" text="This is a small heading"></Label>
見出しios 見出しAndroid

Text

アプリケーションで使用するテキストの表示を変更するために、以下のユーティリティクラス名を使用できます。

フォント

NativeScriptコアテーマは、アプリの開発に使用するベースフォントファミリを変更しません。ただし、テーマは一連のフォント関連のクラス名を提供します。

フォントiOS フォントAndroid

Padding と Margin

アプリケーション内のUIコンポーネントの間隔を制御するために、多くのクラス名を使用できます。 クラス名の最初のセットを使用すると、特定のUIコンポーネントにマージンまたはパディングをすばやく追加できます。

クラス名は、margin/padding - top/bottom/left/right - 値 の規則に従います。 たとえば、<Button class = "mt-2">はmargin-topが2のボタンをレンダリングし、 <Button class = "pb-5">はpadding-bottomが5のボタンをレンダリングします。 以下は利用可能なクラス名の完全なリストと、それらが出力するルールです。

これらの各ルールでは、「m」を「p」と交換してパディングを適用できます。 これらのルールは、0、2、5、10、15、20、25、30の各値で使用できます。したがって、m-r-0およびm-r-2は有効なクラス名ですが、 m-r-8はそうではありません。

仕切り線

仕切り線は、ユーザーインターフェイスの領域を分離する一般的な方法です。 NativeScriptには2つのクラス名が用意されており、空の<StackLayout>要素に適用して高さが 1 の単純な仕切りを作成できます。

ユーティリティ

NativeScriptコアテーマは、アプリケーションのUIコンポーネントに適用できるユーティリティクラス名のセットを提供します。

コンテキストカラー

NativeScriptコアテーマに含まれているいくつかのユーティリティクラスを使用して、色で意味を伝えることができます。

ページ

NativeScriptコアテーマには、ページUIコンポーネントに適用する単一のクラス名が含まれています。

ActionBar

NativeScriptコアテーマには、ActionBar UIコンポーネントに適用するいくつかのクラス名が含まれています。

ヒント： さまざまなActionBarクラス名を使用して、ActionBar UIコンポーネントを実際に使用しなくても、ActionBarのような外観を作成できます。 たとえば、この方法は、モーダルページ で使用する場合に便利です。 
<GridLayout rows="auto" columns="75,*,75" class="action-bar p-10">
	<Button text="Close" class="text-left action-item" row="0" col="0"></Button>
	<Label text="My Modal" class="text-center action-bar-title" row="0" col="1"></Label>
</GridLayout>

ボタン

NativeScriptテーマには、アプリケーションのボタンの外観を変更するための幾つかのクラス名が含まれています。

警告： デフォルトでは、iOSはScrollViewコントロール内で使用されるボタンを強調表示する前に遅延を使用します。 したがって、<ScrollView>の子である<Button>要素にbtn-activeクラス名を適用するときは注意してください。 詳細については、この Stack Overflowスレッドを参照してください。

フォーム

次のフォーム関連のクラス名を使用して、NativeScriptアプリのフォームの外観を改善できます。

フォーム内の個々のフォームフィールドを表示する方法はいくつかあります。以下のクラス名のリストを参照し、実際に動作させる中で、実行時のクラス名を確認してください。

以下に、さまざまなフォームコントロールの表示オプションを試してみることのできるフォームを示します。

<StackLayout class="form">

	<!-- Option 1: An input with no label, and a bottom border -->
	<StackLayout class="input-field">
		<TextField hint="Option 1" class="input" />
		<StackLayout class="hr-light"></StackLayout>
	</StackLayout>

	<!-- Option 2: An input with a label on top, and a bottom border -->
	<StackLayout class="input-field">
		<Label text="Option 2" class="label font-weight-bold m-b-5" />
		<TextField class="input" />
		<StackLayout class="hr-light"></StackLayout>
	</StackLayout>

	<!-- Option 3: An label and input—positioned side by side -->
	<GridLayout class="input-field input-sides" rows="auto, auto" columns="*,*">
		<Label text="Option 3" class="label font-weight-bold" row="0" col="0" />
		<TextField class="input right" row="0" col="1" />
		<StackLayout class="hr-light" row="1" colSpan="2"></StackLayout>
	</GridLayout>

	<!-- Option 4: An input with a simple border and no label -->
	<TextField hint="Option 4" class="input input-border" />

	<!-- Option 5: An input with a rounded border and no label -->
	<TextField hint="Input rounded" class="input input-rounded m-t-10" />

</StackLayout>
フォームios フォームAndroid
ヒント： NativeScriptコアテーマは、スタイリングが無効なTextFieldコンポーネントを処理します。 TextFieldを無効にするには、isEnabled属性をfalseに設定します。 例： <TextField class="input" isEnabled="false"></TextField>

画像

NativeScriptコアテーマには、画像の外観を変更するためのCSSクラス名がいくつか用意されています。

注釈： border-radiusは、明示的heightとwidthが設定されている場合のみ指定できます。
画像ios 画像Android

リストビュー

ListViewは、モバイルアプリの一般的なUIコンポーネントであり、NativeScriptコアテーマは一連のクラス名を提供してリストビューを美しく見せます。

リストビューios リストビューAndroid

プログレスバーとアクティビティインジケーター

次のクラス名を使用して、NativeScriptコアテーマのカラースキームをProgressおよびActivityIndicator UIコンポーネントに適用できます。

進行状況とアクティビティインジケーターios 進行状況とアクティビティインジケーターAndroid

SideDrawers(横からスライドするメニュー)

SideDrawersは、NativeScriptアプリにナビゲーションを実装する一般的な方法です。 NativeScriptコアテーマには、NativeScript UIコンポーネントスイートの一部である無料で使用できる RadSideDrawerのスタイル設定に役立つクラス名が含まれています。

注釈： 以下に表示されるUIスニペットは、RadSideDrawer内のdrawerContentに配置する必要があります。 アプリ内でドロワーを構成する方法の詳細については、コントロールのドキュメントを参照してください。

最初の2つのSideDrawersクラス名は、SideDrawers内のコンテンツの配置を制御します。

スライダー

NativeScriptコアテーマには、Slider UIコンポーネントのスタイルを設定するためのクラス名が含まれています。

スライダーios スライダーAndroid

スイッチ

NativeScriptコアテーマには、Switch UIコンポーネントのスタイル設定用のクラス名も含まれています。

スイッチios スイッチAndroid

タブビュー

NativeScriptコアテーマには、TabView UIコントロールのスタイルを設定するためのクラス名が含まれています。

タブビューios タブビューAndroid

SASSの使用

NativeScriptコアテーマはSASSで記述されており、（オプションで）テーマの.scssファイルを直接使用できます。 SASSを使用すると、テーマのSASS変数を使用してアプリの外観を変更するなど、CSSでは不可能な方法でテーマをカスタマイズできます。

利用を始めるにあたっては、最初にアプリにSASSコンパイラ（node-sass または dart-sass）があることを確認してください。

npm install node-sass --save-dev

新しいプロジェクトでは、SASSが事前に有効化されたテンプレートを使用できます。 公式にサポートされているテンプレートの完全なリストは、App Templates GitHubリポジトリ にあります。

tns create my-new-project --template tns-template-drawer-navigation-ts

SASSをセットアップして使用する準備ができたら、次にテーマの.scssファイルを自分のファイルにインポートする必要があります。 アプリで次のファイルを作成することから始めます。

. ├── _app-common.scss ├── _app-variables.scss ├── app.android.scss └── app.ios.scss

その後、次のコードをapp.android.scssファイルに貼り付けます。

// Import app variables
@import 'app-variables';

// Import the theme’s main ruleset - both index and platform specific.
@import '~nativescript-theme-core/scss/index';
@import '~nativescript-theme-core/scss/platforms/index.android';

// Import common styles
@import 'app-common';

// Place any CSS rules you want to apply only on Android here

そして、次のコードをapp.ios.scssファイルに追加します。

// Import app variables
@import 'app-variables';

// Import the theme’s main ruleset - both index and platform specific.
@import '~nativescript-theme-core/scss/index';
@import '~nativescript-theme-core/scss/platforms/index.ios';

// Import common styles
@import 'app-common';

// Place any CSS rules you want to apply only on iOS here

次の内容で_app-variables.scssを作成します。

// Import the theme’s variables. If you’re using a color scheme
// other than “light”, switch the path to the alternative scheme,
// for example '~nativescript-theme-core/scss/dark'.
@import '~nativescript-theme-core/scss/light';

// Customize any of the theme’s variables here, for instance $btn-color: red;

最後に、次のコードを_app-common.scssファイルに貼り付けます。

// Place any CSS rules you want to apply on both iOS and Android here.
// This is where the vast majority of your CSS code goes.

このアプローチの利点は、テーマのSASS変数を直接カスタマイズできることです。 プラットフォームごとにアプリのスタイルを変える必要がある場合は、iOS固有のコードとAndroid固有のコード用に個別のファイルを設定することもできます。

カスタム.scssファイルを使用する

NativeScript AngularプロジェクトでSASSを使用しており、.scss特定のコンポーネント用のカスタムファイルがある場合は、 以下のサンプルコードスニペットに示すように、コンポーネントのtypescriptファイル内のstyleUrlsで、.scssファイルへのパスを参照する必要があります。例えば：

ファイル構造：

. ├── custom.scss ├── custom.css └── app.component.ts

component.ts

import { Component } from "@angular/core";

@Component({
selector: "ns-app",
templateUrl: "app.component.html",
styleUrls:["./custom.scss"]
})
export class AppComponent { }

ステータスバーの考慮事項

NativeScriptコアテーマを使用する場合、ステータスバーで使用する色を変更して、アプリケーションの残りの部分と一致させることができます。

iOS

iOSでは、ステータスバーの色を次の2つの値のいずれかに設定できます。 UIBarStyleDefault: デフォルトの黒いテキストを使用します。 UIBarStyleBlack:白いテキストを使用する代替オプションです。 NativeScriptコアテーマの目的のために、iOSでステータスバーの色を変更する必要があるのは、暗い配色を使用している場合のみです。 もし必要であれば、ステータスバーの色をUIBarStyleBlackに変更する方法に関するドキュメントを参照してください。

アンドロイド

Android APIレベル21+（Lollipop以上）を使用すると、好きな色を使用するようにステータスバーを設定できます。 NativeScriptでこれを行うには、app/App_Resources/values/colors.xmlファイルを見つけ、 選択した配色に基づいて適切な色を使用するようにns_primaryDarkの色を更新します。

カラー名NS_PRIMARYDARK値
Light#F8F8F8
Dark#303030
Aqua#00caab
Blue#3d5afe
Brown#795548
Forest#006968
Grey Dark#5c687c
Purple#8130ff
Lemon#ffea00
Lime#aee406
Orange#f57c00
Ruby#ff1744
Sky#30bcff

さらに、明るいカラースキームを使用する場合は、app.tsファイル（プレーンJavaScriptをコーディングする場合はapp.js）に次のコードを含めます。 このコードはAndroidのSYSTEM_UI_FLAG_LIGHT_STATUS_BARフラグを設定します。 これにより、ステータスバーのすべてのアイコンが明るい背景で見える色を使用するようになります。

import * as application from "tns-core-modules/application";
import * as platform from "tns-core-modules/platform";
declare var android: any;

if (platform.isAndroid && platform.device.sdkVersion >= "21") {
	application.android.on(application.AndroidApplication.activityStartedEvent, function() {
		let window = application.android.startActivity.getWindow();
		let decorView = window.getDecorView();
		decorView.setSystemUiVisibility(android.view.View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
	})
};

// Your application.run() call follows here.
var application = require("tns-core-modules/application");
var platform = require("tns-core-modules/platform");

if (platform.isAndroid && platform.device.sdkVersion >= "21") {
	application.android.on(application.AndroidApplication.activityStartedEvent, function () {
		var window = application.android.startActivity.getWindow();
		var decorView = window.getDecorView();
		decorView.setSystemUiVisibility(android.view.View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
	});
};

// Your application.run() call follows here.

アンインストール

NativeScriptコアテーマをアプリケーションから削除する場合は、次のコマンドを使用して削除できます。

npm uninstall nativescript-theme-core --save

このコマンドは、package.jsonファイル内の依存関係としてコアテーマを削除します。

寄稿

NativeScriptコアテーマはオープンソースで、GitHubのhttps://github.com/NativeScript/themeで入手できます。問題と貢献は大歓迎です！

入門
コアコンセプト
ユーザーインターフェース
ツール
ハードウェアアクセス
プラグインの開発
リリース
アプリテンプレート
パフォーマンスの最適化
フレームワークモジュール
ガイド
サポートを受ける
トラブルシューティング
Siedkick
NativeScriptドキュメントのライセンス