StoryboardでStack Viewを使う
参考にした動画
https://www.youtube.com/watch?v=nfCNpL9hh3E
動画の半分の時間は、よくあるAutolayoutで制約をつける方法を紹介して、これだとボタンを追加したり、位置を変えたりするのが手間なのを紹介している。
ボタンを3つ新たに作り、全部選択した状態で、x-codeを開いているときに画面上のメニューから、Edigorを選び、Embed in -> Stack Viewを選択。
そうすると、ボタンが綺麗に配置される。
StackView自体にはAutolayoutの制約は必要!
まずButtonを3つ配置する
画面上の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