14
15

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.

UIStackViewを使ってみました

14
Last updated at Posted at 2016-01-31

はじめに

iOS9から追加されたUIStackViewをStoryboard上で触ってみました。

環境

Xcode7以降
iOS9以降(残念ながらiOS7とか8とかでは使えません(T^T))

UIStackViewって何ができるのさ

縦(もしくは横)に等間隔にコンポーネントを配置できます!!
AndroidのLinearLayoutに近いものですね(多分、、)

UIStackViewにaddした子viewたちをグループ化するので、
AutoLayoutでハマったから制約を全部消してやり直そうなんてこと
が解消できるのではないでしょうか

え?制約全部消してやり直すなんて経験私だけ(-ω-;)?笑
まあ、何はともあれUIStackView使ってみましょう。

縦に並べてみる

1.Storyboard上でボタンを3つ縦に並べます
(ざっくりと縦に並んでいればokです)
2016-01-31 14.20.19.png
各ボタンに制約は指定しません。

2.UIStackViewの子viewにするボタンたちを選択して、AutoLayoutのツールバー1番左のStackViewを押します
2016-01-31 13.50.54.png

すると、
2016-01-31 14.20.44.png
指定した各ボタンの親viewにStackViewができてボタンが縦に並びます。

3.StackViewに制約を設定する
今回はとりあえずStackViewを中央に設定します。
2016-01-31 14.44.19.png
はい。こんな感じ。
2016-01-31 14.47.19.png
ボタンを3つ縦に並べることができました。

間隔を設定する

StackViewでまとまったけれども、間隔がないじゃないか!!
ということで続いてスペースを設定しましょう。
StackViewを選択すると、その設定をする項目が表示されます。
2016-01-31 14.52.43.png

今回は間隔を設定するのでSpacingの数値を変更します。
Spacingの初期値は0なので間隔がありません。
2016-01-31 14.59.29.png

Spacingの値を10にしてみると、
2016-01-31 15.30.30.png
子view間にスペースができます(^o^)/

部分的に間隔を変えたいなーという時は、
StackViewの中にStackViewを入れればできることにはできますが
2016-01-31 15.17.30.png

あまり美しくないような。。
(こうしたら良いという方法があればご教授ください。)

横に並べてみる

これまで縦に並べていましたが、横に並べる場合も同様です。
違う部分は一番はじめに横に並べるというところのみです。
(こちらも、ざっくりと横に並んでいればokです)
2016-01-31 15.35.49.png
縦に並べる場合と同様にUIStackViewの子viewにするコンポーネントを選択してAutoLayoutのツールバー1番左のStackViewを押すと、
2016-01-31 15.43.49.png
StackViewができて横に並びます。
StackViewに制約や間隔を設定する部分は縦に並べた場合と変わりません。

AutoLayoutが縦に並べるか横に並べるか判断してくれるようですね。

最後に

今回は、Storyboard上でUIStackViewを作ってSpacingの設定をしてみました。
まだ触れていない設定に関しても、今後使用してまとめたいと思います。

ご意見ございましたら、コメントを宜しくお願いいたします。

14
15
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
14
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?