ユーザーインターフェイス / コンポーネント

NativeScriptには、モバイルアプリケーションのユーザーインターフェイスを構築するために使用できる一連のユーザーインターフェイスビュー（ウィジェットとも呼ばれます）が付属しています。これらのビューのほとんどは、各プラットフォームの対応するネイティブビューをラップすると同時に、それを操作するための共通APIを提供します。たとえば、Buttonビューは、Androidでは"android.widget.Button" 、 iOSでは"UIButton"をレンダリングします。

アプリケーションのレイアウトを定義することも、アプリケーション開発の重要な部分です。 NativeScriptで使用可能なさまざまなレイアウトコンテナの詳細については、NativeScriptレイアウトシステムを参照してください。

ヒント： nativeViewプロパティを使用して、実行時に各ビューの基になるネイティブウィジェットにアクセスできます。

<view>.nativeView

プラットフォーム固有のウィジェットの機能を使用する場合、ネイティブウィジェットにアクセスすると便利です。以下に、各ビューの基礎となるネイティブコンポーネントに関する情報を示します。

各コンポーネントには、拡張Viewクラスから利用できる一連の共通メソッドが付属しています。さまざまな測定および配置の方法をカバーする専用のドキュメントのセクションは、こちらを参照してください。

Button

Buttonウィジェットは、tapイベントに反応する標準のボタンウィジェットを提供します。

ボタンAndroid ボタンiOS

ネイティブコンポーネント

ANDROID	IOS
android.widget.Button	UIButton

Label

Labelウィジェットは、読み取り専用テキストを表示するテキストラベルを提供します。

ラベルAndroid ラベルiOS

ネイティブコンポーネント

ANDROID	IOS
android.widget.TextView	UILabel

TextField

TextFieldウィジェットは、編集可能な単一行のテキストフィールドを提供します。

テキストフィールドAndroid テキストフィールドiOS

ネイティブコンポーネント

ANDROID	IOS
android.widget.EditText	UITextField

TextView

TextViewウィジェットは、編集可能な複数行のテキストビューを提供します。

これを使用して、複数行のテキストを表示し、テキスト編集を実装できます。

テキストビューAndroid テキストビューiOS

ネイティブコンポーネント

ANDROID	IOS
android.widget.EditText	UITextView

SearchBar

SearchBarウィジェットは、検索クエリを入力し、検索プロバイダーに要求を送信するためのユーザーインターフェイスを提供します。

検索バーAndroid 検索バーiOS

ネイティブコンポーネント

ANDROID	IOS
android.widget.SearchView	UISearchBar

Switch

Switchウィジェットには、2つの状態から選択できる2値トグルスイッチがあります。

スイッチAndroid スイッチiOS

ネイティブコンポーネント

ANDROID	IOS
android.widget.Switch	UISwitch

Slider

Sliderウィジェットは、構成可能な範囲内の数値を選択するために使用できるスライダーを提供します。

スライダーAndroid スライダーiOS

ネイティブコンポーネント

ANDROID	IOS
android.widget.SeekBar	UISlider

Progress

Progressウィジェットは、操作の進行状況を視覚的に示すインジケータです。操作の現在の進行状況を表すバーが表示されます。

プログレスAndroid プログレスiOS

ネイティブコンポーネント

ANDROID	IOS
android.widget.ProgressBar(indeterminate = false)	UIProgressView

ActivityIndicator

ActivityIndicatorウィジェットは、タスクが進行中であることを示す視覚的なスピナーインジケーターです。

アクティビティインジケータAndroid アクティビティインジケータiOS

ネイティブコンポーネント

ANDROID	IOS
android.widget.ProgressBar(indeterminate = true)	UIActivityIndicatorView

Image

Imageウィジェットには画像が表示されます。 "ImageSource"またはURLから画像をロードできます。

画像Android 画像iOS

ネイティブコンポーネント

ANDROID	IOS
android.widget.ImageView	UIImageView

ListView

