← 記事一覧へ

アラートダイアログ【Swift】

Swift

■はじめに

アプリを作成していると、ダイアログを表示したい場合がある。 このダイアログには複数種類があるが、ここでは以下の種類のダイアログを表示する方法を記載します。

・画面中央に表示される2択のダイアログ（削除の確認などでよく見ますね。） ・画面中央に表示される複数の選択肢のあるダイアログ ・画面下部に表示される2択のダイアログ ・画面下部に表示される複数の選択肢のあるダイアログ

◾️画面中央に表示される2択のダイアログ

以下のメソッドを呼び出す事で、2択のダイアログを表示する事ができる。 実際に使用する場合には、タイトルや、メッセージの表示する値、OKやキャンセルボタンを押下した際の処理などを 記載する必要があります。

func showDialog() {
    let alert: UIAlertController = UIAlertController(title: "アラート", message: "ダイアログの内容", preferredStyle: UIAlertController.Style.alert)

    let defaultAction: UIAlertAction = UIAlertAction(title: "OK", style: UIAlertAction.Style.default, handler:{ (action: UIAlertAction!) -> Void in
        // OKボタン押下時の処理
    })

    let cancelAction: UIAlertAction = UIAlertAction(title: "キャンセル", style: UIAlertAction.Style.cancel, handler:{ (action: UIAlertAction!) -> Void in
        // キャンセルボタン押下時の処理
    })

    alert.addAction(cancelAction)
    alert.addAction(defaultAction)

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

◾️画面中央に表示される複数の選択肢のあるダイアログ

「画面中央に表示される2択のダイアログ」で使用した方法で、設定するボタンを増やす事で 簡単に、複数の選択したのあるダイアログが表示される。 以下の例では、4つの選択肢を用意している。

func showDialog() {
    let alert: UIAlertController = UIAlertController(title: "アラート", message: "ダイアログの内容", preferredStyle: UIAlertController.Style.alert)

    let defaultAction1: UIAlertAction = UIAlertAction(title: "OK1", style: UIAlertAction.Style.default, handler:{ (action: UIAlertAction!) -> Void in
        // OK1ボタン押下時の処理
    })

    let defaultAction2: UIAlertAction = UIAlertAction(title: "OK2", style: UIAlertAction.Style.default, handler:{ (action: UIAlertAction!) -> Void in
        // OK2ボタン押下時の処理
    })

    let defaultAction3: UIAlertAction = UIAlertAction(title: "OK3", style: UIAlertAction.Style.default, handler:{ (action: UIAlertAction!) -> Void in
        // OK3ボタン押下時の処理
    })

    let cancelAction: UIAlertAction = UIAlertAction(title: "キャンセル", style: UIAlertAction.Style.cancel, handler:{ (action: UIAlertAction!) -> Void in
        // キャンセルボタン押下時の処理
    })

    alert.addAction(cancelAction)
    alert.addAction(defaultAction1)
    alert.addAction(defaultAction2)
    alert.addAction(defaultAction3)

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

◾️画面下部に表示される2択のダイアログ

ダイアログを画面下部に表示するように変更するには、「UIAlertController」の初期化の第三引数 の「preferredStyle」を「UIAlertController.Style.actionSheet」に変更するだけでいい。

func showDialog() {
    let alert: UIAlertController = UIAlertController(title: "アラート", message: "ダイアログの内容", preferredStyle: UIAlertController.Style.actionSheet)

    let defaultAction: UIAlertAction = UIAlertAction(title: "OK", style: UIAlertAction.Style.default, handler:{ (action: UIAlertAction!) -> Void in
        // OKボタン押下時の処理
    })

    let cancelAction: UIAlertAction = UIAlertAction(title: "キャンセル", style: UIAlertAction.Style.cancel, handler:{ (action: UIAlertAction!) -> Void in
        // キャンセルボタン押下時の処理
    })

    alert.addAction(cancelAction)
    alert.addAction(defaultAction)

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

◾️画面下部に表示される複数の選択肢のあるダイアログ

上記を全て読んで頂ければ、もう言う事はないですね。 以下で、複数の選択肢のある画面下部のダイアログが表示できます。 以下の例では、4つの選択肢を用意しています。

func showDialog() {
    let alert: UIAlertController = UIAlertController(title: "アラート", message: "ダイアログの内容", preferredStyle: UIAlertController.Style.actionSheet)

    let defaultAction1: UIAlertAction = UIAlertAction(title: "OK1", style: UIAlertAction.Style.default, handler:{ (action: UIAlertAction!) -> Void in
        // OK1ボタン押下時の処理
    })

    let defaultAction2: UIAlertAction = UIAlertAction(title: "OK2", style: UIAlertAction.Style.default, handler:{ (action: UIAlertAction!) -> Void in
        // OK2ボタン押下時の処理
    })

    let defaultAction3: UIAlertAction = UIAlertAction(title: "OK3", style: UIAlertAction.Style.default, handler:{ (action: UIAlertAction!) -> Void in
        // OK3ボタン押下時の処理
    })

    let cancelAction: UIAlertAction = UIAlertAction(title: "キャンセル", style: UIAlertAction.Style.cancel, handler:{ (action: UIAlertAction!) -> Void in
        // キャンセルボタン押下時の処理
    })

    alert.addAction(cancelAction)
    alert.addAction(defaultAction1)
    alert.addAction(defaultAction2)
    alert.addAction(defaultAction3)

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

◾️ダイアログで使用するボタンのスタイル

ここまでで、ダイアログの表示方法を記載しました。 ここでは、ダイアログで使用するボタンのスタイルに関して記載します。

ボタンのスタイルは三種類あります。 それぞれのスタイルと、説明を以下に記載します。

【default】 標準のスタイルです。 青色のボタンで表示されます。 複数のボタンで指定が可能なので、スタイルに拘りがなければ、このスタイルを使用してください。

【cancel】 太文字のスタイルです。 青色のボタンで表示されます。 複数のボタンで指定する事ができません。

画面下部に表示する場合のダイアログでは、最下部に固定で表示されます。

【destructive】 標準のスタイルです。 赤色のボタンで表示されます。 複数のボタンで指定が可能なので、赤色のボタンを表示したい場合には、このスタイルを使用してください。

← 記事一覧へ戻る