2017-03-10 7 views
0

私はXcodeを学びたいので、私と一緒に裸にしてください。私はストーリーボードを設定するときに自動レイアウトに関するいくつかの問題を抱えています。自動レイアウトで各デバイスのアイコンのグリッドを設定する方法

I would like my app to be setup as displayed in this picture.

私は私のアプリの表示は、iPhoneの各世代に(画像サイズ、間隔、比率)と同一になりたいです。

それぞれUIImageViewに中央の自動サイズ調整モードとアスペクトフィットのコンテンツモードを設定することで、やりたい結果が多少得られました。しかし私がUIImageViewsStack Viewsに入れたら、私は同じ結果を得ることができません。これは私がこの4x4アイコングリッドを設定する適切な方法だと信じています。

ご協力いただきまして誠にありがとうございましたら、お知らせください。

答えて

0

上記の場合は難しい場合がありますが、3つのエッジに固定されたコンテナビューのAutoLayoutを使用することができます。次に、コンテナビューにhttps://developer.apple.com/reference/uikit/uicollectionviewを置き、データソースを使用してコレクションビューを設定します。これが私が過去にこの問題を解決した方法です。スクロールを停止し、グリッドの数に完全に一致するようにデータソース項目の量を制御し、バウンスさせて制御してください。

+0

コレクションビューは機能しますが、残酷です。スタックビューを使用するのが最も簡単で推奨される方法です。 https://developer.apple.com/videos/play/wwdc2015/218/ –

1

スタックビューはここを単純化するためのものです。

あなたが必要です4 水平スタックビュー内部1 垂直スタックビュー。

次に、縦(メイン)スタックビューには、左、右、下、縦横比(1:1)の4つの制約のみが必要です。

スタックビューの設定はすべて同じです。「塗りつぶし」と「塗りつぶし」は同じです。
私の例では、各スタックビューに10のスペースも追加しました。

Xcode setup

ボーナス:私はUIImageViewsを使用していないことに気付くが、カスタムUIViews、実行時に自分自身を描く このよう

@IBDesignable@IBInspectableで Xcodeでライブプレビューすることもできます。


結果

iPhone SE:

iPhone 6:

iPhone 7プラス:

コードを見てみましょう:

git clone [email protected]:backslash-f/grid-on-stackview.git

を(Stack Viewsにチャンスを与えてください。 :-))

関連する問題