タグ: Tips

はじめに

iOSではUIActionControllerを使用して、ポップアップでアラートを表示したり、選択肢（アクションシート）を表示したりして、ユーザーに項目を選択させることができます。

iPhoneにおいては、アラートの表示も選択肢の表示も問題なく動作します。しかし、iPadにおいてはiPhoneと同様の実装を行うと、アラートは動作しますが、選択肢（アクションシート）の表示は落ちてしまいます。

本TipsではiPhoneとiPadでアラートとアクションシートを表示する方法について説明します。

今回作成するサンプルは以下のようなものです。

環境

Xcode：9.4.1
Swift：4.1.2

AlertControllerの使用方法

はじめに、AlertControllerの使用してアラートを表示する方法について説明します。これが基本となります。

Xcodeを起動してSingle View Appプロジェクトを作成します。

次にMain.storyboardを開いてUIButtonを1つ貼り付けます。

続いて、貼り付けたButtonのアクション接続を作成します。

名称は、buttonAlertとしました。

コードはiPhoneもiPadも同一のもので動作します。コード例を以下に示します。

①の部分でUIAlertControllerのインスタンスを作成し、②と③でOKボタンとキャンセルボタンを作成しています。

④で、①で作成したインスタンスにOKボタンとキャンセルボタンを追加し、⑤でアラートの表示をしています。詳細はコード中のコメントを参照してください。

@IBAction func buttonAlert(_ sender: Any) {
    // ①UIAlertControllerクラスのインスタンスを生成する
    // titleにタイトル, messegeにメッセージ, prefereedStyleにスタイルを指定する
    // preferredStyleにUIAlertControllerStyle.alertを指定してアラート表示にする
    let alert: UIAlertController = UIAlertController(
        title: "アラート表示",
        message: "メールを送信します。よろしいですか？",
        preferredStyle: UIAlertControllerStyle.alert)
    
    // ②OKボタンの作成
    // titleにボタンのテキストを、styleにUIAlertActionStyle.defaultを
    // handlerにボタンが押された時の処理をクロージャで実装する
    let okAction: UIAlertAction =
        UIAlertAction(
            title: "OK",
            style: UIAlertActionStyle.default,
            handler:{
                (action: UIAlertAction!) -> Void in
                print("OK")
    })
    
    // ③キャンセルボタンの作成
    // OKボタンと同様に作成
    let cancelAction: UIAlertAction =
        UIAlertAction(
            title: "キャンセル",
            style: UIAlertActionStyle.cancel,
            handler:{
                (action: UIAlertAction!) -> Void in
                print("Cancel")
    })
    
    // ④UIAlertControllerのインスタンスに作成したボタンを追加
    alert.addAction(cancelAction)
    alert.addAction(okAction)
    
    // ⑤アラートを表示
    present(alert, animated: true, completion: nil)
}

上記の実行例を以下に示します。

iPhoneでのActionSheet表示

UIAlertControllerでのアラート表示方法を理解したら、iPhoneにおける選択肢（ActionSheet）の表示方法を理解しましょう。

コード例を以下に示します。この例ではユーザーに「バスケットボール」「野球」「テニス」の選択肢を示し、選択してもらうためのアクションシートを表示します。

はじめに①の部分でUIAlertControllerのインスタンスを生成します。アラートの時との違いは preferredStyle に UIAlertControllerStyle.actionSheet を指定するという部分です。

②では選択肢を作成し、①で作成したインスタンスに追加をしています。アラートのOKボタン作成時のコードとほぼ同様です。

最後に③でアクションシートを表示します。

