LoginSignup
0
0

More than 1 year has passed since last update.

Stack Viewを使ってボタンを綺麗に配置したり追加するのを学んでみた

Posted at

StoryboardでStack Viewを使う

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

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

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

まずButtonを3つ配置する

スクリーンショット 2022-01-08 13.25.12.png

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

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

スクリーンショット 2022-01-08 13.27.52.png

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

スクリーンショット 2022-01-08 13.25.34.png

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

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

スクリーンショット 2022-01-08 13.31.55.png

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

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

スクリーンショット 2022-01-08 13.36.56.png

ボタンを追加する

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

スクリーンショット 2022-01-08 13.47.33.png
スクリーンショット 2022-01-08 13.47.53.png
スクリーンショット 2022-01-08 13.48.11.png

最後に

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0