[Swift3]PopupDialogでスクロールビューを表示する

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

以前記事にて紹介した、簡単なコーディングでスタイリッシュなモーダルを表示することができるライブラリ「PopupDialog」。

今回は、このライブラリを使ってUIScrollViewをモーダル画面として表示させてみる。

PopupDialogの基本はこちら

PopupDialogの基本的な使い方や導入方法については以下の記事で説明している。

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

作成する

xibファイルを作る

前回の記事を参考に、まずはモーダル表示したい画面用のxibファイルを作成する。

xibファイルを作成する画像

xibファイルのビューのサイズを変える

作成したxibファイルにあらかじめ配置されているビューを選択し、サイズを「Freeform」にする。その後、ビューを「モーダルビューとして表示したいサイズ(ボタン含まず)」に調節する。
今回は幅320*高さ240とした。

ビューのサイズを変更する画像

Scroll Viewをビューに配置し、制約を設定する

xibファイルのビュー上に、普段UI部品を配置するのと同じようにScroll Viewを配置する。

Scroll Viewを配置する画像

配置したScroll Viewに制約を設定する。制約の内容は「4辺全てについて、Viewに対して0px」「幅320px、高さ240px(前項で決めたモーダルビューのサイズ)」の計6個。

ScrollViewに制約を設定する画像

配置したScroll View上にビューを配置し、制約を設定する

実際にスクロールして表示するコンテンツとしてのビューを配置する。

ここまでで配置したScroll Viewの上に、新たにビューを配置する。

中身のビューに制約を設定する画像1

配置したビューに制約を設定していく。まずは、4辺全てについてScroll Viewからの距離を0に設定する。

中身のビューに制約を設定する画像1

次に、Scroll Viewの幅と中身のビューの幅が同じになるように指定する。まずはScroll Viewと中身のビューを選択した状態にする。

Scroll Viewと中身のビューを選択した画像

この状態で制約の設定画面を開き、「Equal Widths」を選択して制約を設定する。

EqualWidthsの制約を設定する画像

最後に、中身のビューの高さを設定する。スクロールして表示したい大きさを指定する。

中身のビューに制約を設定する画像2

あとは適宜中身のビューを編集し、PopupDialogを呼び出す処理を実装すれば良い。

実行する

Scroll Viewの上端・中心・下端にラベルを配置した。

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

SNSでもご購読できます。