高さ1000pxのコンテンツを含むスクロールビューがあり、ストーリーボードで簡単にデザインできるようにレイアウトしたいと思います。
プログラムで実行できることは知っていますが、視覚的に確認できるようにしたいです。ビューコントローラーにスクロールビューを配置するたびにスクロールしません。私が望むように動作させることは可能ですか、それともコードで行う必要がありますか?
ソリューションを見つけるのに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 frame
でruntime attribute
を追加します。
これで、アプリを実行すると、0,0,320、416のフレームを持つスクロールビューが表示され、1000までスクロールダウンできます。ストーリーボードで、サブビューと画像、その他をレイアウトすることができます。次に、ランタイム属性により、適切に表示されるようにします。これはすべて、1行のコードなしで実行できます。
XCode 8.2.1で私のために働いたAuto Layout
の手順は次のとおりです。
Size Inspector
のView Controller
を選択し、Simulated Size
をFreeform
ではなく、高さ1000でFixed
に変更します。View Controller
のビューの名前をRootViewに変更します。Scroll View
をRootViewのサブビューとしてドラッグし、名前をScrollViewに変更します。Vertical Stack View
をScrollViewのサブビューとしてドラッグし、名前をContentViewに変更します。Attributes Inspector
を選択し、Distribution
をFill
ではなくFill Equally
に変更します。View
をContentViewのサブビューとしてドラッグし、名前をRedViewに変更します。Red
をRedViewの背景として設定します。View
をContentViewのサブビューとしてドラッグし、名前をBlueViewに変更します。Blue
をBlueViewの背景として設定します。Update Frames
ボタンをクリックします。ビュー階層:
ビューコントローラーシーン(高さ:1000):
IPhone7で実行(高さ:1334/2):
ここに、iOS 7およびXCode 5で機能した手順を示します
ViewControllerをドラッグします(UIView "View"に付属)。
1.1「View Controller」を選択し、「File Inspector」を選択して、「Auto layout」のチェックを外します。
KeyPathに「contentSize」を入力します。タイプに「サイズ」を選択します。そして、値に{320、1000}を入力します。
注:ステップ4は、スクロールが320x1000単位のサイズのコンテンツを含むことを単に示しています。したがって、contentSizeを設定すると、スクローラーが機能します。
View Controllerを選択し、「Attributes Inspector」を選択してから、SizeからFreeformを選択します。
注:手順5では、View Controllerに付属の「View」のサイズを変更できます。
[表示]を選択し、[サイズインスペクター]を選択します。
注:5、6、および7は、純粋にStoryBoard内の拡大されたビューまたは全体の展開されたビュー(を参照)です。注:View Controllerの「自動レイアウト」の選択を解除してください。
ビューの階層は次のようになります
何時間もの試行錯誤の後、「画面外」のスクロールビューにコンテンツを配置する非常に簡単な方法を見つけました。 XCode 5およびiOS 7でテスト済み。これは、2つの小さなトリック/回避策を使用して、Storyboardでほぼ完全に実行できます。
これまでのストーリーボードの作業では、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で可能になりますも。
iOS7でスクロールし、iOS 7およびXCode 5で自動レイアウトを機能させる
これに加えて: https://stackoverflow.com/a/22489795/1553014
どうやら、私たちがする必要があるのは次のとおりです。
すべての制約をスクロールビューに設定します(つまり、スクロールビューを最初に修正します)
次に、一番下の項目にdistance-from-scrollView制約を設定して、ビュー(スーパービュー)をスクロールします。
注:ステップ2では、スクロールビュー内の最後のコンテンツがストーリーボードにあることを伝えます。
この例では、Interface Builderの自動レイアウト機能をオフにしました。そして、私はまだ(まったく理由もなく)Xcodeの比較的古い4.6.1バージョンを使用しています。
スクロールビュー(メインビュー)があるView Controllerから始めます。
1:コンテナビューをオブジェクトライブラリからスクロールビューに追加します。新しいView Controllerがストーリーボードに追加され、スクロールビューでView Controllerにリンクされていることに注意してください。
2:コンテナビューを選択し、[サイズインスペクター]で、自動サイズ変更を行わずに上部と左側に固定します。
3:高さを1000に変更します(この例では1000を使用しています。必要な値を適用する必要があります)。
4:新しいView Controllerを選択し、Attributes InspectorからSizeをFreeformに変更します。
5:新しいView Controllerのビューを選択し、サイズインスペクターで高さを1000(コンテナビューの高さと同じ)に変更します。
6:後でテストするために、新しいView Controllerのビューを表示したまま、ビューの上部と下部にラベルを追加します。
7:元のView Controllerからスクロールビューを選択します。 Identityインスペクターで、keyPathがcontentSizeに設定され、typeがSizeに設定され、値が{320、1000}(またはコンテナービューのサイズ)に設定された属性を追加します。
8:4インチのiPhoneシミュレーターで実行します。トップラベルからボトムラベルまでスクロールできるはずです。
9:3.5インチiPhoneシミュレーターで実行します。トップラベルからボトムラベルまでスクロールできるはずです。
Xcode 4.6.1はiOS6以下でのみビルドできることに注意してください。このアプローチを使用してiOS6向けにビルドしても、iOS7でアプリを実行しても同じ結果を得ることができます。
UITableView
内で、セルまたはその中の要素を選択し、トラックパッドで上下にスクロールすることで、実際にテーブルビューをスクロールできることに注意してください。
UIScrollView
については、Alexの提案が好きですが、一時的に View Controllerをフリーフォームに変更し、ルートビューの高さを増やし、UIを構築してから(ステップ1から5)に戻すことをお勧めします完了時に標準の推測サイズを使用すると、コンテンツサイズをランタイム属性としてハードコーディングする必要がなくなります。そうすることで、3.5インチと4インチの両方のデバイスをサポートしようとする多くのメンテナンスの問題と、将来的に画面解像度が高くなる可能性があります。
免責事項:-iOS 9以降のみ(スタックビュー)。
IOS 9デバイスにアプリを展開する場合は、スタックビューを使用します。手順は次のとおりです。
IOS7では、FreeFormサイズのViewControllerのUIScrollView内にViewがある場合、何をしてもアプリ内でスクロールしないことがわかりました。いろいろ試してみたところ、FreeFormsを使用しない次のように動作することがわかりました。
ViewControllerのメインビュー内にUIScrollViewを挿入します
必要に応じて、ScrollViewでAutolayout制約を設定します。私にとっては、0からTopレイアウトガイドと0からBottomレイアウトガイドを使用しました
ScrollView内に、コンテナビューを配置します。高さを任意に設定します(例:1000)
コンテナに高さの制約(1000)を追加して、サイズを変更しないようにします。下部はフォームの終わりを過ぎます。
行[self.scrollView setContentSize:CGSizeMake(320、1000)];を追加します。 scrollView(IBOutletとして接続した)を含むViewControllerに
コンテナに関連付けられているViewController(自動的に追加)は、Interface Builderで目的の高さ(1000)になり、元のView Controllerでも適切にスクロールします。これで、コンテナのViewControllerを使用してコントロールをレイアウトできます。
このサンプルのように、viewDidAppearのcontentSizeプロパティのみを設定する必要があります。
- (void)viewDidAppear:(BOOL)animated{
[super viewDidAppear:animated];
self.scrollView.contentSize=CGSizeMake(306,400.0);
}
自動レイアウトの問題を解決し、iOS7で正常に動作します。
私は5セントを受け入れられた答えにしたい:私は2日間トピックを研究しており、最終的に私がこれから常に使用するソリューションを見つけました
受け入れられた回答の項目4に進み、フレームの属性やコンテンツの追加などを忘れます。
すべてを自動化するには、 このリンク
すべてが明確で、簡単で、エレガントで、iOS 7の魅力のように機能します。
以下は、垂直スクロールビューと同じ解決策を得るための少し粗雑な答えですが、(stackoverflowの精神に反して)質問には答えません。 scrollViewを使用する代わりに、UITableViewを使用して、通常のUIViewをヘッダーにドラッグし、必要なだけ大きくして、ストーリーボードのコンテンツをスクロールできるようになりました。
キーはcontentSizeです。
これは多くの場合欠落しており、UIScrollViewを追加するときに示されません。
UIScrollViewを選択し、Identity Inspectorを選択します。
contentSize
keyPathを、size
としてIdentity InspectorのscrollViewに追加し、(320、1000)に設定します。
スクロールします。
どうやら高さを指定する必要はまったくありません!何らかの理由で変更された場合(コンポーネントのサイズを変更したり、フォントサイズを変更した場合)、これは素晴らしいことです。
私はこのチュートリアルに従って、すべてがうまくいきました: http://natashatherobot.com/ios-autolayout-scrollview/
(補足:ビューを中央に配置する場合を除き、viewDidLayoutSubviewsを実装する必要はないため、ステップのリストはさらに短くなります)。
お役に立てば幸いです!
自動レイアウトを使用している場合、最良の方法は、ストーリーボードの静的セルでUITableViewControllerを使用することです。
また、以前よりはるかに多くのスクロールを必要とするビューの問題に直面したことがあるので、上記の手法でUIScrollViewを変更します。