Ionicでモバイルアプリを作ろう！(18)ActionSheet（BottomSheet）を表示する

クロスプラットフォーム対応のモバイルアプリ開発フレームワークであるIonicの使い方を紹介していきます。

今回はActionSheet（BottomSheet）の実装を紹介します。

ActionSheet（BottomSheet）

ActionSheet（BottomSheet）は、ユーザーに機能選択したり起動する他のアプリを選択してもらう際に、画面下部ににゅっと表示するダイアログです。iOSではActionSheet、AndroidではBottomSheetと呼ばれることが多いかと思います。

左側がiOSレイアウト、右側がAndroidレイアウトです。

このようなシートを表示するために、IonicではずばりActionSheetというモジュールが用意されており、ActionSheetControllerを用いて生成することができます。

以下に上記のようなActionSheetの表示をするメソッドを示します。

showSheet() {
  let sheet = this.actionSheetCtrl.create({
    title: 'Choice',
    buttons: [
      {
        text: 'Preview',
        handler: () => {
          console.log('Preview clicked');
        }
      },
      {
        text: 'Share',
        handler: () => {
          console.log('Share clicked');
        }
      },
      {
        text: 'Cancel',
        role:'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }
    ]
  });
 
  sheet.present();
}

ActionSheetController#createを用いてActionSheetのインスタンスを取得し、ActionSheetのpresentメソッドを呼んであげればOKです。createメソッドの引数はoptionで、どのようなシートを生成するかの定義を行います。

ポイントはbuttonsに指定する配列ですね。配列の各要素であるbuttonオブジェクトは、テキストを指定するtext、ボタンが押された時のコールバックメソッドを指定するhandlerをプロパティとして持つことができます。他にアイコンを指定するiconプロパティ、キャンセル機能などを指定するroleプロパティがあります。