Scroll View(UIScrollView)でのAutoLayout設定

スポンサーリンク
【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

Xcode の Storyboard で Scroll View(UIScrollView)を使おうとしたところ、Scroll View に対する AutoLayout の設定が難しくてちょっとはまったので備忘録メモです。Constraints(制約)の警告が消えなかったり、ビルドしたらスクロールしなかったりと、色々試行錯誤してしまいました。

以下のエントリー等のおかげで解決できました。ありがとうございます。

【UIScrollView × Autolayout 問題】Appleエンジニア直伝のファイナルアンサー – Over&Out その後
iOS: How To Make AutoLayout Work On A ScrollView
UIScrollView and Autolayout – Xcode 6 – YouTube

3番目 Youtube リンク先が、Xcode での操作については分かりやすいです。UIScrollView の Autolayout 設定については、検索するとたくさん情報がひっかかるので、iOS 開発のちょっとしたはまりポイントなのかもしれない。

スポンサーリンク

— 環境 —
Xcode 6.3.1
Swift 1.2

以降、今回試してみて上手く行った、Scroll View の AutoLayout 設定方法です。

Scroll View に AutoLayout を設定する手順

1. Xcode で Main.storyboard を開き View Controller を追加する。追加した View Controller に、オブジェクトライブラリから Scroll View を探して追加する。さらにその Scroll View の中に View を追加する。以下の図のような配置にします。

Screen Shot 2015-05-15 at 10.00.51

2. Scroll View の中に追加した View を Content View にリネーム。(説明を分かりやすくするため)

Screen Shot 2015-05-15 at 10.01.23

3. Scroll View を選択して、上下左右のマージン「0」の Constraints(制約)を追加します。制約を追加したら Update Frames。以降も、制約を追加した後は Update Frames する。

Screen Shot 2015-05-15 at 10.03.13

4. Content View を選択して、上下左右のマージン「0」の Constraints(制約)を追加。

Screen Shot 2015-05-15 at 10.07.29

5. Content View を Control キーを押しながら View にドラッグ。すぐ上の Scroll View ではなく、もう1個上の View にドラッグすることに注意。

ctrl-drag-content-view

6. Equal Widths を選択します。これで、親要素と幅を同じにする制約が追加される。

Screen Shot 2015-05-15 at 10.09.32

7. 同様の作業をもう一度繰り返し、Content View を Control キーを押しながら View にドラッグして、今度は Equal Heights を選択。これで、親要素と高さを同じにする制約が追加される。

Screen Shot 2015-05-15 at 10.12.42

8. 追加された Equal Heights の Constraints(制約)を選択して、サイズインスペクタを開きます。サイズインスペクタの Priority を 250 に変更。

Screen Shot 2015-05-15 at 10.14.22

後は、Content View の中に Button, Label, View, Image View などを配置していきます。以上の方法で、Scroll View の Constraints の警告がなくなり、ビルドした後に画面スクロールが上手く動作するようになりました。

スポンサーリンク
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)
  • 3件のコメント
  • はじ

    scrollviewの設定で困っております。
    参考にさせていただいたところ、
    赤表示はされてないのですが、
    それでも、contentView内にlabelの配置や、
    さらにはスクロールもまだうまく動きません。

    そもそも、scrollviewより大きなviewの値を
    この説明の中では設定してないと思うんですが、
    そこらへんも含め書いていただけると
    誰にでもわかるものになると思います。

    お手数でなければお願いしたいです。

  • 普通のITの人

    参考になりました。
    他のサイトではContent ViewのHeightは800とか1200の固定値を入れる物が多いですが、その場合は、長すぎた場合に縮める処理が必要なので、こちらで書かれているやり方がスマートだと思います。

    ただ、navigationBar.translucent = false(すりガラス効果を無し)とした場合、Content Viewがちょうど収まると判断されるのかスクロールできないようです。

    仕方ないので、Content ViewのHeight制約はつけずに、Content View内の一番下のUIViewのBottom spaceをContent ViewのBottomに制約をつけました。

    • taka

      普通のITの人さん、こんにちは。
      navigationBar.translucent = false の件は知りませんでした。
      情報ありがとうございます!

Leave Your Message!