bugfix> ios > 投稿

ストーリーボードのレイアウトは、添付の画像に示すようにシンプルです。本文のテキストは1行から複数​​行に及ぶ可能性があると想定しています。複数行の場合を考慮して、ボタンがクリック可能になるようにコンテンツがスクロールすることを期待しています。ただし、設定した制約では、スクロールビューはスクロールしません。目的の効果を得るには、どのような制約を変更する必要がありますか?ありがとうございました。

回答 2 件
  • UIScrollView を使用する鍵 :自動レイアウトで .contentSize を決定できるようにするには、制約の「チェーン」が必要です  スクロールビューの。

    ステップバイステップ(レイアウト中に背景色を設定し、要素の境界/フレームを見やすくする)...

    UIScrollView を追加  (カンタロープカラー)をビューコントローラーに追加し、20 ptsだけ制限します(ちょうどそれがどこにあるかがわかるように)。

    UIView を追加  あなたの ContentView として  (イチゴ色)スクロールビューのサブビューとして。スクロールビューに等しい高さと幅の制​​約を与え、上/前/後/下の制約をすべて 0 に設定します :

    Title を追加します   UILabel  (黄色の背景)。 Top: 30 / Leading: 50 / Trailing: 50 を制約する 。 Body を追加します   UILabel  (黄色の背景)。その上部をタイトルラベルの下部に制限します( 200 を使用しました )、および Leading: 10 / Trailing: 10UIButton を追加します  (明るい灰色の背景)。上部をBodyラベルの下部に制限します( 50 を使用しました )、および Leading: 50 / Trailing: 50

    これまでのところ、特別なことは何もありません。スクロールはできません...

    次に、追加別の  0 の下の制約   ContentView へ 、最初のBottom制約を >= 0 に変更します  新しい下部制約の優先度を 250 に設定します :

    これにより(さらに数ステップ後) ContentView が許可されます  コンテンツに基づいて展開/折りたたみ、および .contentSize を制御する  スクロールビューの。

    次のステップは、 Button に伝えることです   ContentView の高さを決定する  -したがって、 30 の下部制約を追加します  ボタンに(これは Top: 30 と等しくなります  タイトルラベルに付けました):

    もちろん、それはまったくない 私たちが欲しいもの。ボタンの高さを引き伸ばします高さの制約  ContentView で 。そう...削除する  ContentView からの高さ制約 :

    その結果、 ContentView  高さは、ボタンの下部から30ポイント下に収まるように縮小されます。

    Body にさらにテキストを追加する場合  ラベル( Number of Lines; 0 に設定されていると仮定) )、 Body が表示されます  ラベルを展開し、ボタンを「押し下げる」と、次に ContentView の下部が「押し下げられる」 :

    Body に十分なテキストを追加する場合  スクロールビューの下部の下にあるボタンを押す-IBまたはコード経由で-垂直にスクロールするようになりました。

    それが明確であることを願っています...質問があるかどうか尋ねてください。

  • スクロールビューに適した制約を取得するには、従う必要がある特定の方法があります。以下の手順を見つけてください。

    1.スクロールビューをスーパービューに追加します。スクロールビューを追加した後、画像に示すようにサブビューをスクロールビューに追加します。 このビューは、スクロールビューと同じx、y座標と同じ高さと幅を持ちます。 階層を理解するには、下の画像を参照してください。

    まだ制約を追加していないため、赤い警告が表示されます。

    次に、いくつかの制約を適用します。 以下の画像を参照し、上下左右にスクロールビューを追加します。

    スクロールビューの子ビューに、同じ上、下、先頭、末尾を追加します。下の画像を参照してください。

    下の画像に示すように、スクロールとビューの両方を1つに保持し、両方に等しい幅と同じ高さの制約を与えます。

    制約はほぼ設定されています。現在、ビューに含まれている内容に応じて異なります。 その後、更新の制約をクリックしてビューの高さを増やします。

    最後に行う必要があるのは、スクロールビューの下部の制約値を変更することです。これは負の値になります。スクリーンショットの下にある0に置き換えます。

    動作する場合は更新してください

あなたの答え