web-dev-qa-db-ja.com

iOS-ストーリーボードと自動レイアウトを使用してUIScrollViewを中央に配置

ストーリーボードと自動レイアウトを使用してiOSアプリを作成しているので、iPhone4とiPhone5の両方でうまく機能します。以下は、ストーリーボードを使用して作成しているビューのスクリーンショットです。

enter image description here

上の画像では、スクロールビューをスーパービューのリーディングエッジと右側のテーブルビューから中央に配置したいと思います。 iPhone5でスクロールビューの幅を広げたくありません。さまざまな制約の組み合わせを試しましたが、達成できませんでした。

スクロールビューを中央に配置するために設定する必要のあるすべての制約を教えてください。

iosuiscrollviewautolayoutstoryboard
12
Satyam

画面にビューを追加して、これを行う必要があります。

現時点では...

- UIView (main view)
    |
    | - scrollView
    | - tableView

このような別のビュー内にスクロールビューを配置する必要があります...

- UIView (main view)
    |
    | - UIView (spacer View)
    |    | - scrollView
    |
    | - tableView

今あなたができることはこれらの制約を持っていることです...

spacer view leading Edge constraint to super view = 0
spacer view trailing Edge to table view leading Edge = 0
table view width = (whatever the width is)
table view trailing Edge to super view = 0

これにより、スペーサービューとテーブルビューがレイアウトされ、スペーサービューが拡大します。

今、あなたは追加する必要があります...

scroll view width = x
scroll view height = y
scroll view centered vertically in super view
scroll view centered horizontally in super view.

これで、スクロールビューのスーパービューはスペーサービューであるため、常にテーブルビューと残りのスペースの中央に配置されます。

6
Fogmeister

ストーリーボードの中央にビューを配置する方法

この回答はXcode 8用に更新されました。

この答えは、ストーリーボードを使用して物事を中心に置く方法を一般的に検索しているだけで、制約を理解していない人を対象としています。

ストーリーボード（XIBファイルではない）と自動レイアウトを使用していると思います。これは最近のデフォルトなので、それが何を意味するのかわからなくても心配しないでください。ただし、確認したい場合は、プロジェクトナビゲータでMain.storyboardをクリックしてから、ファイルインスペクタをクリックします。 [自動レイアウトを使用する]がオンになっていることを確認できます。

enter image description here

ストーリーボード上のボタン（または中央に配置するビュー）を選択します。次に、右下の整列ボタンをクリックします。 「水平方向にコンテナ内」と「垂直方向にコンテナ内」を選択します。 「2つの制約を追加」をクリックします。

enter image description here

まだ完全に中央に配置されていない場合は、もう1つ行う必要があります。整列ボタンの2つ左にある[フレームの更新]ボタンをクリックします。これで、ビューがストーリーボードの中央に配置されます。

enter image description here

さらに重要なことに、アプリを実行するときは、使用しているデバイスのサイズに関係なく、アプリを中央に配置する必要があります。

私はもともとこれを ユーザーインターフェイスの作成–自動レイアウト から学びました。基本的な考え方は同じですが、XcodeではUIの配置が少し変更されています。

も参照してください

41
Suragch