アラートダイアログ【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】
標準のスタイルです。
赤色のボタンで表示されます。
複数のボタンで指定が可能なので、赤色のボタンを表示したい場合には、このスタイルを使用してください。