ストーリーボードでUIScrollViewを使用する方法

高さ1000pxのコンテンツを含むスクロールビューがあり、ストーリーボードで簡単にデザインできるようにレイアウトできるようにしたいと考えています。
プログラムで実行できることはわかっていますが、視覚的に確認できるようにしたいのです。スクロールビューをビューコントローラーに配置するたびにスクロールしません。希望どおりに機能させることは可能ですか、それともコードで行う必要がありますか？

ソリューションを見つけるのに2時間を費やしたばかりで、StackOverflowがこのQAスタイルを許可しているため、私は自分の質問に答えています。

ここから始めて、ストーリーボードで機能させる方法です。

1：コントローラを表示してをクリックしAttribute Inspectorます。

2：サイズをFreeform推論ではなくに変更します。

3：そのストーリーボードのメインビューに移動します。スクロールビューではなく、トップレベルビューに移動します。

4：Size Inspectorこのビューをクリックして、目的のサイズに設定します。私は身長を1000に変更しました。

これで、ストーリーボードにビュー設定があり、スクロールの高さ全体を確認して簡単にデザインできることがわかります。

5：スクロールビューにドロップしてストレッチし、ビュー全体を占めるようにします。これで、320,1000のサイズのスクロールビューがビューコントローラのビューに配置されます。

次に、スクロールして、コンテンツを正しく表示する必要があります。

6：スクロールビューをクリックして、をクリックしIdentity Inspectorます。

7：タイプがSIZEのUser Defined runtime attributeKeyPath を含むa を追加contentSizeし、コンテンツサイズを入力します。私にとっては（320、1000）です。

ストーリーボードでスクロールビュー全体を見たいので、それを拡大し、フレームは320,1000ですが、これをアプリで機能させるには、フレームを表示されるスクロールビューになるように変更する必要があります。

8：追加runtime attributeキーパスとをframeタイプRECTと0,0,320,416で。

これで、アプリを実行すると、0、0、320、416のフレームを持つスクロールビューが表示され、1000までスクロールできます。ストーリーボードでは、サブビューと画像をレイアウトすることができます。次に、実行時属性が適切に表示されるようにします。これらすべてを1行のコードなしで行います。

Auto LayoutXCode 8.2.1で機能した手順を以下に示します。

1. を選択Size InspectorしView Controller、ではなく高さ1000に変更Simulated Sizeします。FreeformFixed
2. のビューの名前View ControllerをRootViewに変更します。
3. RootViewのScroll Viewサブビューとしてをドラッグし、名前をScrollViewに変更します。
4. ScrollViewの制約を追加します。
   • ScrollView [トップ、ボトム、大手、末尾] = RootView [トップ、ボトム、大手、末尾]
5. ScrollViewのVertical Stack Viewサブビューとしてをドラッグし、名前をContentViewに変更します。
6. ContentViewの制約を追加します。
   • ContentView .height = 1000
   • ContentView [上、下、リーディング、トレーリング、幅] = ScrollView [上、下、リーディング、トレーリング、幅]
7. ContentViewを選択しAttributes Inspector、の代わりにに変更します。DistributionFill EquallyFill
8. ContentViewのViewサブビューとしてをドラッグし、名前をRedViewに変更します。
9. RedViewRedの背景として設定します。
10. ContentViewのViewサブビューとしてをドラッグし、名前をBlueViewに変更します。
11. BlueViewBlueの背景として設定します。
12. RootViewを選択し、Update Framesボタンをクリックします。
    • Update Framesボタンの代わりに、Xcode8の新しいResolve Auto Layout Issuesボタンです。ストーリーボードの下のコントロールバーにある更新ボタンのように見えます。

階層を表示：

• RootView
  • ScrollView
    • ContentView
      • RedView
      • BlueView

コントローラシーンの表示（高さ：1000）：

iPhone7で実行（高さ：1334/2）：

iOS 7およびXCode 5で私のために働いた手順は次のとおりです。

1. ViewControllerをドラッグします（UIView "View"に付属しています）。

   1.1「View Controller」を選択し、「File Inspector」を選択して、「Auto layout」のチェックを外します。

2. ScrollViewをドラッグします（ViewControllerのUIView "View"の子として）
3. ScrollViewを選択し、「Identity Inspector」を開きます。

4. keyPathに「contentSize」と入力します。タイプは「サイズ」を選択してください。そして、値として{320、1000}を入力します。

   注：ステップ4は、スクローラーにサイズが320x1000単位のコンテンツが含まれていることを示しています。したがって、contentSizeを設定すると、スクローラーが機能します。

5. [ビューコントローラー]を選択し、[属性インスペクター]を選択して、[ サイズからフリーフォーム]を選択します。

   注：手順5では、View Controllerに付属する「View」のサイズを変更できます。

6. 「表示」を選択し、次に「サイズ検査」を選択します。

7. 幅を320に、高さを1000に設定します。

注：5、6＆7は、私たちがして、純粋ためである参照伸びやストーリーボードの内部全体に拡大図。注：View Controllerで[Auto Layout]をオフにしてください。

