2019年1月10日木曜日

オートレイアウトで View を均等に並べる

概要

Storyboard で使って UI を作成する際に複数の View やコンポーネントを等間隔で並べたい場合があると思います
今回は View を使って方法を紹介します

環境

  • macOS 10.14.2
  • Xcode Version 10.1 (10B61)

やり方

ポイントは

  • 複数の View を選択して Equal Widths を使う

です

まず View Controller 上に適当に View を 2 つ配置します
autolayout_equal_widths1.png

左側の View の Constraints を設定します
上下左のみ設定します (エラー状態で OK)
autolayout_equal_widths2.png

次に右側の View の Constraints を設定します
上下左右すべて設定します (エラー状態で OK)
autolayout_equal_widths3.png

最後に Equal Widths を設定します
2 つの View を選択した状態で Constraints を設定します
そして「Equal Widths」を選択します
autolayout_equal_widths4.png

これで以下の用に左右均等に View が配置されます
autolayout_equal_widths5.png

最後に

Equal Widths を使って左右均等に View を並べる方法を紹介しました
ちなみに Constraints の Multiplier を変更すれば左右均等ではなく 6:4 などの大きさにもできます

今回は View でやり方を紹介しましたが他の UI コンポーネント (ImageView や UILabel など) でも同じようにできます

0 件のコメント:

コメントを投稿