5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Xcode7で部品を等間隔に並べるには、StackViewが使いやすい

Posted at

###前提条件
Xcode:7.3.1 
Swift:2.0

#解決したい問題
UIButtonなどの部品を、上下左右に等間隔に複数並べたい。Autolayoutを活用してもできるが、手続きが煩雑になる場合がある。

参考記事「Auto LayoutでViewを等間隔に並べる記事読んでもわからない人向けの説明」
http://qiita.com/yimajo/items/1e9d9c204e9c5eff9692

#解決策およびメリット
StackViewを使う。Autolayoutよりも手数が少なくすむ。

#どうやってやるか(例)
4つのUIButton、A,B,C,Dを横に等間隔に並べたい。スクリーンショット 2016-08-10 1.51.16.png

まず、4つのButtonを選択した状態で、StackViewをクリックすると、4つのボタンが隙間なくくっつく。
スクリーンショット 2016-08-10 2.18.59.png

次に、Attributes InspectorのDistributionをEqual Spacingに、Spacingに適当な数字をふる。すると、4要素が等間隔に並ぶ。スクリーンショット 2016-08-10 2.01.55.png

あとは、StackView全体に対してHorizontally in ContainerとVertically in Containerを設定すれば、4要素が上下左右の真ん中に均等に並ぶ。スクリーンショット 2016-08-10 1.52.50.png
スクリーンショット 2016-08-10 1.52.56.png

#まとめ
StackViewは複数のボタンなどの部品を等間隔にまとめるのに使える

###参考にさせていただいたStackViewの関連記事
『StackViewを賢く使ってらくちんAutoLayout』
http://qiita.com/yucovin/items/ff58fcbd60ca81de77cb

『Xcode7 の新機能「StackView」を使うと、Storyboard の AutoLayout を簡単に設定できる』
http://qiita.com/merrill/items/04be7d2222cd70dd6408

『【Swift】超便利StackViewの実践的使い方!まだAutoLayoutで消耗してるの?』
http://qiita.com/kinopontas/items/d08f84dbb711c5acbe28

5
6
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
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?