ユーザーインターフェイス / コンポーネント / アクションバー

アクションバー

ActionBarは、AndroidのActionBarおよびiOSのNavigationBarに対するNativeScriptの抽象化です。 アクティビティウィンドウの上部にあるツールバーを表し、タイトル、アプリケーションレベルのナビゲーション、およびその他のカスタムインタラクティブアイテムを持つことができます。

使い方

ActionBartitleプロパティを提供し、 1つ以上のActionItemコンポーネントと単一のNavigationButtonを使用して拡張できます。 ActionBarは完全にカスタムビューもサポートしています(後述のヒントと手法セクションを参照)。

<Page.actionBar>
	<ActionBar title="ActionBar Title" icon="">
		<NavigationButton icon="res://ic_arrow_back_black_24dp" tap="goBack" />
		<ActionBar.actionItems>
			<ActionItem icon="font://&#xf013;" class="fas" ios.position="right" tap="openSettings" />
		</ActionBar.actionItems>
	</ActionBar>
</Page.actionBar>
const frameModule = require("tns-core-modules/ui/frame");

function goBack() {
	frameModule.topmost().goBack();
}
function openSettings() {
	// implement the cusotm logic
}
exports.goBack = goBack;
exports.openSettings = openSettings;
import {topmost} from "tns-core-modules/ui/frame";

export function goBack() {
	topmost().goBack();
}
export function openSettings() {
	// implement the cusotm logic
}

アクションアイテム

ActionItemコンポーネントは、iOSおよびAndroidのプラットフォーム固有のpositionsystemIconをサポートしています。

<Page.actionBar>
	<ActionBar title="Action Items">
		<ActionItem tap="onShare"
			ios.systemIcon="9" ios.position="left"
			android.systemIcon="ic_menu_share" android.position="actionBar"></ActionItem>
		<ActionItem tap="onDelete" text="delete"
			ios.systemIcon="16" ios.position="right"
			android.position="popup"></ActionItem>
	</ActionBar>
</Page.actionBar>

NavigationButtonコンポーネントは、iOSの戻るボタンとAndroidのナビゲーションボタンの共通の抽象化です。

iOS固有: ナビゲーションボタンのデフォルトテキストは、前のページのタイトルです。 iOSでは、戻るボタンはナビゲーションに明示的に使用されます。 このボタンは前のページに移動し、この動作をオーバーライドするようなタップイベントを記述することはできません。 ActionBarの左側にボタンを配置し、タップイベントを処理させる(スライドアウトを表示するなど)場合は、 ActionItemios.position="left"を記述してください。 ios.systemIconの値は "UIBarButtonItem.SystemItem" 列挙からの数字です。

アイコンアイコン
0Done12Search
1Cancel13Refresh
2Edit14Stop
3Save15Camera
4Add16Trash
5FlexibleSpace17Play
6FixedSpace18Pause
7Compose19Rewind
8Reply20FastForward
9Action21Undo
10Organize22Redo
11Bookmarks23PageCurl

Android固有: Androidでは、ナビゲーションボタン内にテキストを設定できません。 アイコンプロパティを使用して画像を設定できます(例:~\images\nav-image.png または res:\\ic_nav)。 また、android.systemIconを使用して、Androidで使用可能なシステムアイコンの1つを設定できます。 この場合、NavigationButtonタップイベントのデフォルトの動作はないため、実行されるコールバック関数を手動で定義する必要があります。 android.systemIconおよびios.systemIconプロパティを使用して、システムアイコンを表示できます。 システムアイコンを定義すると、アイコンとテキストプロパティの代わりにシステムアイコンが使用されます。 android.systemIconの値は、組み込みのAndroidシステムアイコンのリソース名に対応しています。 Androidの記述可能な完全なリストについては、Android Developer Site にアクセスしてください。

デモソース

スタイリング

ActionBarのスタイルは、背景色(background-color)と色(color)のプロパティのみを設定できます。 または、nativescript-theme-coreを使用して、テーマごとにデフォルトのスタイルを使用できます。 ActionItemiconプロパティは、 font://プレフィックスの付いたアイコンフォントを使用できます。 このプレフィックスを設定することにより、新しい画像が生成され、ActionItemのアイコンリソースとして設定されます。 この機能を使用する場合、デバイスのdpiに基づいて生成された画像のサイズを計算するfont-sizeを指定する必要があります。