@IBAction func buttonAlert(_ sender: Any) {
    // ①UIAlertControllerクラスのインスタンスを生成する
    // titleにタイトル, messegeにメッセージ, prefereedStyleにスタイルを指定する
    // preferredStyleにUIAlertControllerStyle.actionSheetを指定してアクションシートを表示する
    let actionSheet: UIAlertController = UIAlertController(
        title: "選択肢を表示",
        message: "好きなスポーツを選択してください",
        preferredStyle: UIAlertControllerStyle.actionSheet)

    // ②選択肢の作成と追加
    // titleに選択肢のテキストを、styleに.defaultを
    // handlerにボタンが押された時の処理をクロージャで実装する
    actionSheet.addAction(
        UIAlertAction(title: "バスケットボール",
                      style: .default,
                      handler: {
                        (action: UIAlertAction!) -> Void in
                            print("バスケットボール")
        })
    )

    // ②選択肢の作成と追加
    actionSheet.addAction(
        UIAlertAction(title: "野球",
                      style: .default,
                      handler: {
                        (action: UIAlertAction!) -> Void in
                        print("野球")
        })
    )
    
    // ②選択肢の作成と追加
    actionSheet.addAction(
        UIAlertAction(title: "テニス",
                      style: .default,
                      handler: {
                        (action: UIAlertAction!) -> Void in
                        print("テニス")
        })
    )

    // ③アクションシートを表示
    present(actionSheet, animated: true, completion: nil)
}

上記の実行例を以下に示します。

iPadでのActionSheet表示

iPadではiPhoneと同様に実装すると落ちてしまいます。

そこで、コードを以下のように実装します。

違いは以下コードの③の部分のみです。

iPadでアクションシートを表示するには、アクションシートを表示するViewと表示位置を指定する必要があります。

Viewは popoverPresentationController?.sourceView に、表示位置は popoverPresentationController?.sourceRect に指定します。このとき表示位置をsender（つまりはアクションシートを表示するために押されたボタン）を指定することで、そのボタンから吹き出しのようにアクションシートが表示されるようになります。

@IBAction func buttonAlert(_ sender: Any) {
    // ①UIAlertControllerクラスのインスタンスを生成する
    // titleにタイトル, messegeにメッセージ, prefereedStyleにスタイルを指定する
    // preferredStyleにUIAlertControllerStyle.actionSheetを指定してアクションシートを表示する
    let actionSheet: UIAlertController = UIAlertController(
        title: "選択肢を表示",
        message: "好きなスポーツを選択してください",
        preferredStyle: UIAlertControllerStyle.actionSheet)

    // ②選択肢の作成と追加
    // titleに選択肢のテキストを、styleに.defaultを
    // handlerにボタンが押された時の処理をクロージャで実装する
    actionSheet.addAction(
        UIAlertAction(title: "バスケットボール",
                      style: .default,
                      handler: {
                        (action: UIAlertAction!) -> Void in
                            print("バスケットボール")
        })
    )

    // ②選択肢の作成と追加
    actionSheet.addAction(
        UIAlertAction(title: "野球",
                      style: .default,
                      handler: {
                        (action: UIAlertAction!) -> Void in
                        print("野球")
        })
    )
    
    // ②選択肢の作成と追加
    actionSheet.addAction(
        UIAlertAction(title: "テニス",
                      style: .default,
                      handler: {
                        (action: UIAlertAction!) -> Void in
                        print("テニス")
        })
    )

    // ③表示するViewと表示位置を指定する
    actionSheet.popoverPresentationController?.sourceView = view
    actionSheet.popoverPresentationController?.sourceRect = (sender as AnyObject).frame
    
    // ④アクションシートを表示
    present(actionSheet, animated: true, completion: nil)
}

③の部分を以下のように変更することで、デバイスを自動的に判断して実行できるようになります。このように記述すればiPhoneでもiPadでも動作させることが可能になります。

デバイスの判定については「[Tips] 使用中のデバイスを判定する」の記事を参考にしてください。

// ③表示するViewと表示位置を指定する(デバイス自動判定版)
if UIDevice.current.userInterfaceIdiom  == .pad {
    actionSheet.popoverPresentationController?.sourceView = view
    actionSheet.popoverPresentationController?.sourceRect = (sender as AnyObject).frame
}

上記の実行例を以下に示します。

ボタンのスタイルについて

最後にボタンのスタイルについて説明します。

ボタンのスタイルは以下に示す3種類を指定することができます。

必要に応じて選択するようにしましょう。