0
0

More than 1 year has passed since last update.

StackViewに入れたButtonの幅を調整する方法

Posted at

始めに

オートレイアウトそのまま使えば簡単にできますが、あとでレイアウト変更が楽なStackViewを使ってやってみたのでメモです。
他にも色々方法はあると思います。

やりかた

こんな感じのレイアウトでボタンの横幅を変えたい
スクリーンショット 2023-04-03 18.55.58.png

StackViewを追加

親のStackViewの中に子StackViewを追加してButtonを入れ子にします
スクリーンショット 2023-04-03 22.00.03.png

Buttonのwidthを設定

ボタンの横幅を固定します
スクリーンショット 2023-04-03 22.00.53.png

警告が出る

「固定幅の制約でクリッピングが発生する場合があります」と警告がでます
この警告はこちらの記事が詳しく解説していて参考になります。
https://qiita.com/onishi_820/items/b8fe02a07581f85d208d
スクリーンショット 2023-04-03 20.54.08.png

ここをEqualからGreater Than or Equalに変える

これで警告は消えます!
スクリーンショット 2023-04-03 21.04.27.png

完成

スクリーンショット 2023-04-03 21.04.40.png

最後に

最初はボタンの両端にViewを入れ込んで実装していました。
スクリーンショット 2023-04-03 22.02.26.png
Viewを固定横幅にして挟むと画面サイズが広い時にボタンが横に伸びてしまうとアドバイスをいただき今回の方法で行いました。
スクリーンショット 2023-04-03 22.25.47.png

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