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

Question

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

score 149 · Accepted Answer

解決策を見つけるのに2時間しか費やさず、StackOverflowでこのQAスタイルが可能になるため、私は自分の質問に答えています。

ここで開始から終了までは、ストーリーボードで機能させる方法です。

1：ビューコントローラに移動し、をクリックしAttribute Inspectorます。

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

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

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

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

5：スクロールビューをドロップして拡大し、ビュー全体を占めるようにします。これで、ViewControllerのビューに320,1000のサイズのスクロールビューが表示されます。

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

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

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

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

8：タイプRECTおよび0,0,320,416のKeyPathを使用しruntime attributeてを追加します。frame

これで、アプリを実行すると、フレームが0,0,320、416のスクロールビューが表示され、1000までスクロールできます。ストーリーボードでは、サブビューや画像などを希望どおりにレイアウトできます。次に、ランタイム属性がそれを正しく表示することを確認します。1行のコードなしでこれらすべて。

score 51 · Accepted Answer

Auto LayoutXCode8.2.1で機能した手順は次のとおりです。

のを選択Size Inspectorし、の代わりに高さ1000View Controllerに変更Simulated Sizeします。FreeformFixed
ビューの名前View ControllerをRootViewに変更します。
RootViewScroll Viewのサブビューとしてをドラッグし、名前をScrollViewに変更します。
ScrollViewの制約を追加します。
- ScrollView [Top、Bottom、Leading、Trailing] = RootView [Top、 Bottom、Leading、Trailing]
Vertical Stack ViewScrollViewのサブビューとしてをドラッグし、名前をContentViewに変更します。
ContentViewの制約を追加します。
- ContentView .height = 1000
- ContentView [Top、Bottom、Leading、Trailing、Width] = ScrollView [Top、Bottom、Leading、Trailing、Width]
ContentViewを選択Attributes Inspectorし、の代わりにに変更します。DistributionFill EquallyFill
ContentViewViewのサブビューとしてをドラッグし、名前をRedViewに変更します。
RedViewRedの背景として設定します。
ViewContentViewのサブビューとしてをドラッグし、名前をBlueViewに変更します。
BlueViewBlueの背景として設定します。
RootViewを選択し、ボタンをクリックしUpdate Framesます。
- Update Framesボタンの代わりに、Xcode8の新しいボタンResolve Auto Layout Issuesです。ストーリーボードの下のコントロールバーにある更新ボタンのように見えます。

階層の表示：

RootView
- ScrollView
  - ContentView
    - RedView
    - BlueView

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

シーン

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

score 43 · Accepted Answer

iOS7とXCode5で私のために働いた手順は次のとおりです。

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

1.1「ViewController」を選択し、「File Inspector」を選択して、「Autolayout」のチェックを外します。
ScrollViewをドラッグします（ViewControllerのUIView "View"の子として）
ScrollViewを選択し、「IdentityInspector」を開きます。
keyPathに「contentSize」と入力します。タイプとして「サイズ」を選択します。そして、値として{320、1000}を入力します。

注：ステップ4は、スクローラーに320x1000単位のサイズのコンテンツが含まれていることを示しています。したがって、contentSizeを設定すると、スクローラーが機能します。
View Controllerを選択し、「Attributes Inspector」を選択してから、SizeからFreeformを選択します。

注：手順5では、ViewControllerに付属する「View」のサイズを変更できます。
「表示」を選択し、「サイズインスペクター」を選択します。
幅を320に、高さを1000に設定します。

注：5、6、7は、StoryBoard内の拡大ビューまたは拡大ビュー全体を表示するためのものです。注：ViewControllerの[自動レイアウト]の選択を必ず解除してください。

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

score 13 · Accepted Answer

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

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

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