ListViewは、垂直にスクロールするリストでアイテムを表示します。 "itemTemplate"を設定して、リスト内の各アイテムの表示方法を指定できます。

リストビューAndroid リストビューiOS

ネイティブコンポーネント

ANDROID	IOS
android.widget.ListView	UITableView

HtmlView

HtmlViewは、HTMLコンテンツを含むビューを表します。静的なHTMLコンテンツのみを表示する場合は、WebViewの代わりにこのコンポーネントを使用します。

HtmlビューAndroid HtmlビューiOS

ネイティブコンポーネント

ANDROID	IOS
android.widget.TextView	UITextView

WEBビュー

WebViewはWebページを表示します。 URLから、または前後にナビゲートして、ページを読み込むことができます。

WebビューAndroid WebビューiOS

ネイティブコンポーネント

ANDROID	IOS
android.webkit.WebView	WKWebView

Tabビュー

TabViewコントロールを使用すると、タブナビゲーションを実装できます。

TabビューAndroid TabビューiOS

ネイティブコンポーネント

ANDROID	IOS
androidx.viewpager.widget.ViewPager	UITabBarController

SegmentedBar

SegmentedBarコントロールを使用すると、離散選択を実装できます。

セグメントバーAndroid セグメントバーiOS

ネイティブコンポーネント

ANDROID	IOS
android.widget.TabHost	UISegmentedControl

日付ピッカー

DatePickerコントロールを使用すると、日付を選択できます。

日付ピッカーAndroid 日付ピッカーiOS

ネイティブコンポーネント

ANDROID	IOS
android.widget.DatePicker	UIDatePicker

タイムピッカー

TimePickerコントロールを使用すると、時刻を選択できます。

タイムピッカーAndroid タイムピッカーiOS

ネイティブコンポーネント

ANDROID	IOS
android.widget.TimePicker	UIDatePicker

リストピッカー

ListPickerコントロールを使用すると、リストから値を選択できます。

リストピッカーAndroid リストピッカーiOS

ネイティブコンポーネント

ANDROID	IOS
android.widget.NumberPicker	UIPickerView

ダイアログ

ダイアログモジュールを使用すると、ダイアログウィンドウを作成して表示できます。

ダイアログAndroid ダイアログiOS

NativeScript UIの概要

NativeScript UIは、NativeScriptを使用して、iOSとAndroid向けのリッチなUIアプリケーションを実装可能にする、無料の(*)コンポーネントのセットです。 Progress NativeScript UIは、iOSおよびAndroidをターゲットとするネイティブに実装されたコンポーネントの上に構築されています。各コンポーネントは、npmjs.com から個別のパッケージとしてダウンロードできます。

(*)コンポーネントは無料ですが、オープンソースではなく、独自のコードです。詳細については、コンポーネントのライセンスをお読みください。コードベースへの貢献に興味がある場合は、利用可能な貢献オプションをお読みください。

以下の各コンポーネントについて読み続けるか、GitHubのNativeScript UIサンプルアプリを使用して、試してみてください。

コンポーネント

RadSideDrawer

[ ドキュメント ] [ サンプルコード ] [ npmからダウンロード ]

SideDrawerコンポーネント（コードではRadSideDrawerとして知られ、nativescript-ui-sidedrawerパッケージを通じて配布されます）を使用すると、一般的なアプリケーションパターンに従い、ナビゲーションUIまたは共通設定を含む非表示ビューを表示できます。

SideDrawerでできること：

テキストやアイコンからスライダーやフィルターまで、スライドパネル内にコンテンツを埋め込みます。
画面の4つの側面のいずれかからスライドするようにコントロールを設定します。
すぐに使える洗練された多数のトランジションモードから選択できます。
サイドドロワーの状態をプログラムで制御します。
ナビゲーションバーまたはアクションバーのカバーを選択します。

サイドドロワーiOS サイドドロワーAndroid

RadListView

[ ドキュメント ] [ サンプルコード ] [ npmからダウンロード ]

