[Swift3]PopupDialogでカッコよくモーダル表示してみた

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
ライブラリを表す画像

ライブラリのラの字も知らなかったほどのiPhoneアプリ開発初心者が、頑張ってライブラリを使ってみようというシリーズ。

今回は、手軽なコーディングでスタイリッシュなモーダル画面を表示することができる「PopupDialog」を使ってみた。

導入方法(CocoaPods)

Podfileに以下の行を追加し、ターミナルでpod install。対応OSはiOS8.0以降とのこと。

※CocoaPodsの導入方法はこちら、CocoaPodsの使用方法はこちらの記事を参照。

まずは基本的なダイアログを作る

UIButtonを配置して、以下のソースを貼り付けるだけ。

これだけで以下のような動作を実装できる。

ダイアログに好きなUI部品を配置する

ダイアログでただ選択肢をタップさせるだけでなく、テキスト入力をさせたりしたい場合は自作ビューコントローラーをPopupDialogに渡せば良い。

xibファイルを作る

普段ビューコントローラーを追加する要領で、UIViewControllerのサブクラスのファイルを追加。この時「Also create XIB file」に忘れずにチェックを入れる。

プロジェクトにファイルを追加する画像

ここは普段通り

「Also create XIB file」にチェックを入れる画像

「Also create XIB file」にチェックを入れる

xibファイルにUI部品を配置する

作成したxibファイルを編集する。この際、制約の設定(特に画面の高さ)をしっかりと行う必要がある。

基本的には、最上部と最下部の部品について「画面上端からの距離」「画面下端からの距離」を設定した上で他の部品の制約を設定すれば上手くいくはず。
適切に制約が設定されず画面の高さが確定しないと、ポップアップに表示した際に画面が潰れてしまう。

xibファイルを編集する画像

xibファイルにUI部品を配置していく

コーディング

先ほどのソースに追記。新たにもう1つのボタンを追加しておく。

完成したものがこちら。ちなみに特に指定しなくても、キーボードが現れるとダイアログも一緒に上に移動する。優秀。

xibファイルで配置したUI部品をOutlet接続すれば、ダイアログで入力した内容を受け取ることも可能だ。

その他ダイアログのオプション

PopupDialogのイニシャライザにて、ボタンの配置やダイアログの現れ方などを指定することができる。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。