ポップアップするビューの作り方（1）

iPhoneアプリ上で、必要なときだけピッカー（UIPickerView）などを出現させてユーザー入力を受け付け、入力が済んだら引っ込ませる…という動作を実装することを考えます。
　

アクションシートを用いる方法（iOS 8では面倒）

実装法の1つとして、ピッカーなどをUIActionSheetに乗せるという方法があり、以前の記事でも触れたことがあります。しかし、iOS 8の環境ではUIActionSheet（ついでにUIAlertViewも）は deprecated となり、この方法は使えなくなってしまいました（アクションシート自体は表示されるようですが、addSubview で乗せたものは表示されなくなってしまうようです）。

代わりに、iOS 8ではUIAlertControllerという、UIActionSheetおよびUIAlertViewの後継となる新しいクラスが追加されています。UIAlertControllerにもサブビューの追加は可能であり、ピッカーなどを乗せることは可能なようですが、当然これはiOS 7以前の環境では動作しません。iOS 7以前とiOS 8の両方に対応する場合は、iOSのバージョン次第でUIActionSheetとUIAlertControllerのどちらを用いるか場合分けをする…というやや面倒な手順が必要となってしまいます。
　

ポップアップビューを自作する方法（MJPopupViewController使用）

現環境で目的のような動作を実装するためには、ポップアップビュー（必要に応じて、飛び出したり引っ込んだりするビュー）を作り、そこにピッカーなどを載せる方法の方が楽だと思います。

Xcode 6.1ではポップアップビュー作成用のライブラリなどは用意されておらず、基本的には自力実装となりますが、有志による高品質なサンプルコードなどもネット上では多数公開されているようです。中でも「MJPopupViewController」は、自分で設定したUIViewをポップアップさせることが可能であり、比較的容易に、見栄え良くカスタマイズ性の高いポップアップビューが作成可能です（下図は付属デモサンプルのスクリーンショット）。


ここでは、この使用法についてメモします。

• まず、「GitHub」からMJPopupViewControllerの一式をzipファイルとしてダウンロードします（リンク先の画面右側にある「Download ZIP」を選択）。zipファイルを解凍すると、中に様々なファイルが入っていますが、使うのは「source」フォルダに入っている以下の4ファイルです。
  • MJPopupBackgroundView.h
  • MJPopupBackgroundView.m
  • UIViewController+MJPopupViewController.h
  • UIViewController+MJPopupViewController.m

• 続いて、Xcodeで新しいプロジェクトを作成し（ここではSingle View Applicationとして作成）、先ほどの4ファイルをプロジェクトに追加します。

• 続いて、プロジェクトにxibファイルを追加します。以下のように「User Interface」の「View」を選択すると、あらかじめUIViewが配置されたxibファイルが追加されます（ここでは名前を「PopupView.xib」とします）。ここでデザインしたUIViewをポップアップさせます。

• また、このUIViewを操作するためのクラスをプロジェクトに追加します。UIViewControllerのサブクラスとして、新しいクラスファイル（.hおよび.m）を作成してプロジェクトに追加します（ここでは名前を「PopupViewController」とします）。

• 先ほどのPopupView.xibをクリックして表示させ、まず下図【1】のように「File’s Owner」をクリックします。そして、下図【2】のようにFile’s Ownerのカスタムクラスとして、先ほど作成したPopupViewControllerを設定します。

• 更に、File’s Ownerの立方体状アイコンを右クリックし、クリックしたまま、xibに配置されたUIViewへとドラッグ＆ドロップします（ドラッグ中は青線が表示）。すると下図のように「Outlets / view」というポップアップが表示されるので、viewの部分をクリックします。

• ここまでで、xibファイル側で必要な下準備は完了しているのですが、このままでは大きく真っ白なポップアップが表示されるだけですので、多少UIViewのデザインをいじってみます。まず、xibに配置されたUIViewをクリックし、下図のようにサイズ設定を「Freeform」に変更すると、UIViewのサイズを自由に変更可能になります。

• ここではUIViewのサイズを 200 x 200 に変更し、背景色を薄青にし、ラベルを貼り付けた以下のようなUIViewをポップアップさせてみます。

• あとは、ポップアップビューを呼び出すクラス（ここでは UIViewController.m とします）に、「UIViewController+MJPopupViewController.h」および、xibのUIView操作用に追加したクラスのヘッダファイルをインポートします。

#import "UIViewController+MJPopupViewController.h"
#import "PopupViewController.h" //こちらのヘッダファイル名は、人によって異なる

• そして、ポップアップビューを呼び出したい場所（例えばUIButtonタップ時のアクションなど）に、以下のコードを記述すればOKです。xibファイルからUIViewのインスタンスを生成し、それをpresentPopupViewController:メソッドでポップアップさせるだけです。またanimationType:引数を変更すると、ポップアップビューが飛び出してくる方向および引っ込む方向を色々変更することが出来ます。

PopupViewController *popUpView = [[PopupViewController alloc]initWithNibName:@"PopupView" bundle:nil];
[self presentPopupViewController:popUpView animationType:MJPopupViewAnimationSlideBottomBottom];