<Page.actionBar>
	<ActionBar>
		<!-- Explicitly hiding the NavigaitonBar to prevent the default one on iOS-->
		<NavigationButton text="Back" visibility="collapsed" />

		<ActionBar.actionItems>
			<!-- Using the icon property and Icon Fonts -->
			<ActionItem position="left" icon="font://&#xf0a8;" class="fas" tap="goBack"/>

			<!-- Creating custom views for ActionItem-->
			<ActionItem ios.position="right">
				<!-- <GridLayout rows="*" columns="*" width="100"> -->
					<Button row="0" col="0" text="Theme" />
				<!-- </GridLayout> -->
			</ActionItem>
		</ActionBar.actionItems>
	</ActionBar>
</Page.actionBar>

注釈: iOSでは、colorプロパティはタイトルとアクションアイテムの色に影響します。 Androidでは、colorプロパティはタイトルテキストのみに影響します。 ただし、Androidテーマ(App_Resources\Android\values\styles.xml内)にactionMenuTextColorアイテムを追加することにより、 アクションアイテムのテキストのデフォルトの色を設定できます。

デモソース


ヒントと手法

Android向けアプリアイコンの設定

アプリケーションアイコンはAndroidにのみ設定できます。 デフォルトでは、アプリケーションアイコンは非表示になっています。 android.iconVisibilityプロパティをalwaysに設定することで表示できます。

<Page.actionBar>
	<ActionBar title="App Icon Demo" android.icon="res://icon" android.iconVisibility="always"></ActionBar>
</Page.actionBar>

アクションアイテムの非表示

ActionItemvisibilityプロパティを使用して、アイテムを動的に表示および非表示にできます。可視性にバインディングを使用することもできます。

アプリが「editing」モードのときにさまざまなアクションアイテムを表示する例を次に示します。

	<Page xmlns="http://www.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
	<Page.actionBar>
		<ActionBar title="Action Items Visibility">
		<ActionItem tap="onEdit" ios.systemIcon="2" android.systemIcon="ic_menu_edit" ios.position="right"
			visibility="{{ isEditing ? 'collapse' : 'visible' }}"/>
		<ActionItem tap="onSave" ios.systemIcon="3" android.systemIcon="ic_menu_save" ios.position="right"
			visibility="{{ isEditing ? 'visible' : 'collapse' }}"/>
		<ActionItem tap="onCancel" ios.systemIcon="1" android.systemIcon="ic_menu_close_clear_cancel"
			visibility="{{ isEditing ? 'visible' : 'collapse' }}"/>
	</ActionBar>
	</Page.actionBar>
</Page>
const fromObject = require("tns-core-modules/data/observable").fromObject;

function onNavigatingTo(args) {
	const page = args.object;
	page.bindingContext = fromObject({
		isEditing: false
	});
}
exports.onNavigatingTo = onNavigatingTo;

function onEdit(args) {
	const page = args.object.page;
	page.bindingContext.set("isEditing", true);
}
exports.onEdit = onEdit;

function onSave(args) {
	const page = args.object.page;
	page.bindingContext.set("isEditing", false);
}
exports.onSave = onSave;

function onCancel(args) {
	const page = args.object.page;
	page.bindingContext.set("isEditing", false);
}
exports.onCancel = onCancel;
import { EventData, fromObject } from "tns-core-modules/data/observable";
import { ActionItem } from "tns-core-modules/ui/action-bar";
import { Page } from "tns-core-modules/ui/page";
import { GestureEventData } from "tns-core-modules/ui/gestures";

export function onEdit(args: GestureEventData) {
	const page = (<ActionItem>args.object).page;
	page.bindingContext.set("isEditing", true);
}

export function onSave(args: GestureEventData) {
	const page = (<ActionItem>args.object).page;
	page.bindingContext.set("isEditing", false);
}

