StoryboardでStack Viewを使う

参考にした動画
https://www.youtube.com/watch?v=nfCNpL9hh3E

動画の半分の時間は、よくあるAutolayoutで制約をつける方法を紹介して、これだとボタンを追加したり、位置を変えたりするのが手間なのを紹介している。

ボタンを３つ新たに作り、全部選択した状態で、x-codeを開いているときに画面上のメニューから、Edigorを選び、Embed in -> Stack Viewを選択。
そうすると、ボタンが綺麗に配置される。
StackView自体にはAutolayoutの制約は必要!

まずButtonを３つ配置する

画面上のEdigorを選び、Embed in -> Stack Viewを選択。

スクショとる前にStack View適用してましたすみません

ボタンが綺麗に配置される

Stack Viewを選択した状態で制約をつける(ここから学習が始まる)

すみませんボタンの色変えてませんでした

画面右のユーティリティー・エリアから、インスペクターを選択し設定をする

DistributionからFill Equallyを選択するとボタンの幅を自動で設定してくれる。
Spacingを16にすると、自動でボタンの感覚を変更できる。

ボタンを追加する

エディターエリア左のView Controller Sceneの中にあるStack Viewの中にButtonをドラックアンド・ドロップする。
すると見た目が綺麗な状態で配置される。（ボタンの種類によってStackのSpacingの設定が必要です。messageボタンのような小さいボタンだと68位感覚が開きすぎる!）

最後に

このLessonには続きがありご興味がある方は参考までにご覧ください。
YouTubeのチャンネルのURL