注釈： プロフェッショナルなListViewコンポーネントは、コアNativeScriptモジュールに組み込まれているListViewとは異なります。以下にリストされている高度な機能を利用する必要がある場合は、プロフェッショナルなリストビューを使用してください。

ListViewコンポーネント（コードではRadListViewと呼ばれ、nativescript-ui-listviewパッケージを通じて配布されます）は、アイテムのリストが使用されるシナリオに関連する最も必要な機能を提供する仮想化リストコンポーネントです。

以下の機能が含まれます：

プルダウンしてリフレッシュします。
ロードオンデマンド。
スワイプして実行します。
ヘッダーとフッター。
ユーザーがスクロールするときのアイテムアニメーション、および選択可能な4つのすぐに使えるエフェクト。
Linear、Grid、Staggeredレイアウトモード、水平および垂直スクロール方向を可能にします。
単一および複数の選択モード。
多くのジェスチャのスマートなデフォルト：長押しでの選択、スワイプでの特別なアクションの実行、長押しとドラッグでのアイテムの並べ替え、スワイプでのリストの更新、必要な場合にのみより多くのアイテムの読み込み。

リストビューiOS リストビューAndroid

RadCalendar

[ ドキュメント ] [ サンプルコード ] [ npmからダウンロード ]

カレンダーコンポーネント（コードではRadCalendarとして知られ、nativescript-ui-calendarパッケージを通じて配布されます）は、高度にカスタマイズ可能なネイティブカレンダーの抽象化であり、統合されたAPIを公開します。

四つの異なる表示モード - 、Week、Month、MonthNames、Year。
Single、Multiple、Rangeによる日付選択。
インラインイベントとポップオーバーイベント。
スタイリングとセルのカスタマイズオプションに対する広範な制御。

RadChart

[ ドキュメント ] [ サンプルコード ] [ npmからダウンロード ]

Chartコンポーネントには、デカルト（コードではRadCartesianChartとして知られる）とパイ（コードではRadPieChartとして知られる）の2種類のチャートが含まれ、nativescript-ui-chartパッケージを通じて配布されます。折れ線、エリア、棒、円グラフなどを介して人間が読める方法でデータを視覚化するために使用できます。

以下の機能が含まれます：

受け入れられるデータ型の幅広い配列：視覚化するチャートに応じた数値、文字列、またはDateTimeデータ。
スムーズな操作とズーム。
さまざまなチャートシリーズオプション：
- 折れ線(Line)、エリア(Area)、スプラインエリア(Spline Area)チャートによる傾向の表示。
- データのセットをBarチャートと比較します。
- 円(Pie)グラフとドーナツ(Donut)グラフで比率を示します。スプライン(Spline)グラフとスプラインエリア(Spline Area)グラフを使用して、曲線近似の使用を必要とするデータをプロットします。
- 散布図(Scatter)シリーズとバブル(Bubble)シリーズを使用して値間の関係を表示し、さらに金融(Financial)シリーズとインジケーターを使用します。
注釈、ツールチップ、およびトラックボール。
複数の軸のサポート。

チャートiOS チャートAndroid

RadAutoCompleteTextView

[ ドキュメント ] [ サンプルコード ] [ npmからダウンロード ]

AutoCompleteコンポーネント（コードではRadAutoCompleteTextViewとして知られ、nativescript-ui-autocompleteパッケージを通じて配布されます）は、ユーザーが入力する文字に基づいてユーザーに推奨オプションを提供します。以下を含む、簡単なカスタマイズとデータ管理のための複数の手段を提供します。

サジェストモード - ドロップダウンリストに候補を表示するか、テキスト入力に一度に1つの候補を表示するか、両方を組み合わせて表示するかを選択できます。
StartsWithおよびContains完了モード。
2つの異なる表示モード：1つのアイテムのみを選択できるPlane、および複数の候補を選択できるTokens（それぞれがトークンとして表示されます）。
トークンレイアウトモード - 折り返しおよび水平。

チャートiOS チャートAndroid

RadDataForm

[ ドキュメント ] [ サンプルコード ] [ npmからダウンロード ]

