iOSでアラートの外側をタップしてUIAlertControllerを閉じる方法

はじめに

iOS開発を始めたばかりの方にとって、UIAlertControllerの理解と実装は少し難しく感じることがあります。この記事では、ユーザーがアラートボックスの外側をタップしたときにアラートを閉じる（dismissする）方法を解説します。

本記事のデモでは、UIAlertControllerクラスを使用します。これは、表示したいメッセージや選択可能なアクションを設定して、アラートやアクションシートを構成するためのクラスです。必要なアクションとスタイルを設定した後、present(_:animated:completion:)メソッドを使ってアラートを表示します。UIKitはアラートやアクションシートをアプリのコンテンツ上にモーダル形式で表示します。

より詳しい情報については、Apple公式ドキュメント（UIAlertController）をご参照ください。

それでは、実際の実装手順を見ていきましょう。

Step 1：プロジェクトの作成

Xcodeを開き、Single View Applicationを新規作成します。プロジェクト名は「UIAlertSample」とします。

Step 2：ボタンの配置とIBActionの作成

Main.storyboardにボタンを1つ追加し、@IBActionを作成します。名前は「showAlert」とします。

@IBAction func showAlert(_ sender: Any) { }

基本的な動作としては、ボタンをタップするとアラートが表示され、アラートの外側をタップするとアラートが閉じるというものです。

Step 3：UIAlertオブジェクトの作成

ボタンのアクション「showAlert」内で、まず以下のようにUIAlertオブジェクトを作成します。

let uialert = UIAlertController(title: "WELCOME", message: "Welcome to my tutorials, tap outside to dismiss the alert", preferredStyle: .alert)

Step 4：アラートの表示とセレクタの追加

アラートを表示し、その表示完了時のcompletionブロック内で、以下のようにタップ検出用のセレクタを追加します。

self.present(uialert, animated: true, completion:{
    uialert.view.superview?.isUserInteractionEnabled = true
    uialert.view.superview?.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(self.dismissOnTapOutside)))
})

Step 5：セレクタ関数の追加

セレクタとして呼び出される関数を追加します。この関数が呼ばれるとアラートが閉じられます。

@objc func dismissOnTapOutside(){
    self.dismiss(animated: true, completion: nil)
}

Step 6：アプリを実行して動作確認

以上で実装は完了です。アプリをビルドして実行し、ボタンをタップしてアラートを表示した後、アラートの外側をタップしてアラートが閉じることを確認しましょう。

完全なコード

参考までに、ViewControllerの完全なコードを示します。

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction func showAlert(_ sender: Any) {
        let uialert = UIAlertController(title: "WELCOME", message: "Welcome to my tutorials, tap outside to dismiss the alert", preferredStyle: .alert)

        self.present(uialert, animated: true, completion:{
            uialert.view.superview?.isUserInteractionEnabled = true
            uialert.view.superview?.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(self.dismissOnTapOutside)))
        })
    }

    @objc func dismissOnTapOutside(){
        self.dismiss(animated: true, completion: nil)
    }
}

仕組みの解説

この実装のポイントは、アラート表示完了後のcompletionブロック内で、アラートビューのsuperview（スーパービュー）に対してisUserInteractionEnabledをtrueに設定し、UITapGestureRecognizerを追加している点です。デフォルトではアラートの背後にあるビューはユーザーの操作を受け付けないため、明示的にインタラクションを有効化する必要があります。こうすることで、アラートの外側（背景の暗転部分）のタップが検出され、dismissOnTapOutsideメソッドが呼び出されてアラートが閉じられる仕組みになっています。