ActionBarは、AndroidのActionBar
およびiOSのNavigationBar
に対するNativeScriptの抽象化です。
アクティビティウィンドウの上部にあるツールバーを表し、タイトル、アプリケーションレベルのナビゲーション、およびその他のカスタムインタラクティブアイテムを持つことができます。
ActionBarはtitleプロパティを提供し、 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://" 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のプラットフォーム固有のpositionとsystemIconをサポートしています。
<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>
android.position
によって次の方法で位置を設定します。
ios.position
によって次の方法で位置を設定します。
NavigationButtonコンポーネントは、iOSの戻るボタンとAndroidのナビゲーションボタンの共通の抽象化です。
値 | アイコン | 値 | アイコン |
---|---|---|---|
0 | Done | 12 | Search |
1 | Cancel | 13 | Refresh |
2 | Edit | 14 | Stop |
3 | Save | 15 | Camera |
4 | Add | 16 | Trash |
5 | FlexibleSpace | 17 | Play |
6 | FixedSpace | 18 | Pause |
7 | Compose | 19 | Rewind |
8 | Reply | 20 | FastForward |
9 | Action | 21 | Undo |
10 | Organize | 22 | Redo |
11 | Bookmarks | 23 | PageCurl |
~\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を使用して、テーマごとにデフォルトのスタイルを使用できます。
ActionItemのiconプロパティは、
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://" 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>
App_Resources\Android\values\styles.xml
内)にactionMenuTextColorアイテムを追加することにより、
アクションアイテムのテキストのデフォルトの色を設定できます。
アプリケーションアイコンはAndroidにのみ設定できます。 デフォルトでは、アプリケーションアイコンは非表示になっています。 android.iconVisibilityプロパティをalwaysに設定することで表示できます。
<Page.actionBar>
<ActionBar title="App Icon Demo" android.icon="res://icon" android.iconVisibility="always"></ActionBar>
</Page.actionBar>
ActionItemのvisibilityプロパティを使用して、アイテムを動的に表示および非表示にできます。可視性にバインディングを使用することもできます。
アプリが「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);
}
PageのactionBarHiddenプロパティを設定するか、 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ボタンを表示する」機能を実装する方法を示しています。
<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をサイドドロワーボタンとして使用することはできません。 その機能は、アプリケーション内で常に「戻る」として使用されます。
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;
}
Android固有:Androidでは、ナビゲーションボタン内にテキストを設定できません。
iconプロパティを使用して画像を設定できます(例: ~\images\nav-image.png
または、res:\\ic_nav
)。
android.systemIconAndroidで使用可能なシステムアイコンを設定することもできます。
この場合、NavigationButtonのtapイベントにデフォルトの動作はありません。
実行されるコールバック関数を手動で定義する必要があります。
名前 | タイプ | 説明 |
---|---|---|
title |
string |
アクションバーのタイトルを取得または設定します。 |
titleView |
View | タイトルビューを取得または設定します。"-"に設定するとタイトルがカスタムビューに置き換えられます。 |
名前 | タイプ | 説明 |
---|---|---|
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リストを参照) |
名前 | タイプ | 説明 |
---|---|---|
text |
string |
アクション項目のテキストを取得または設定します。 |
icon |
string |
アクション項目のアイコンを取得または設定します。 |
名前 | 説明 |
---|---|
loaded |
ビューがロードされたときに生成されます。 |
unloaded |
ビューがアンロードされるときに生成されます。 |
layoutChanged |
ビューのレイアウト境界がレイアウト処理のために変更されたときに生成されます。 |
名前 | タイプ |
---|---|
ActionBar | Module |
ActionBar | Class |
ActionItem | Class |
ActionItems | Class |
NavigationButton | Class |
ANDROID | IOS |
---|---|
android.widget.Toolbar | UIView |