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

More than 1 year has passed since last update.

Stack View とは

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

スクリーンショット_2015-09-19_21_10_14.png

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

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

メッセージ画面

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

スクリーンショット 2015-09-20 4.17.15.png

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

@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

横向き

スクリーンショット 2015-09-20 4.23.09.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

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

スクリーンショット_2015-09-20_4_33_33.png

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

スクリーンショット 2015-09-20 4.35.51.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

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

スクリーンショット_2015-09-20_4_43_18.png

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

スクリーンショット 2015-09-20 4.43.29.png

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

スクリーンショット 2015-09-20 4.50.57.png

Dock

スクリーンショット_2015-09-20_4_51_11.png

Attributes Inspector

スクリーンショット 2015-09-20 4.51.26.png

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

Stack View に制約を設定する

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

一番上の Stack View を選択

スクリーンショット 2015-09-20 4.59.55.png

上、左、右に余白を設定

スクリーンショット 2015-09-20 5.00.42.png

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

スクリーンショット 2015-09-20 5.01.10.png

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

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

スクリーンショット_2015-09-20_5_29_47.png

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

スクリーンショット 2015-09-20 5.10.09.png

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

スクリーンショット_2015-09-20_5_31_39.png

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

選択する Stack View

スクリーンショット 2015-09-20 5.16.36.png

Alignment を「Fill」に設定

スクリーンショット 2015-09-20 5.16.55.png

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

スクリーンショット 2015-09-20 5.36.00.png

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

スクリーンショット_2015-09-20_5_38_53.png

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

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

スクリーンショット 2015-09-20 5.44.02.png

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

縦向き

スクリーンショット 2015-09-20 5.47.13.png

横向き

スクリーンショット 2015-09-20 5.47.28.png

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

まとめ

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

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

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

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

スクリーンショット_2015-09-20_6_05_15.png

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

スクリーンショット 2015-09-20 6.02.59.png

  • Stack View を解除するには、以下の手順を踏みます。
1. Stack View を選択
2. option を押しながら Auto Layout ツールバーの Stack を選択
3. Unembed を選択

補足: Auto Layout のデバッグ

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

  • 配列の Outletを 作成し、背景色を設定したすべてのViewに対して Connection を設定する
@IBOutlet var CollectionViews: [UIView]!
  • viewDidLoad で背景色を削除する
for view in CollectionViews {
   view.backgroundColor = UIColor.clearColor()
}
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.