export function onCancel(args: GestureEventData) {
	const page = (<ActionItem>args.object).page;
	page.bindingContext.set("isEditing", false);
}

アクションバーを表示しない

PageactionBarHiddenプロパティを設定するか、 Frame"actionBarVisibility" プロパティを設定することにより、 ActionBarの可視性を明示的に制御できます。

<Page actionBarHidden="{{ abHidden }}" xmlns="http://www.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
	<Page.actionBar>
		<ActionBar title="ActionBar"></ActionBar>
	</Page.actionBar>
</Page>
const Observable = require("tns-core-modules/data/observable").Observable;
let value = false;

function onNavigatingTo(args) {
	const page = args.object;
	const vm = new Observable();
	vm.set("abHidden", value);
	page.bindingContext = vm;
}
exports.onNavigatingTo = onNavigatingTo;

function onTap(args) {
	const page = args.object.page;
	const vm = page.bindingContext;
	value = !value;
	vm.set("abHidden", value);
}
exports.onTap = onTap;
import { EventData, Observable } from "tns-core-modules/data/observable";
import { Button } from "tns-core-modules/ui/button";
import { Page } from "tns-core-modules/ui/page";
import { GestureEventData } from "tns-core-modules/ui/gestures";

let value: boolean = false;

export function onNavigatingTo(args: EventData) {
	const page = <Page>args.object;
	const vm = new Observable();
	vm.set("abHidden", value);
	page.bindingContext = vm;
}

export function onTap(args: GestureEventData) {
	const page = (<Button>args.object).page;
	const vm = page.bindingContext;
	value = !value;
	vm.set("abHidden", value);
}

Androidでは、アプリケーションバーがデフォルトで表示され、アプリケーションの名前がタイトルとして表示されます。 ナビゲーションボタンは、アプリケーションで明示的に定義されている場合にのみ表示されます。

iOSでは、アプリケーションバーが空の場合(たとえば、タイトルやアクションアイテムが定義されていない場合)、最初のページで非表示になり、ナビゲーションボタンをホストするためのナビゲーション後に自動的に表示されます。 ActionBarが空でない場合(たとえば、タイトルまたはアクションアイテムが定義されている場合)、最初のページにも表示されます。

カスタムタイトルビュー

ActionItemテキストの代わりにレンダリングされるカスタムビューを設定できます。以下の例は、アイテム内の個別のラベルにロードする方法を示しています。

<Page.actionBar>
	<ActionBar title="test">
		<StackLayout orientation="horizontal"
			ios:horizontalAlignment="center"
			android:horizontalAlignment="left">
			<Image src="res://icon" class="action-image"></Image>
			<Label text="ativeScript" class="action-label"></Label>
		</StackLayout>
	</ActionBar>
</Page.actionBar>

SideDrawerボタンの作成

この例は、「SideDrawerボタンを表示する」機能を実装する方法を示しています。

<Page.actionBar>
	<ActionBar title="SideDrawer Button">
		<android>
			<NavigationButton icon="res://menu" tap="showSideDrawer" />
		</android>
		<ios>
			<ActionItem icon="res://menu" ios.position="left" tap="showSideDrawer" />
		</ios>
	</ActionBar>
</Page.actionBar>

Androidの場合、ActionItem(s)ActionBarの右側に表示されるため、この例ではNavigationButtonを使用しています。

iOSの場合、このコードは、位置が左に設定された通常のActionItemを追加します。 iOSでNavigationButtonをサイドドロワーボタンとして使用することはできません。 その機能は、アプリケーション内で常に「戻る」として使用されます。

注釈: <android>および<ios>タグは、プラットフォーム固有の要素を定義するためにXML内で使用されます。
重要: プラットフォーム固有のタグ(<android>および<ios>)は、Angularベースでないプロジェクトでのみ機能します。

コードビハインドによるActionBarの作成

ActionBarは動的に作成および制御できます。 プロパティnavigationButtonを使用すると、デフォルトのナビゲーションボタン(存在する場合)を上書きできます。 ページ上のアクションバーを明示的に表示/非表示するには、現在のページのactionBarHiddenプロパティを使用します。