DataFormコンポーネント（コードではRadDataFormとして知られ、nativescript-ui-dataformパッケージを通じて配布されます）は、提供されたデータオブジェクトのパブリックメンバーに基づいてモバイルフォームを構築するための簡単で多目的なアプローチを提供します。

DataFormを使用してできること：

1行のコードでフォームをデータオブジェクトにバインドします。
15を超える組み込みエディターを利用します（または独自のカスタムエディターを提供します）。
エディターのグループを作成し、それらを折りたたんでスタイルを設定できるようにします。
ReadOnlyモードでフォームを表示します。
組み込みのデータ検証を使用して、収集されたデータを制御します - 提供されている検証ツールを使用するか、カスタム検証ツールを作成します。

データフォームiOS データフォームAndroid

RadGauge

[ ドキュメント ] [ サンプルコード ] [ npmからダウンロード ]

Gaugeコンポーネント（コードではRadRadialGaugeとして知られ、nativescript-ui-gaugeパッケージを通じて配布されます）を使用すると、上限と下限の範囲内の値の現在のステータスを表示したり、目標への進捗状況を示したり、変動するメトリックのサマリーを表示したりできます。ゲージコンポーネントを使用すると、次のことができます。

1つ以上のRadialScaleインスタンスをゲージに追加します。
Barインジケーターを使用して値の範囲を視覚化するか、Needleインジケーターを使用して特定の値を指すようにします。
すぐに使用できるアニメーションを含めると、スムーズな移行効果が得られます。

ゲージiOS ゲージAndroid

さらなるリソース

SDKサンプルアプリ

GitHubで公開されているProgress NativeScript UI入門アプリケーションを調べることができます。これには、コンポーネントのさまざまな使用例が含まれています。アプリケーションの実行方法の詳細については、READMEを参照してください。

AppStore / PlayStoreサンプルアプリ

NativeScriptおよびProgress NativeScript UIのネイティブ側を最大限に活用したい場合は、公式のサンプルNativeScriptアプリケーションを参照してください。ソースコードはこのGitHubリポジトリにあります。 AppStore またはPlayStoreからアプリを取得することで、デバイスでアプリがどのように機能するかを簡単に確認できます。

フィードバック

あなたのフィードバックは高く評価され、Progress NativeScript UIの開発に直接影響します。

専用のフィードバックGitHubリポジトリに問題とフィードバックを送信できます。

入門

コアコンセプト

技術概要
モジュール
アーキテクチャ

ライフサイクル
ナビゲーション
入れ子のナビゲーション
データバインディング
イベント
プラグインの使用
ネイティブAPIへのアクセス
メモリー管理
マルチスレッドモデル
プロパティシステム
ユーティリティー
CommonJSモジュール
プロジェクト構造
エラー制御
Androidランタイム
- 概要
- 必要条件
- 入門
  - Hello Worldアプリ
  - プロジェクト構造
  - モジュール
  - 入れ子タイプ
- メタデータ
  - メタデータ概要
  - APIアクセス
  - TypeScript定義ファイル生成
- マーシャリング
  - データ変換（マーシャリング）
  - JavaScript→Java
  - JavaScript→Kotlin
  - JavaJava→Script
  - Kotlin→JavaScript
- デバッグ
  - デバッグ
  - ビルドツールのデバッグ
  - Androidランタイムのデバッグ
- 高度な項目
  - 実行フロー
  - アプリとアクティビティの拡張
  - Gradleへの介入
  - MarkingMode:Noneによる最適化
  - カスタムフラグ
  - メモリ制御
  - Android StudioプロジェクトによるAndroidランタイムのデバッグ
  - V8ヒープスナップショット
- Binding-generator
  - 概要
  - クラスとインターフェースの拡張
  - 拡張の動作
  - 落とし穴
iOSランタイム
- 概要
- 必要要件
- Hello Worldアプリ
- マーシャリング
- 制限
- カスタムフラグ
- タイプ
  - Objective-Cクラス
  - Objective-C
  - Objective-C
  - Objective-C
  - C Functions
  - C Structures
  - C Enums
  - Cグローバル変数
  - Cポインタ
  - Cファンクションポインタ
  - ランタイムタイプ
