ユーザーインターフェイス / コンポーネント / 複数種類の画面のサポート

複数種類の画面のサポート

モバイルアプリケーションは、画面サイズやフォームファクターが異なるさまざまなデバイスで実行されます。 NativeScriptは、現在のデバイスの画面サイズ、プラットフォーム、および向きに基づいてロードされるさまざまなファイル(.js、.css、.xmlなど)を定義する方法を提供します。 このアプローチは、Androidのマルチスクリーンサポート にいくぶん似ています。 ファイルがロードされるときに尊重されるファイル内に追加できる修飾子のセットがあります。 ファイル名は次のようになります。

<file-name>[.<qualifier>]*.<extension>

NativeScriptは、3つの異なるファイル修飾子をサポートしています。

重要: 画面のサイズと向きの修飾子は、NativeScript Coreアプリケーションでのみサポートされています。 これらの修飾子はAngularと互換性がありません。 プラットフォーム修飾子は、NativeScript CoreとNativeScript Angularの両方のアプリケーションで使用できます。

プラットフォーム修飾子

例(プラットフォーム固有のファイル):

プラットフォーム修飾子はビルド時に実行され、その他は実行時に実行されます。 たとえば、androidプラットフォーム用にビルドする場合、app.ios.cssファイルは考慮されません。 逆に、特定の画面サイズのデバイスでアプリケーションが起動された直後に、画面サイズ修飾子が考慮されます。

画面サイズ修飾子

画面サイズ修飾子のすべての値は、密度非依存ピクセル(density independent pxels)(dp)です。 つまり、画面の物理的な寸法に対応しています。 前提は、1インチあたりおおよそ160 dpであることです。 たとえば、Androidガイドラインによると、デバイスの小さい方の寸法が600dp(約3.75インチ)を超える場合、おそらくタブレットです。

例(タブレットと電話用の個別のXMLファイル):

注釈: 画面サイズ修飾子はAngularではサポートされていません。

オリエンテーション修飾子

注釈: オリエンテーション修飾子はAngularではサポートされていません。

ページの読み込み時には、すべての修飾子が考慮されます。ただし、デバイスの向きを変更してもページの再読み込みはトリガーされず、現在のページは変更されません。
入門

コアコンセプト

ユーザーインターフェース

ツール

ハードウェアアクセス

プラグインの開発

リリース

アプリテンプレート

パフォーマンスの最適化

フレームワークモジュール

ガイド

サポートを受ける

トラブルシューティング

Siedkick