ビューの階層は次のようになります。

何時間もの試行錯誤の末、コンテンツを「オフスクリーン」のスクロールビューに入れる非常に簡単な方法を見つけました。XCode 5とiOS 7でテスト済み。2つの小さなトリック/回避策を使用して、ほぼすべてStoryboardでこれを実行できます。

1. ビューコントローラーをストーリーボードにドラッグします。
2. このviewControllerにscrollViewをドラッグします。デモでは、デフォルトのサイズのままにして、画面全体をカバーできます。
3. 今すぐ来てトリック1：scrollViewに任意の要素を追加する前に、定期的に「表示」でドラッグして（このビューは、画面よりも大きくすることになり、ボタン、ラベルなどのすべてのサブ要素が含まれます、...聞かせてのは、それを呼び出します' 囲みビュー '）。
4. サイズインスペクタでこれを囲むビューのYサイズを、たとえば800にします。
5. ラベルを囲んでいるビューのY位置200のどこかにドロップし、「label 1」という名前を付けます。
6. トリック2：囲んでいるビューが選択されていることを確認し（scrollViewではなく！）、Y位置をたとえば-250に設定して、画面の「外側」にあるアイテムを追加できるようにします。
7. 画面の下部のどこかにラベルをドロップし、「ラベル2」という名前を付けます。このラベルは実際には「オフスクリーン」です。
8. 囲んでいるビューのY位置を0にリセットします。ラベル2は画面外に配置されたため、表示されなくなります。

これまでのところ、ストーリーボードの作業では、viewControllerの「viewDidLoad」メソッドに1行のコードを追加して、scrollViewsのコンテンツを設定し、「囲んでいるビュー」全体を含める必要があります。ストーリーボードでこれを行う方法が見つかりませんでした：

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.scrollView.contentSize = CGSizeMake(320, 800);
}

これcontentSizeを行うsizeには、keyPathをIdentity InspectorのscrollViewにとして追加し、（320、1000）に設定します。

私はAppleがこれをストーリーボードでより簡単にする必要があると思います.TableViewControllerでは、ストーリーボードで画面外にスクロールするだけです（20セルを追加すると、簡単にスクロールできることがわかります）。これは、ScrollViewControllerでも可能です。

iOS7でスクロールを機能させ、iOS 7およびXCode 5で自動レイアウトを機能させる。

これに加えて：https : //stackoverflow.com/a/22489795/1553014

どうやら、私たちがする必要があるすべては：

1. すべての制約をスクロールビューに設定します（つまり、最初にスクロールビューを修正します）。

2. 次に、distance-from-scrollView制約を一番下のアイテム（スクロールビュー（スーパービュー））に設定します。

注：ステップ2は、ストーリーの最後のコンテンツがスクロールビュー内のどこにあるかを伝えます。

この例では、Interface BuilderのAutolayout機能をオフにしました。そして、私はまだ（まったく理由もなく）比較的古い4.6.1バージョンのXcodeを使用しています。

スクロールビューが表示されているビューコントローラー（メインビュー）から始めます。

1：オブジェクトライブラリからコンテナビューをスクロールビューに追加します。新しいビューコントローラーがストーリーボードに追加され、スクロールビューでビューコントローラーにリンクされていることに注意してください。

2：コンテナビューを選択し、サイズインスペクタで、自動サイズ変更せずに上と左にアンカーするようにします。

3：高さを1000に変更します（この例では1000を使用しています。必要な値を適用する必要があります）。

4：新しいビューコントローラーを選択し、属性インスペクターからサイズをフリーフォームに変更します。

5：新しいビューコントローラーのビューを選択し、サイズインスペクターで高さを1000（コンテナービューの高さに等しい）に変更します。

6：後でテストするために、新しいビューコントローラーのビューで、ビューの上部と下部にラベルを追加します。

7：元のビューコントローラーからスクロールビューを選択します。IDインスペクターで、keyPathをcontentSizeに設定し、typeをSizeに設定し、値を{320、1000}（またはコンテナービューのサイズ）に設定した属性を追加します。

8：4インチのiPhoneシミュレータで実行します。上部のラベルから下部のラベルまでスクロールできるはずです。

9：3.5インチのiPhoneシミュレータで実行します。上部のラベルから下部のラベルまでスクロールできるはずです。

Xcode 4.6.1はiOS6以下でしかビルドできないことに注意してください。このアプローチを使用してiOS6用にビルドしても、iOS7でアプリを実行しても同じ結果を得ることができます。

内ではUITableView、セルまたは要素を選択してトラックパッドで上下にスクロールすることで、実際にテーブルビューをスクロールできます。

についてはUIScrollView、アレックスの提案が好きですが、ビューコントローラーを一時的にフリーフォームに変更し、ルートビューの高さを増やし、UIを構築し（手順1〜5）、完了したら標準の推定サイズに戻すことをお勧めします。ランタイム属性としてコンテンツサイズをハードコードする必要がないようにします。これを行うと、3.5インチと4インチの両方のデバイスをサポートしようとする多くのメンテナンスの問題と、将来的に画面解像度が増加する可能性が生まれます。

