web-dev-qa-db-ja.com

Xcode5でAutoLayoutを使用してScrollViewを作成する方法

ストーリーボードを使用するxcode5では、AutoLayoutをオンにして、完全に機能する垂直スクロールスクロールビューをどのように作成しますか？
サブビューに階層があることを考えると：

  1.UIView  
    2.UIScrollView
      3.UIView (lets call this UIDetailView to make things easier)

コードから制約まで、ビューのいずれかを小さくする必要があるかどうかなどを具体的に指定してください。

iosuiscrollviewstoryboardautolayoutxcode5
14
KeVal

このブログ投稿では、純粋な自動レイアウトアプローチを使用して、自動レイアウトをオンにしてUIScrollViewを使用する方法について詳しく説明しています。ただし、ブログ投稿のすべての制約はストーリーボードを介して定義されていることに注意してください。

投稿のアプローチは、次の階層を前提としています。

1. View (main view of my UIViewController)
  2. Scroll View (UIScrollView)
     3. Container View (UIView)
       4. Content View (e.g. UIImageView)

コンテナビューはUIDetailViewになり、コンテンツビューはUIDetailView内の任意のUIViewになると思います。

https://happyteamlabs.com/blog/ios-how-to-use-uiscrollview-with-auto-layout-pure-auto-layout/

10
Dj S

ストーリーボード内の自動レイアウトを備えたUIScrollViewは機能します

理解できない問題を解決するために、「コンテナビュー」アプローチ、別名ブルートフォースを推奨する多くの人々を見てきました。コンテンツがスクロールビューにすぐにアタッチされたサブビューではなく、スクロールビュー全体であると見なすようにすることで、スクロールビューの大きな利点を失ったため、これは最適ではありません。

これが次の例で私がそれをした方法です

--UIScrollView
  |-> UITextView
  |-> UILabel
  |-> UIOtherStuff

ストーリーボードのUIScrollViewにUIViewを配置するときは、UIScrollViewの4つの側面の端をUIViewに固定するだけです。次に、コンテンツをUIScrollViewに追加し、各ディメンションに少なくとも2つの制約を指定するようにします。 Autolayoutの優れている点は、スクロールビューのcontentSize、またはUILabelsが、その中のコンテンツのサイズに基づいてどれだけ大きくなる必要があるかを把握できることです。別名intrinsicContentSize。したがって、「scrollViewのコンテンツサイズがあいまいです」という警告が表示された場合は、コンテンツに十分な制約が与えられていないことがわかります。たとえば、ビュー間に上、下、左、右の間隔の距離を指定した場合、このUIScrollViewのような無限の垂直面はビューがゼロから無限に高い。

別の言い方をすれば、 例による自動レイアウトに関するAppleガイド は成功のための簡単な3ポイントの計画を立てます：

  1. スクロールビューを作成します。
  2. その中にUI要素を配置します。
  3. スクロールビューコンテンツの幅と高さを完全に定義する制約を作成します。

'Min melding til'のある一番上のTextViewも、さらに行を入力すると、ScrollView全体がそれを含むように成長します。 UITextViewクラスをオーバーライドして、変更された高さ制約を返しますが、ScrollView自体はコーディングなしで正しく機能します。

最後に、自動レイアウトに関連する多くの投稿が魔法の修正を試みます-すべての呪文translatesAutoresizingMaskIntoConstraints = NO。これは、ビューがプログラムで作成されている場合にのみ必要です。

Example of UIScrollView with Autolayout

12
Cameron Lowell Palmer

ドキュメントには、これを行う方法が明確に記載されています。自動レイアウトのUIScrollViewは、コンテンツに合わせて常にサイズを変更します（UIDetailView）。

したがって、次のようにビューを設定する必要があります。

  • UIView：制約付きの位置。
  • UIScrollView：制約付きでUIViewにバインドします。
  • UIDetailView：サイズ（固有のコンテンツサイズ）を設定し、圧縮抵抗を最大化し、UIScrollViewの上部、下部、先頭、および末尾の制約を手動で0に設定します。
6
patric.schenke

私も同様の問題を抱えていましたが、コードなしで純粋なAutolayoutを使用して、InterfaceBuilder内からDJSに似た比較的単純なソリューションを見つけました。

概念実証のために、最初にView Controllerの制約を削除して、これが機能するかどうかを確認します。

これはサンプルレイアウトです：

  • ビュー（私のUIViewControllerのメインビュー）

    • スクロールビュー（UIScrollView）

      • コンテナビュー（UIView）

        • コンテンツビュー（例：UIImageView）

A.スクロールビューの幅/高さは、コンテナビューの幅/高さよりも小さくする必要があります

B.コンテナビューには、一定の幅/高さが必要です（明示的な幅/高さの場合もあります）

C. Controlキーを押しながらコンテナビューをスクロールビューにドラッグし、以下のみを追加します。

  1. スペースをコンテナに導く
  2. コンテナへのトレーリングスペース

D.これら2つの制約を確認し、両方の「定数」値を0に設定します。

E.アプリを実行して

2
vedrano

新しいiPhone6および6+の画面サイズのため、私はいくつかの調整を行う必要がありました DJ Sのソリューション 。

ゴール

UITextViewをUIScrollView内に配置し、画面の左右の端から15ptのスペースを確保します。

ビュー

1. Main View (main view of my UIViewController)
  2. Scroll View (UIScrollView)
     3. Container View (UIView)
       4. Text View (UITextView)

ソリューション

スペースについては、UIScrollView-> Main Viewから15ポイントの水平方向の末尾/先頭のスペースを追加しました。画面の幅に対してUITextViewの幅を作成するために、UITextView-> Equal WidthsからMain View制約を追加し、値を-30（ 2 * 15ポイントの水平スペース）。これで、UITextViewの幅は任意の画面サイズに合わせて動的に調整されます。

UIScrollViewにはScrolling Enabledが必要です。 UITextViewはnotではありません。

1
Rog182