web-dev-qa-db-ja.com

StoryboardでUIScrollViewを使用する方法

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

120
Alex Reynolds

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

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

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

2:サイズをInferredではなくFreeformに変更します。

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

4:_Size Inspectorをクリックして、このビューを希望のサイズに設定します。高さを1000に変更しました。

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

5:スクロールビューにドロップして、ビュー全体を占めるようにストレッチします。これで、View Controllerのビュー上に320,1000のサイズのスクロールビューが表示されます。

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

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

7:contentSizeのKeyPathでUser Defined runtime attributeを追加し、次にSIZEを入力して、コンテンツサイズを入力します。私にとっては(320、1000)です。

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

8:タイプRECTおよび0,0,320,416のKeyPath frameruntime attributeを追加します。

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

149
Alex Reynolds

XCode 8.2.1で私のために働いたAuto Layoutの手順は次のとおりです。

  1. Size InspectorView Controllerを選択し、Simulated SizeFreeformではなく、高さ1000Fixedに変更します。
  2. View Controllerのビューの名前をRootViewに変更します。
  3. Scroll ViewRootViewのサブビューとしてドラッグし、名前をScrollViewに変更します。
  4. ScrollView:の制約を追加します
    • ScrollView[Top、Bottom、Leading、Trailing] =RootView[Top 、下、先頭、末尾]
  5. Vertical Stack ViewScrollViewのサブビューとしてドラッグし、名前をContentViewに変更します。
  6. ContentView:の制約を追加します
    • ContentView。height =1000
    • ContentView[Top、Bottom、Leading、Trailing、Width] =ScrollView [トップ、ボトム、リーディング、トレーリング、幅]
  7. ContentViewAttributes Inspectorを選択し、DistributionFillではなくFill Equallyに変更します。
  8. ViewContentViewのサブビューとしてドラッグし、名前をRedViewに変更します。
  9. RedRedViewの背景として設定します。
  10. ViewContentViewのサブビューとしてドラッグし、名前をBlueViewに変更します。
  11. BlueBlueViewの背景として設定します。
  12. RootViewを選択し、Update Framesボタンをクリックします。
    • Update Framesは、Resolve Auto Layout Issuesボタンではなく、Xcode8の新しいボタンです。ストーリーボードの下のコントロールバーにある更新ボタンのように見えます: Update Frames Button

ビュー階層:

  • RootView
    • ScrollView
      • ContentView
        • RedView
        • BlueView

ビューコントローラーシーン(高さ:1000):

scene

IPhone7で実行(高さ:1334/2):

demo

48
jqgsninimo

ここに、iOS 7およびXCode 5で機能した手順を示します

  1. ViewControllerをドラッグします(UIView "View"に付属)。

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

  2. ScrollViewをドラッグします(ViewControllerのUIView "View"の子として)
  3. ScrollViewを選択し、「IDインスペクター」を開きます。
  4. KeyPathに「contentSize」を入力します。タイプに「サイズ」を選択します。そして、値に{320、1000}を入力します。

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

  5. View Controllerを選択し、「Attributes Inspector」を選択してから、SizeからFreeformを選択します。

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

  6. [表示]を選択し、[サイズインスペクター]を選択します。

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

注:5、6、および7は、純粋にStoryBoard内の拡大されたビューまたは全体の展開されたビュー(を参照)です。注:View Controllerの「自動レイアウト」の選択を解除してください。

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

43
Raja Rao

何時間もの試行錯誤の後、「画面外」のスクロールビューにコンテンツを配置する非常に簡単な方法を見つけました。 XCode 5およびiOS 7でテスト済み。これは、2つの小さなトリック/回避策を使用して、Storyboardでほぼ完全に実行できます。

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

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

- (void)viewDidLoad
{
    [super viewDidLoad];

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

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

Appleはストーリーボードでこれを簡単にするはずだと思います。TableViewControllerでは、ストーリーボードで画面外にスクロールできます(20個のセルを追加するだけで、スクロールできるようになります)。これはScrollViewControllerで可能になりますも。

13
Ronny Webers

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

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

どうやら、私たちがする必要があるのは次のとおりです。

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

  2. 次に、一番下の項目にdistance-from-scrollView制約を設定して、ビュー(スーパービュー)をスクロールします。

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

8
Raja Rao

この例では、Interface Builderの自動レイアウト機能をオフにしました。そして、私はまだ(まったく理由もなく)Xcodeの比較的古い4.6.1バージョンを使用しています。

スクロールビュー(メインビュー)があるView Controllerから始めます。

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

2:コンテナビューを選択し、[サイズインスペクター]で、自動サイズ変更を行わずに上部と左側に固定します。

enter image description here

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

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

enter image description here

5:新しいView Controllerのビューを選択し、サイズインスペクターで高さを1000(コンテナビューの高さと同じ)に変更します。

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

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

enter image description here

8:4インチのiPhoneシミュレーターで実行します。トップラベルからボトムラベルまでスクロールできるはずです。

9:3.5インチiPhoneシミュレーターで実行します。トップラベルからボトムラベルまでスクロールできるはずです。

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

7
yoninja

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

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

5
Kyle Clegg

免責事項:-iOS 9以降のみ(スタックビュー)。

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

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

IOS7では、FreeFormサイズのViewControllerのUIScrollView内にViewがある場合、何をしてもアプリ内でスクロールしないことがわかりました。いろいろ試してみたところ、FreeFormsを使用しない次のように動作することがわかりました。

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

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

  3. ScrollView内に、コンテナビューを配置します。高さを任意に設定します(例:1000)

  4. コンテナに高さの制約(1000)を追加して、サイズを変更しないようにします。下部はフォームの終わりを過ぎます。

  5. 行[self.scrollView setContentSize:CGSizeMake(320、1000)];を追加します。 scrollView(IBOutletとして接続した)を含むViewControllerに

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

4
nh32rg

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

- (void)viewDidAppear:(BOOL)animated{

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

}

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

4
Lucio Fonseca

私は5セントを受け入れられた答えにしたい:私は2日間トピックを研究しており、最終的に私がこれから常に使用するソリューションを見つけました

受け入れられた回答の項目4に進み、フレームの属性やコンテンツの追加などを忘れます。

すべてを自動化するには、 このリンク

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

3
jungle_mole

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

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

  2. スクロールビューを追加し、通常どおりに制約を設定します。つまり、スクロールビューをビューのサイズにしたい場合は、通常どおり、スーパービューに上、下、先頭、末尾の余白を追加します。

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

enter image description here

3
Hulk_SMASH

以下は、垂直スクロールビューと同じ解決策を得るための少し粗雑な答えですが、(stackoverflowの精神に反して)質問には答えません。 scrollViewを使用する代わりに、UITableViewを使用して、通常のUIViewをヘッダーにドラッグし、必要なだけ大きくして、ストーリーボードのコンテンツをスクロールできるようになりました。

2
TimWhiting

キーはcontentSizeです。

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

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

contentSize keyPathを、sizeとしてIdentity InspectorのscrollViewに追加し、(320、1000)に設定します。

スクロールします。

0
Alex Zavatone

どうやら高さを指定する必要はまったくありません!何らかの理由で変更された場合(コンポーネントのサイズを変更したり、フォントサイズを変更した場合)、これは素晴らしいことです。

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

(補足:ビューを中央に配置する場合を除き、viewDidLayoutSubviewsを実装する必要はないため、ステップのリストはさらに短くなります)。

お役に立てば幸いです!

0

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

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

0
Usman Awan