次のサンプルのように、viewDidAppearのcontentSizeプロパティのみを設定する必要があります。

- (void)viewDidAppear:(BOOL)animated{

     [super viewDidAppear:animated];
     self.scrollView.contentSize=CGSizeMake(306,400.0);

}

自動レイアウトの問題を解決し、iOS7で正常に動作します。

免責事項：-iOS 9以降のみ（スタックビュー）。

iOS 9デバイスにアプリをデプロイする場合は、スタックビューを使用します。手順は次のとおりです。

1. 制約付きのスクロールビューを追加-スーパービュー（ビュー）に左、右、下、上（余白なし）にピン留め
2. スクロールビューに同じ制約のスタックビューを追加します。
3. スタックビューのその他の制約：-stackView.bottom = view.bottomおよびstackView.width = scrollView.width
4. ビューの追加を開始します。スクロールビューは、スタックビュー（基本的にはコンテンツビュー）のサイズに基づいてスクロールすることを決定します

iOS7では、FreeFormサイズのViewControllerのUIScrollView内にViewがある場合、何をしてもアプリでスクロールしないことがわかりました。私は遊んでみましたが、FreeFormsを使用しない次のものが機能しているように見えました。

1. ViewControllerのメインビュー内にUIScrollViewを挿入します。

2. 必要に応じて、ScrollViewのAutolayout制約を設定します。私にとっては、0から上へのレイアウトガイドと0から下へのレイアウトガイドを使用しました

3. ScrollView内に、コンテナビューを配置します。高さを好きなように設定します（例：1000）

4. コンテナに高さ制約（1000）を追加して、サイズ変更しないようにします。下部はフォームの最後を超えます。

5. 次の行を追加します[self.scrollView setContentSize：CGSizeMake（320、1000）]; scrollView（IBOutletとして接続したもの）を含むViewControllerに

コンテナに関連付けられているViewController（自動的に追加される）は、Interface Builderで希望の高さ（1000）になり、元のView Controllerでも適切にスクロールします。これで、コンテナーのViewControllerを使用してコントロールをレイアウトできます。

私は5セントを受け入れられた答えにしたいと思います：2日間トピックを調査していて、最終的にこれからいつも使用するソリューションを見つけました

承認された回答の項目4に進み、フレームの属性の追加やコンテンツサイズなどを忘れます。

すべてを自動化するには、このリンクのソリューションを使用するだけです

すべてが明確で、簡単で、エレガントで、iOS 7の魅力のように機能します。

これが簡単な解決策です。

1. ストーリーボードのビューコントローラーのサイズ属性を「フリーフォーム」に設定し、必要なサイズを設定します。スクロールビューのコンテンツ全体に収まる大きさであることを確認してください。

2. スクロールビューを追加し、通常どおりに制約を設定します。つまり、スクロールビューをビューのサイズにしたい場合は、通常のように、スーパービューに上下左右のマージンを添付します。

3. 次に、スクロールビューの上部と下部を接続するスクロールビューのサブビューに制約があることを確認します。水平スクロールがある場合、左と右で同じです。

垂直スクロールビューの同じ解決策に到達するためのちょっとした不快な回答を次に示しますが、（stackoverflowの精神に反して）質問には回答しません。scrollViewを使用する代わりに、UITableViewを使用して、通常のUIViewをヘッダーにドラッグし、必要な大きさにするだけで、ストーリーボードのコンテンツをスクロールできます。

どうやらあなたはまったく高さを指定する必要はありません！ これは、何らかの理由で変更された場合に便利です（コンポーネントのサイズを変更したり、フォントサイズを変更したりします）。

私はこのチュートリアルに従っただけで、すべてがうまくいきました：http : //natashatherobot.com/ios-autolayout-scrollview/

（注意：ビューを中央に配置する場合を除いて、viewDidLayoutSubviewsを実装する必要はないため、ステップのリストはさらに短くなります）。

お役に立てば幸いです。

キーはcontentSizeです。

UIScrollViewを追加する場合、これは多くの場合見当たらず、表示されません。

UIScrollViewを選択し、Identity Inspectorを選択します。

Identity InspectorのscrollViewにcontentSizekeyPathをとして追加し、（320、1000）にsize設定します。

離れてスクロールします。

自動レイアウトを使用している場合、最善の方法は、ストーリーボードの静的セルでUITableViewControllerを使用することです。

さらにスクロールが必要なビューで問題に直面したことがあるので、上記の方法でUIScrollViewを変更します。

Xcode 11を使用してスクロールビューを設定する方法は次のとおりです

1-スクロールビューを追加し、上部、下部、先頭、および末尾の制約を設定します

2-コンテンツビューをスクロールビューに追加し、接続をコンテンツレイアウトガイドにドラッグして、[Leading]、[Top]、[Bottom]、および[Trailing]を選択します。値を0または必要な定数に設定してください。

3-コンテンツビューからフレームレイアウトガイドにドラッグし、[等幅]を選択します

4-高さ制約定数をコンテンツビューに設定します