const ActionBar = require("tns-core-modules/ui/action-bar").ActionBar;
const NavigationButton = require("tns-core-modules/ui/action-bar").NavigationButton;

function onLoaded(args) {
	const page = args.object;

	const newActionBar = new ActionBar();
	newActionBar.title = "Code-Behind ActionBar";
	const newNavigaitonButton = new NavigationButton();
	// for ios
	newNavigaitonButton.text = "Go Back";
	// for android
	newNavigaitonButton.android.systemIcon = "ic_menu_back";
	// or newNavigaitonButton.icon = "~\images\nav-image.png";
	newActionBar.navigationButton = newNavigaitonButton;

	page.actionBar = newActionBar;
	page.actionBarHidden = false;
}
exports.onLoaded = onLoaded;
import { EventData } from "tns-core-modules/data/observable";
import { ActionBar, NavigationButton } from "tns-core-modules/ui/action-bar";
import { Page } from "tns-core-modules/ui/page";

export function onLoaded(args: EventData) {
	const page = <Page>args.object;

	const newActionBar = new ActionBar();
	newActionBar.title = "Code-Behind ActionBar";
	const newNavigaitonButton = new NavigationButton();
	newNavigaitonButton.text = "Go Back";
	newActionBar.navigationButton = newNavigaitonButton;

	page.actionBar = newActionBar;
	page.actionBarHidden = false;
}

iOS固有:ボタンのデフォルトのテキストは前のページのタイトルです。 これは、「タイトルテキストの設定」で示しているようにtextプロパティを設定することで変更できます。 iOSでは、戻るボタンはナビゲーションに明示的に使用されます。 前のページに移動し、この動作をオーバーライドするtapイベントを処理できません。 ActionBarの左側にボタンを配置し、タップイベントを処理する(スライドを表示するなど)場合は、 ActionItemios.position="left"を使用してください。

Android固有:Androidでは、ナビゲーションボタン内にテキストを設定できません。 iconプロパティを使用して画像を設定できます(例: ~\images\nav-image.pngまたは、res:\\ic_nav)。 android.systemIconAndroidで使用可能なシステムアイコンを設定することもできます。 この場合、NavigationButtonのtapイベントにデフォルトの動作はありません。 実行されるコールバック関数を手動で定義する必要があります。

プロパティ

ActionBarプロパティ

名前 タイプ 説明
title string アクションバーのタイトルを取得または設定します。
titleView View タイトルビューを取得または設定します。"-"に設定するとタイトルがカスタムビューに置き換えられます。

ActionItemプロパティ

名前 タイプ 説明
text string アクション項目のテキストを取得または設定します。
icon string アクション項目のアイコンを取得または設定します。 ローカル画像(~/)、リソース(res://)およびアイコンフォント(fonts://)をサポート。
ios.position enum: "left", "right" アイテムの位置を設定します(デフォルト値は left です)。
android.position enum: "actionBar", "popup", "actionBarIfRoom" アイテムの位置を設定します(デフォルト値は actionBar です)。
ios.systemIcon number iOSのみ UIBarButtonSystemIcon列挙の使用時にアクションアイテムのアイコンを設定します。
android.systemIcon string Androidのみが リソースアイコンへのパスを設定します(Androidシステムのdrawableリストを参照)

NavigationButtonプロパティ

名前 タイプ 説明
text string アクション項目のテキストを取得または設定します。
icon string アクション項目のアイコンを取得または設定します。

イベント

名前 説明
loaded ビューがロードされたときに生成されます。
unloaded ビューがアンロードされるときに生成されます。
layoutChanged ビューのレイアウト境界がレイアウト処理のために変更されたときに生成されます。

APIリファレンス

名前 タイプ
ActionBar Module
ActionBar Class
ActionItem Class
ActionItems Class
NavigationButton Class

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

ANDROID IOS
android.widget.Toolbar UIView

ActionBar機能に関する詳細な記事

入門

コアコンセプト

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

ツール

ハードウェアアクセス

プラグインの開発

リリース

アプリテンプレート

パフォーマンスの最適化

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

ガイド

サポートを受ける

トラブルシューティング

Siedkick