- (void)viewDidLoad
{
    [super viewDidLoad];

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

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

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

score 8 · Accepted Answer

スクロールをiOS7で機能させ、自動レイアウトをiOS7とXCode5で機能させる。

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

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

すべての制約をスクロールビューに設定します（つまり、最初にスクロールビューを修正します）
次に、scrollViewからの距離の制約を、スクロールビュー（スーパービュー）の一番下のアイテムに設定します。

注：ステップ2は、コンテンツの最後の部分がスクロールビュー内のどこにあるかをストーリーボードに通知します。

score 7 · Accepted Answer

この例では、InterfaceBuilderの自動レイアウト機能のチェックを外しました。そして、私はまだ（理由もなく）比較的古い4.6.1バージョンのXcodeを使用しています。

スクロールビュー（メインビュー）を備えたビューコントローラーから始めます。

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

2：コンテナビューを選択し、サイズインスペクターで、自動サイズ変更せずに上下に固定します。

ここに画像の説明を入力してください

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

4：新しいView Controllerを選択し、AttributesInspectorからSizeをFreeformに変更します。

ここに画像の説明を入力してください

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

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

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

ここに画像の説明を入力してください

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

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

Xcode4.6.1はiOS6以下でのみビルドできることに注意してください。このアプローチを使用してiOS6向けに構築しても、アプリをiOS7で実行した場合でも同じ結果を得ることができます。

score 5 · Accepted Answer

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

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

score 4 · Accepted Answer

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

- (void)viewDidAppear:(BOOL)animated{

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

}

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

score 4 · Accepted Answer

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

ViewControllerのメインビュー内にUIScrollViewを挿入します
必要に応じて、ScrollViewの自動レイアウト制約を設定します。私の場合、0から上部のレイアウトガイドと0から下部のレイアウトガイドを使用しました
ScrollView内に、コンテナビューを配置します。高さを好きなように設定します（例：1000）
コンテナに高さ制約（1000）を追加して、サイズが変更されないようにします。下部はフォームの終わりを超えます。
次の行を追加します[self.scrollViewsetContentSize：CGSizeMake（320、1000）]; scrollView（IBOutletとして接続したもの）を含むViewControllerに

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

score 4 · Accepted Answer

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

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

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

score 3 · Accepted Answer

私は自分の5セントを受け入れられた答えに置きたいです：私は2日間トピックを研究していて、最終的に私がこれから常に使用する解決策を見つけました

受け入れられた回答の項目4に進み、フレームの属性やコンテンツ化などを追加することを忘れてください。

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

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

score 3 · Accepted Answer

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

ストーリーボードのビューコントローラのサイズ属性を「フリーフォーム」に設定し、必要なサイズを設定します。スクロールビューのコンテンツ全体に収まる大きさであることを確認してください。
スクロールビューを追加し、通常どおりに制約を設定します。つまり、スクロールビューをビューのサイズにしたい場合は、通常どおり、上、下、先頭、末尾の余白をスーパービューにアタッチします。
ここで、スクロールビューの上部と下部を接続するスクロールビューのサブビューに制約があることを確認してください。水平スクロールがある場合は、左右で同じです。

score 2 · Accepted Answer

これは、垂直スクロールビューの同じソリューションに到達する少し厄介な答えですが、（スタックオーバーフローの精神に反して）質問には答えません。scrollViewを使用する代わりに、UITableViewを使用し、通常のUIViewをヘッダーにドラッグして、必要なだけ大きくすると、ストーリーボードのコンテンツをスクロールできるようになります。

score 2 · Accepted Answer

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

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

2-コンテンツビューをスクロールビューに追加し、接続をコンテンツレイアウトガイドにドラッグして、[リーディング]、[トップ]、[ボトム]、[トレーリング]を選択します。その値を0または必要な定数に設定してください。

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

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

score 0 · Accepted Answer

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

私はこのチュートリアルに従い、すべてが機能しました：http: //natashatherobot.com/ios-autolayout-scrollview/

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

お役に立てば幸いです。

score 0 · Accepted Answer

キーはcontentSizeです。

これは多くの場合欠落しており、UIScrollViewを追加するときに示されません。

UIScrollViewを選択し、IdentityInspectorを選択します。

contentSizekeyPathをIdentityInspectorのscrollViewに追加し、size（320、1000）に設定します。

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

score 0 · Accepted Answer

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

また、私はかつて、はるかに多くのスクロールを必要とするビューの問題に直面したことがあるので、上記の手法でUIScrollViewを変更します。

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

17 に答える 17

Related

Reference