Xcode7 の新機能「StackView」を使うと、Storyboard の AutoLayout を簡単に設定できる

## Stack View とは

Xcode7 で Storyboard を開くと、AutoLayoutツールバーに次のメニューが追加されています。

![スクリーンショット_2015-09-19_21_10_14.png](https://qiita-image-store.s3.amazonaws.com/0/51339/c6414a5d-a2d4-363e-3994-b1adf5fe69b6.png)

これは「Stack View」といって、AutoLayout を設定する View をグルーピングして、まとめて制約を設定することができるツールです。今まで1つ1つのViewに対して設定していた手間が少なからず省けると思います。

少しいじってみたので、どうやって使うのかを紹介します。
サンプルはチャット風のメッセージ画面に制約を設定するものです。

## メッセージ画面

まず、何も考えずにアイコン、投稿者名、日付、メッセージを並べていきます。
Auto Layout のデバッグでよく使う手法だと思いますが、View に背景色も設定します。

![スクリーンショット 2015-09-20 4.17.15.png](https://qiita-image-store.s3.amazonaws.com/0/51339/2a0fe916-64b7-666e-ec4b-bfc77a06c600.png)

UIViewController の Outlet は以下のようになっています（ただし今回はソースは一切いじる必要ありません）

```swift
@IBOutlet weak var avatar: UIImageView!
@IBOutlet weak var name: UILabel!
@IBOutlet weak var date: UILabel!
@IBOutlet weak var message: UILabel!
```

この状態でどう表示されるか、プレビューで確認してみましょう。iPhone 4.7-inch で表示してみます。

**縦向き**

![スクリーンショット 2015-09-20 4.23.17.png](https://qiita-image-store.s3.amazonaws.com/0/51339/098d8045-89f0-44cf-3ce9-35c73bd7759e.png)

**横向き**

![スクリーンショット 2015-09-20 4.23.09.png](https://qiita-image-store.s3.amazonaws.com/0/51339/f5a06808-e92e-3325-938a-d8c302ff908f.png)

縦向きの場合はメッセージと日付が途切れ、横向きの場合は右側に空白ができてしまっています。これらを Stack View を使って修正していきます。

## Stack View を作成する

まずは Stack View を最初にすべて設定してしまうのが良いです。なぜなら、途中から Stack View を設定すると、その時点でViewに設定されていた制約がすべて解除されてしまうからです。

Stack View には「縦方向」にグルーピングするのと、「横方向」にグルーピングするのと2種類あります。言葉だけだと何を言っているのかわからないと思うので、実際に設定してどうなるのか見てみましょう。

まずは、投稿者名と日付を Stack View でまとめてみます。
両方のViewを選択した状態で、Stack View メニューをクリックします。すると、

![スクリーンショット_2015-09-20_4_30_38.png](https://qiita-image-store.s3.amazonaws.com/0/51339/cec98e37-0044-b539-0e0d-0de50a4e283d.png)

こんな感じでくっつきました。これは、2つのViewの制約が全て解除されたためです。Dock を確認してみると、

![スクリーンショット_2015-09-20_4_33_33.png](https://qiita-image-store.s3.amazonaws.com/0/51339/311627f2-3242-aaca-d8f1-5107116ae512.png)

Stack View というものが新しくできて、その下に選択したViewが表示されています。今度は Stack View を選択して、Attributes Inspector を見てみましょう。

![スクリーンショット 2015-09-20 4.35.51.png](https://qiita-image-store.s3.amazonaws.com/0/51339/0d10ea03-ccaa-232d-e82e-a30cdeea4cd5.png)

Stack View 用のプロパティを設定する項目が表示されます。これらは、Stack View としてまとめられた View をどのように配置するのかを設定する項目です。

Axis が「Horizontal」になっていますが、これは横方向の Stack View であることを示しています。これは、隣通しのViewを Stack View に選択したからです。（投稿者名と日付はお互い隣にありますね）。横方向の Stack View では、お互いの間隔を「Spacing」で設定できたりしますが、今はとりあえずすべての Stack View の設定を終わらせましょう。

次に、さきほど作成した Stack View とメッセージを選択し、同じように Stack View を作成します。すると、今度はこんな感じになります。

![スクリーンショット_2015-09-20_4_44_32.png](https://qiita-image-store.s3.amazonaws.com/0/51339/fe88de6c-ff00-b86b-033c-c9a909f8c8ce.png)

Dock では作成された Stack View の中に、選択した Stack View と message が表示されています。

![スクリーンショット_2015-09-20_4_43_18.png](https://qiita-image-store.s3.amazonaws.com/0/51339/dcde9bc8-3882-2710-c4da-098f7962e69a.png)

Attributes Inspector のAxisが「Vertical」になっています。これは、選択した Stack View と メッセージのViewの位置が上下関係にあったからです。

![スクリーンショット 2015-09-20 4.43.29.png](https://qiita-image-store.s3.amazonaws.com/0/51339/7fb519b9-4058-fc05-5374-e3a656d31884.png)

最後に、先ほど作った Stack View と アイコン画像を選択して、新しい Stack View を作成します。

![スクリーンショット 2015-09-20 4.50.57.png](https://qiita-image-store.s3.amazonaws.com/0/51339/bea1fb4c-fe74-0af2-dad9-2bc94cfa9f39.png)

Dock

![スクリーンショット_2015-09-20_4_51_11.png](https://qiita-image-store.s3.amazonaws.com/0/51339/e5fe070c-4ca5-04b5-df75-58947d7d0ad4.png)

Attributes Inspector

![スクリーンショット 2015-09-20 4.51.26.png](https://qiita-image-store.s3.amazonaws.com/0/51339/18c99730-a14a-b2d8-d147-b214575a6c29.png)

これで作成完了です。このように作成した Stack View に今度は制約を設定します。

## Stack View に制約を設定する

まず、このメッセージの全体的な margin を設定してみます。
Dock で一番親の Stack View を選択して、PIN メニューをクリックして余白を設定しましょう。

一番上の Stack View を選択

![スクリーンショット 2015-09-20 4.59.55.png](https://qiita-image-store.s3.amazonaws.com/0/51339/7560e897-58aa-7153-cc3c-814005b6b0c0.png)

上、左、右に余白を設定

![スクリーンショット 2015-09-20 5.00.42.png](https://qiita-image-store.s3.amazonaws.com/0/51339/243e37ee-0208-0ab3-88a1-2d9ff795b41a.png)

すると、こんな感じになります。

![スクリーンショット 2015-09-20 5.01.10.png](https://qiita-image-store.s3.amazonaws.com/0/51339/bec55afa-397d-5448-0ca3-8cc0c443697f.png)

これでメッセージ全体の余白が設定できました。Stack View はメッセージをグルーピングしているので、アイコン画像やメッセージの個々のViewに画面からの余白の設定をする必要はありません。

アイコン画像も 48x48 の固定にしておきましょう。

![スクリーンショット_2015-09-20_5_29_47.png](https://qiita-image-store.s3.amazonaws.com/0/51339/a3e3622a-9dc4-ac33-68bb-0b4ef190e1c6.png)

次に、選択した Stack View の中にあるアイコン画像のViewと Stack View の間にスペースを設けてみましょう。これも簡単で、Attributes Inspector の Spacing をいじるだけです。試しにスペースを 20 あけてみましょう。Dockの一番上の Stack View を選択し、以下のように設定します。

![スクリーンショット 2015-09-20 5.10.09.png](https://qiita-image-store.s3.amazonaws.com/0/51339/74b4caa2-be92-d2e1-3672-4f5b860c25ca.png)

すると、これだけでアイコン画像と、アイコン画像の横にある Stack View の間に余白が設定できました。

![スクリーンショット_2015-09-20_5_31_39.png](https://qiita-image-store.s3.amazonaws.com/0/51339/48981842-b629-3799-0b20-7d9b8eb11544.png)

だんだん Stack View の使い方がわかってきたと思います。
今度は、アイコン画像の横にある Stack View に制約を設定します。まずこちらは幅の長さが中途半端なので、横いっぱいに伸ばしてみます。

選択する Stack View

![スクリーンショット 2015-09-20 5.16.36.png](https://qiita-image-store.s3.amazonaws.com/0/51339/fec43aff-8040-ef80-1da1-64bb79742835.png)

Alignment を「Fill」に設定

![スクリーンショット 2015-09-20 5.16.55.png](https://qiita-image-store.s3.amazonaws.com/0/51339/80b4e655-0efc-05d6-d8f2-d9dcfb952a32.png)

すると、こんな感じに横いっぱいに設定されます。

![スクリーンショット 2015-09-20 5.36.00.png](https://qiita-image-store.s3.amazonaws.com/0/51339/5430a4c4-11de-6573-3984-3d525f194c94.png)

いい感じですね。今度は 投稿者名・日付の Stack View とメッセージの間に余白をいれてみます。これも Spacing をいじるだけです。こちらは 10 に設定してみましょう。

![スクリーンショット_2015-09-20_5_38_53.png](https://qiita-image-store.s3.amazonaws.com/0/51339/9c68bc67-f362-a8e2-b89a-28bef2ec0ee5.png)

最後に、日付の幅が少し足りないので、width を 100 に固定、文字を右寄せに、メッセージはLinesを0にして複数行に対応しましょう。
（Stack View は関係ないので設定画面は省略）

最終的に以下のような感じになっているはずです。

![スクリーンショット 2015-09-20 5.44.02.png](https://qiita-image-store.s3.amazonaws.com/0/51339/4475e18e-a630-4c07-0fe7-ba4ccf9c7e83.png)

それでは最初と同じように、プレビューでデザインを確認してみましょう。

**縦向き**

![スクリーンショット 2015-09-20 5.47.13.png](https://qiita-image-store.s3.amazonaws.com/0/51339/2273fac4-9600-3da0-58ef-da23c2f7932b.png)

**横向き**

![スクリーンショット 2015-09-20 5.47.28.png](https://qiita-image-store.s3.amazonaws.com/0/51339/41e60fcc-92c6-e87e-3fa1-2628d0c0ba06.png)

画面内にすべて収まり、適度な余白も空いて見やすくなりました。

## まとめ

いかがでしたか。今まで個々に設定していたのに比べると、ずいぶん楽に制約を設定できるようになったと思います。私もまだ少ししか触ってないので、今回は触り程度に紹介してみました。
Stack View を使いこなせば、ボタンを等間隔に配置するのも簡単になります。ぜひいろいろなリファレンスを見てみましょう。

以下、Stack View の注意点と補足をまとめて終わりにしたいと思います。

* Stack View に設定する View にすでに制約が設定されていると、Stack View に設定した時点で全ての制約が解除されます。

* Stack View でまとめられた View を Dock の中で順番を入れ替えると、Storyboard 上での配置も入れ替わってくれます。たとえば、上の例で 日付と投稿者名を入れ替えると、

![スクリーンショット_2015-09-20_6_05_15.png](https://qiita-image-store.s3.amazonaws.com/0/51339/5ab0e530-c519-90ee-7a6b-b17f6449e973.png)

こんな感じでViewも実際に入れ替わります。

![スクリーンショット 2015-09-20 6.02.59.png](https://qiita-image-store.s3.amazonaws.com/0/51339/7cc92052-ceab-75da-8dd9-5257ff726245.png)

* Stack View を解除するには、以下の手順を踏みます。

```
1. Stack View を選択
2. option を押しながら Auto Layout ツールバーの Stack を選択
3. Unembed を選択
```

## 補足: Auto Layout のデバッグ

背景色を設定するのが一般的かと思いますが、実行して確認したときに背景色を表示したくない場合があります。その時は、コード上で一気に背景色を消す設定をします。

* 配列の Outletを 作成し、背景色を設定したすべてのViewに対して Connection を設定する

```swift
@IBOutlet var CollectionViews: [UIView]!
```

* viewDidLoad で背景色を削除する

```swift
for view in CollectionViews {
   view.backgroundColor = UIColor.clearColor()
}
```