はじめに

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

TL;DR

  • NavigationButton で Android 向けに戻るボタンを配置可能
  • ActionItem でシェアボタンや削除ボタンを追加可能
  • visibility で戻るボタンやシェアボタンの表示制御が可能
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  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 もたぶん非表示、違いは不明)。

    NavigationButton に visibility="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 でシェアボタンや削除ボタンを追加可能

    参考文献

    関連記事

    この記事が参考になった方
    ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
    欲しいもの / Wish list