自動レイアウト制約を使用した3x3グリッドの作成
Xcodeは、レイアウトの問題はないと述べていますが、ご覧のとおり、問題があります。私はすべてを試しました。 Apple docs、YouTube、Googleなど。私は正しいことをしているようだが、何かをしている順番や他の何かがこれらの問題を引き起こしているのかもしれない。 add missing constraintsそしてこれは今のところ最良の結果です。 9個のUIImageの上に9個のボタンがあるので、UIImageを使用する場合と同じことをボタンに対して行う必要があります。 UIImagesを一時的にボタンの上に配置して、自分が何をしているのかを簡単に確認できるようにしました。スクリーンショットを2つ持っています。お知らせ下さい。
始まり
これは、Xcodeのadd missing constraintsオプション。私が欲しいものをソートしますが、葉巻はありません。
iOS 9以降
展開ターゲットがiOS 9以降の場合、UIStackViewを使用した簡単なソリューションがあります。 他の答え をご覧ください。
iOS 8以前
このレイアウトを制約付きで作成する方法はいくつかあります。ここに一つあります。
まず、ヒント：ドキュメントのアウトラインでビューに名前を付けることができます。これにより、どのビューがどのビューで、どの制約が接続されているのかを理解しやすくなります。ビューに名前を付けるには、アウトラインでビューをクリックし、Returnキーを押して名前を入力します。次に、アウトラインは次のようになります。
名前を変更する場合は、ファイルを閉じて（メニューバー> [ファイル]> [Main.storyboard]を閉じる）、すべてを正しく更新するために再度開く必要があります。
（これらの名前は、ストーリーボードの編集時にのみ使用されることに注意してください。実行時にこれらの名前を取得する方法はありません。）
では、制約を作成します。最初に、すべての左右のエッジを定数値ゼロの最近傍に制約します。
次に、最上行の上端と下端を、定数値がゼロの最近傍に制約します。上部のレイアウトガイドではなく、スーパービューの上部の端に制限する場合は、それらを1つずつ行う必要があります。最初の方法は次のとおりです。
上の行の他の2つのビューについても繰り返します。
次に、一番下の行の上端と下端を、定数値がゼロの最近傍に制約します。繰り返しますが、スーパービューの下端に制限する場合は、一度に1つずつ行う必要があります。例：
一番下の行の他の2つのビューについても繰り返します。
を使用しないでください（-===-）。上下の行が中央の行に制限されるため、上下の制約を作成する必要はありません。
最後に、すべてのビューを選択し、等幅および等高さの制約を作成します。
アシスタントエディターのプレビューを使用して結果を確認します。
制約を忘れると、ドキュメントのアウトラインの右上に赤い矢印が表示されます。不足しているものを識別するためのヘルプが必要な場合は、クリックしてください。たとえば、上部と下部の制約を上部中央のビューに追加するのを忘れると、次のようなエラーが表示されます。
iOS 9以降をターゲットにしている場合、スタックビューを使用して、任意の次元のグリッドをより簡単に作成できます。行ごとに1つの水平スタックビューを作成し、すべての水平スタックビューを単一の垂直スタックビューに配置します。すべてのスタックビュー（水平および垂直の両方）の分布を[均等に塗りつぶす]に設定します。次に、垂直スタックビューに制約を設定して、グリッドの全体的なサイズを制御します。
これがデモです。 9つの画像ビューから始めます。
最初に、グリッドの各行に1つずつ、3つの水平スタックビューを作成します。私はすでに画像ビューを大まかなグリッド形状に手動で配置しているので、Xcodeは水平スタックビューを自動的に使用するのに十分スマートです。
次に、3つの水平スタックビューを選択し、3つすべての分布を同時に塗りつぶしに設定します。
次に、すべての水平スタックビューを1つの垂直スタックビューに配置し、垂直スタックビューの分布を均等に設定します。繰り返しますが、水平スタックビューは既にほぼ垂直にレイアウトされているため、Xcodeは垂直スタックビューを自動的に使用するのに十分なほどスマートです。
最後に、垂直スタックビューに制約を設定して、コンテナを埋めるようにします（ステータスバー領域を除く）。次に、Xcodeにすべてのビューのフレームを更新するように指示し、ほとんど作業のない完璧な3x3グリッドを作成します。
