【入門】UIAlertControllerの使い方

iOSアプリでよく利用するUIAlertControllerの使い方について説明します。

プロジェクト作成

準備としてまずはiOSプロジェクトを作成しましょう。

プロジェクト作成の詳細はこちらにあるので必要であれば、参考にしてください!

ios-app-init iOSアプリプロジェクト作成手順

UIAlertController表示の導線作り

まずは UIAlertController を表示するための導線を作っていきましょう。

今回はボタンを押した時に UIAlertController を表示するようにしたいと思います。

そのためまずはボタンを配置していきますが、詳細な UIButton の使い方については別の記事で解説しています。参考にしてみてください。

【入門】ストーリーボードを使ったUIButtonのチュートリアル

ボタンアクションを定義

まずは UIButton をストーリーボード上に配置します。

今回はButtonのタイトルを「Alertを表示する」としておきました。

ボタンの表示

その次はアクションを定義するために UIButton に対してCtrl+ドラッグで ViewController へと引っ張っていきます。

今回はボタンアクションの関数名を tappedButton としました。

ボタン押下の関数定義

それではきちんとボタンアクションが取れているかを確認するために print 関数を使ってみましょう。

@IBAction func tappedButton(_ sender: Any) {
    print("show alert")
}

コンソールに「show alert」と表示されれば成功です!

ログ結果

UIAlertControllerを表示させる

UIAlertController を表示させる準備が整ったので表示させていきましょう!

UIAlertController には表示させる形式がアラートとアクションシートの2つがあります。

アラートアクションシート
alertaction_sheet

モグモグさん

アラートの表示方法から解説するよ!

UIAlertControllerを表示する(アラート)

それでは早速 UIAlertController をアラートで表示していきましょう。

まずはソースコードから見ていきましょう。

@IBAction func tappedButton(_ sender: Any) {
  // UIAlertControllerの生成
  let alert = UIAlertController(title: "タイトル", message: "メッセージ", preferredStyle: .alert)

  // アクションの生成
  let yesAction = UIAlertAction(title: "はい", style: .default) { action in
      print("tapped yes")
  }

  let noAction = UIAlertAction(title: "いいえ", style: .destructive) { action in
      print("tapped no")
  }

  let cancelAction = UIAlertAction(title: "キャンセル", style: .cancel) { action in
      print("tapped cancel")
  }

  // アクションの追加
  alert.addAction(yesAction)
  alert.addAction(noAction)
  alert.addAction(cancelAction)

  // UIAlertControllerの表示
  present(alert, animated: true, completion: nil)
}

この状態でビルドをすると次のようなアラートが表示されます。

build_with_alert

それでは1つずつ説明していきます。

この行では UIAlertController の生成を行っておりタイトルとメッセージもこのタイミングで行います。

また preferredStyle.alert を指定することでアラート形式で表示させるようにしています。

let alert = UIAlertController(title: "タイトル", message: "メッセージ", preferredStyle: .alert)

次ではアラートに表示させるアクションの定義をしています。

まずは yesAction を見ていきましょう。

let yesAction = UIAlertAction(title: "はい", style: .default) { action in
    print("tapped yes")
}

title を「はい」として styledefault としています。

title はその名の通りアクションのタイトルとなります。

style とはそのアクションがどのようなアクションなのかを見た目でユーザーに知らせることができます。

style には3つの状態を指定できます。

  • .default
    • 通常の選択肢。destructiveのアクションがある場合には肯定的な選択肢となる場合が多い。例:はい, OK
  • .destructive
    • 否定的な選択肢。アクション名が赤字となる。例:いいえ, NO
  • .cancel
    • アラート自体を取り止めるような選択肢。例:キャンセル

次は生成したアクションを UIAlertController に追加しています。

alert.addAction(yesAction)
alert.addAction(noAction)
alert.addAction(cancelAction)

今回は3つだったため縦に3つのアクションが並んでいましたが、2つの場合だと横並びになります。

build_with_alert_line

最後は UIViewControllerpresent 関数でアラート表示させています。

present(alert, animated: true, completion: nil)

アクションシートを表示

次はアクションシート形式の表示のさせ方です。

基本的な使い方はアラートとほとんど同じです。

preferredStyleactionSheet に変更させましょう。

@IBAction func tappedButton(_ sender: Any) {
  // UIAlertControllerの生成
  let alert = UIAlertController(title: "タイトル", message: "メッセージ", preferredStyle: .actionSheet)

  // アクションの生成
  let yesAction = UIAlertAction(title: "はい", style: .default) { action in
      print("tapped yes")
  }

  let noAction = UIAlertAction(title: "いいえ", style: .destructive) { action in
      print("tapped no")
  }

  let cancelAction = UIAlertAction(title: "キャンセル", style: .cancel) { action in
      print("tapped cancel")
  }

  // アクションの追加
  alert.addAction(yesAction)
  alert.addAction(noAction)
  alert.addAction(cancelAction)

  // UIAlertControllerの表示
  present(alert, animated: true, completion: nil)
}
build_with_action_sheet

このようなアクションシートが表示されれば成功です!

最後に

UIAlertController は多くのアプリで利用されています。

基本的な使い方を覚えていきましょう!

コメントを残す

メールアドレスが公開されることはありません。