- How-To
  - XCodeによるiOSランタイムのデバッグ
  - iOSランタイムのDSYMパッケージの取得と使用
  - Objective-Cクラスのサブクラス化
  - AppInspector
  - バックグラウンドでの実行

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

ツール

トランスパイラ
Visual Studio Code用のNativeScript拡張
アプリIDを変更する
Androidエミュレータの設定
iOSアプリ拡張
iOS WatchOSアプリケーション
公開
- iOS用の起動画面とアイコンの作成
- iOS向けの公開
- Android用の起動画面とアイコンの作成
- Android向けの公開
- Android ABI Split
- Android App Bundle
テスト
- 単体テスト
- End To Endのテスト
  - 概要
  - 入門
  - 特徴
  - カスタマイズ
  - CI(継続的インテグレーション)
  - トラブルシューティング
  - 参考文献
デバッグ
- デバッグ
- Chrome DevToolsによるデバッグ
CLI
- NativeScript CLI
- クラウド
  - Tns Cloud Setup
- デバイス
- 環境設定
  - Tns Setup
- 一般
- Lib管理
  - Tns plugin add
  - Tns plugin create
  - Tns plugin install
  - Tns plugin remove
  - Tns plugin update
  - Tns plugin build
  - Tns plugin
- プロジェクト
  - 構成
    - Tns install
    - Tns platform add
    - Tns platform clean
    - Tns platform remove
    - Tns platform update
    - Tns platform
    - Tns prepare
    - Tns update
    - Tns generate
    - リソース
      - Tns resources update
      - Tns resources generate icons
      - Tns resources generate splashes
  - 作成
    - Tns create
  - テスト
    - Tns build android
    - Tns preview
    - Tns build ios
    - Tns build
    - Tns debug android
    - Tns debug ios
    - Tns debug
    - Tns deploy
    - Tns run android
    - Tns run ios
    - Tns run
    - Tns test android
    - Tns test init
    - Tns test ios
    - Tns test
- 公開
  - Tns appstore upload
  - Tns appstore
  - Tns publish ios
  - Tns publish

ハードウェアアクセス

地理的位置データ
デバイスカメラを使用する

プラグインの開発

プラグインリファレンス
構築
デバッグ
複合コンポーネントを使用したUIプラグインの構築
カスタムコンポーネントを使用したUIプラグインの構築
CocoaPodを使用したプラグインの構築
プラグインでのNativeScriptテーマの実装
プラグインの品質を保証する
単体テスト
プラグインUIテスト
Androidプラグインインフラストラクチャ
iOSでネイティブライブラリを使用する方法

リリース

変更点
破壊的な変更
アップグレード手順
最新のコードの実行
NativeScriptコミュニティ

アプリテンプレート

テンプレート
テンプレートを作成する

パフォーマンスの最適化

Webpackでスクリプトをバンドルする
素早く起動するアプリを構築する
Androidでの画像の最適化

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

アプリケーション
アプリの設定
色
接続
コンソール
Observable
ObservableArray
VirtualArray
データの取得
ファイルシステム
FPSメーター
HTTP
イメージソース
プラットフォーム
タイマー
トレースモジュール
XMLパーサ

ガイド

サポートを受ける

トラブルシューティング

Siedkick

ユーザーインターフェイスウィジェットのコンポーネント

Button

Label

TextField

TextView

SearchBar

Switch

Slider

Progress

ActivityIndicator

Image

ListView

HtmlView

WEBビュー

Tabビュー

SegmentedBar

日付ピッカー

タイムピッカー

リストピッカー

ダイアログ

NativeScript UIの概要

コンポーネント

RadSideDrawer

RadListView

RadCalendar

RadChart

RadAutoCompleteTextView

RadDataForm

RadGauge

さらなるリソース

SDKサンプルアプリ

AppStore / PlayStoreサンプルアプリ

フィードバック