はじめに

NativeScript でアクションバーのカスタマイズについて整理した

TL;DR

  • NavigationButton で Android 向けに戻るボタンを配置可能
  • ActionItem でシェアボタンや削除ボタンを追加可能
  • visibility で戻るボタンやシェアボタンの表示制御が可能

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. ActionBar 単体
    2. NavigationButton
    3. ActionItem
    4. 戻るボタン、カスタムボタンの表示制御
    5. 使えるアイコン
  • まとめ
  • 参考文献
  • 環境・条件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    $ sw_vers
    ProductName: Mac OS X
    ProductVersion: 10.15.3
    BuildVersion: 19D76

    $ node -v
    v12.7.0

    $ npm -v
    6.10.3

    $ tns --version
    6.4.0

    $ grep -C1 version package.json
    "tns-ios": {
    "version": "6.4.1"
    },
    "tns-android": {
    "version": "6.4.1"
    }

    $ tns plugin
    Dependencies:
    ┌───────────────────────────────┬─────────┐
    │ Plugin │ Version │
    │ @nativescript/theme │ ^2.2.1 │
    │ @vue/devtools │ ^5.0.6 │
    │ axios │ ^0.19.2 │
    │ nativescript-background-http │ ^4.2.1 │
    │ nativescript-barcodescanner │ ^3.4.1 │
    │ nativescript-camera │ ^4.5.0 │
    │ nativescript-fingerprint-auth │ ^7.0.2 │
    │ nativescript-imagepicker │ ^7.1.0 │
    │ nativescript-permissions │ ^1.3.8 │
    │ nativescript-plugin-firebase │ ^10.4.0 │
    │ nativescript-socketio │ ^3.2.1 │
    │ nativescript-toasty │ ^1.3.0 │
    │ nativescript-vue │ ^2.4.0 │
    │ nativescript-vue-devtools │ ^1.2.0 │
    │ tns-core-modules │ ^6.0.0 │
    │ vuex │ ^3.1.1 │
    └───────────────────────────────┴─────────┘
    Dev Dependencies:
    ┌────────────────────────────────────┬─────────┐
    │ Plugin │ Version │
    │ @babel/core │ ^7.0.0 │
    │ @babel/preset-env │ ^7.0.0 │
    │ babel-loader │ ^8.0.2 │
    │ nativescript-dev-webpack │ ^1.0.0 │
    │ nativescript-vue-template-compiler │ ^2.0.0 │
    │ nativescript-worker-loader │ ~0.9.0 │
    │ node-sass │ ^4.9.2 │
    │ vue-loader │ ^15.4.0 │
    └────────────────────────────────────┴─────────┘
    • iPhone 11 Pro: iOS 13.3
    • Android HUAWEI nova lite 2: Android 9 (ビルド 9.1.0.160)

    詳細

    ActionBar 単体

    まずは素の ActionBar

    参考:

    1
    <ActionBar title="My Title" />

    iOS

    Android

    NavigationButton で Android 向けに戻るボタンを配置可能。
    ※メソッドやアイコンを変更すれば「戻るボタン」以外の使い方でも良いはず。

    参考:

    1
    2
    3
    <ActionBar title="My Title">
    <NavigationButton android.systemIcon="ic_menu_back" @tap="back"/>
    </ActionBar>

    iOS (※変化なし)

    Android

    ActionItem

    ActionItem でシェアボタンや削除ボタンを追加可能。

    参考:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <ActionBar title="My Title">
    <NavigationButton android.systemIcon="ic_menu_back" @tap="back"/>
    <ActionItem @tap="onTapShare"
    ios.systemIcon="9" ios.position="right"
    android.systemIcon="ic_menu_share" android.position="actionBar" />
    <ActionItem @tap="onTapDelete"
    ios.systemIcon="16" ios.position="right"
    text="delete" android.position="popup" />
    </ActionBar>

    iOS

    Android

    Android の 3-dots 箇所をタップすると delete という文字列がポップアップ表示される。

    戻るボタン、カスタムボタンの表示制御

    visibility で戻るボタンやカスタムボタンの表示制御が可能。

    visible で表示、collapse で非表示(hidden もたぶん非表示、違いは不明)。

    NavigationButtonvisibility="collapse" を設定すると、iOS でも戻るボタンを非表示にできる(できたはず)。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <ActionBar class="header" title="My Title">
    <NavigationButton
    android.systemIcon="ic_menu_back"
    visibility="collapse"
    />
    <ActionItem
    ios.systemIcon="13" ios.position="right"
    android.systemIcon="ic_menu_refresh" android.position="actionBar"
    visibility="visible"
    />
    </ActionBar>

    NavitScript-Vue で実装するなら以下のような感じ。この例では、外部から各ボタンの 表示/非表示 を制御するイメージとなっている。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <template>
    <ActionBar class="header" title="My Title">
    <NavigationButton
    android.systemIcon="ic_menu_back"
    :visibility="showBackBtn ? 'visible' : 'collapse'"
    @tap="back"
    />
    <ActionItem
    ios.systemIcon="13" ios.position="right"
    android.systemIcon="ic_menu_refresh" android.position="actionBar"
    :visibility="showRefreshBtn ? 'visible' : 'collapse'"
    @tap="onRefresh"
    />
    </ActionBar>
    </template>

    <script >
    export default {
    props: {
    showBackBtn: {
    type: Boolean,
    default: true,
    },
    showRefreshBtn: {
    type: Boolean,
    default: false,
    },
    },
    methods: {
    back() {
    this.$navigateBack();
    },
    onRefresh() {
    // 更新処理
    },
    },
    }
    </script>

    使えるアイコン

    アイコンに指定できる名称は公式ページにまとまっている。

    Android

    R.drawable | Android デベロッパー | Android Developers

    ※実際のアイコンは見れないので使いづらい。

    iOS

    まとめ

    • NavigationButton で Android 向けに戻るボタンを配置可能
    • ActionItem でシェアボタンや削除ボタンを追加可能

    参考文献

    関連記事