web-dev-qa-db-ja.com

UIStackView-ビューを中央から均等に配置します

UIStackViewの内側にUIScrollViewがあり、動的に追加されたサブビューを水平に配置して表示します。現在のソリューションは左からアイテムの表示を開始します。サブビューの幅と高さを変更せずにアイテムを中央から配布したいと思います。それ、どうやったら出来るの？また、UIStackViewを使用しないソリューションにも対応しています。そうすれば、iOS9未満のデバイスをサポートできます。

Curent

（現在）

Expected

（期待される）

iosuiscrollviewautolayoutios9uistackview
27
Ajith

短い答え：

ScrollViewの制約

Leading >= 0, Trailing >= 0, Top >= 0, Bottom >= 0
Center X  and Center Y

StackViewの制約

Leading = 0, Trailing = 0, Top = 0, Bottom = 0
StackView width = ScrollView width (priority low :250)
StackView height = ScrollView height

長い答え

まず、あなたの構造は良いです、私たちは持っています：

UIScrollView
     UIStackView (horizontal)
         Subviews

したがって、目標を達成するには、次のことを行う必要があります。

  • UIScrollViewを中央揃え
  • UIScrollViewのc​​ontentSizeをUIStackViewの固有のコンテンツサイズに等しく設定します

これを行う方法は次のとおりです。

ステップ1：UIScrollViewのフレームを中央に配置します

enter image description here

CenterYのフレームを中央に配置するために使用されるCenterXおよびUIScrollView制約

Leading Space> = 0、Trailling Space> = 0、Top Space> = 0、Bottom Space> = 0は、UIScrollViewのフレームが親ビューのフレームを超えないようにするために使用されます

UIScrollViewのc​​ontentSizeに関連するエラーを表示しないように、プレースホルダーの固有サイズを使用しました（contentSizeにはまだサブビューがないため）。

さて、UIScrollViewのフレームはOKです。次のステップに進んでください:)

ステップ2：水平UIStackViewを追加します

enter image description here

  • UIStackViewフレームを修正するために、上、下、先頭、末尾の制約が使用されます
  • UIScrollViewのcontentSizeを計算するために使用される等しい高さと等しい幅

PS。 UIStackViewのフレームの変更、UIScrollViewのcontentSizeの変更

ステップ3：サブビューを追加する

Fill Distribution in UIStackView all subviewsには、固有のコンテンツサイズ（または高さと幅の制​​約（推奨されません））が必要です。たとえば、Fill Equally、固有のコンテンツサイズ（または高さと幅の制​​約（推奨されない））を持つ1つのsubviewのみで十分です。他のサブビューのサイズはこれと同じになります。

例：3つのラベルを追加します（UIScrollViewのプレースホルダー固有のサイズを削除してください）

enter image description here

できます ！！いいえ、いいえ、まだ4番目と5番目のラベルを追加しようとはしていません:)

なぜ？

理解するために、ビューの各要素のフレームを2つの例で計算します。

親ビューのサイズ：200、200最初のラベルの固有のコンテンツサイズ：120、50 2番目のラベルの固有のコンテンツサイズ：150、50

最初の例（UIStackViewの最初のラベルのみ）

  • UIStackView固有のコンテンツサイズ= 120、50
  • UIScrollView contentSize = 120、50
  • UIScrollViewフレーム= 40、75、120、50

すべてのフレームに問題はありません

2番目の例（2つのラベルを使用）

  • UIScrollViewフレーム= 0、0、200、50
  • UIScrollView contentSize = 200、50
  • UIStackView固有のコンテンツサイズ= 200、50

そのため、UIStackViewは2つのラベルを正しく表示できず（UIStackViewの幅は2つのラベルの幅よりも小さいため）、UIStackView制約の幅はUIScrollViewの幅と同じです。 UIStackView固有のコンテンツサイズが最大UIScrollViewフレームよりも小さい場合に機能します。

これを修正するために、幅制約の優先度をUIStackView固有のコンテンツサイズの優先度の値よりも低い値に変更すると、すべて正常に機能します。

enter image description here

お役に立てば幸いです。

コードソース

28
Hamza