iOS,Swiftノウハウ集: スタックビューを使ってトルツメ(非表示のUIコンポーネントを詰める)のUIを作る方法

アプリを作っていて、UILabelやUIViewなどの表示・非表示を切り替えたいということがあるかと思います。

上記の例では、天気の表示・非表示ボタンをタップすることで、天気の詳細のラベルを表示したり非表示にしたりできるようにしています。

普通にラベルを非表示にするだけだと、上記のように元々天気の詳細ラベルがあった場所にスペースが出来てしまいます。

ですが非表示の時はこのスペースを詰めたほうがより見栄えの良いUIになりますよね。

このようなUIはUIStackViewを使うと実現できます。

今回はUIStackViewを使って、ラベルを非表示にするときに、そのラベルのスペースを詰めるUIの作り方を説明していきたいと思います。

StoryboardでUIStackViewを使う

早速UIStackViewを使ってみましょう。まずは使う部品を通常通り配置します。

例としてまずUILabelを2つ置きます。ラベルのコンストレイントはheightのみつけておきます。

次にこの2つのラベルをStackViewに入れます。
まずStoyboardで、先程置いた2つのラベルをShiftを押しながら選択します。
次に下記のスクリーンショットで右下の青で囲まれているアイコンをクリックするとメニューが出てきますので、Stack Viewを選びます。

これだけでラベルがUIStackViewに入りました。

UIStackViewを入れただけだとレイアウトが崩れてしまっています。レイアウトを整えるためにコンストレイトをつけていきましょう。

UIStackViewにコンストレイントをつける

StackViewに対して、top、leading、trailingコンストレイントをつけましょう。値はデザインに合わせて適宜変更してください。

これでレイアウトが整いました。

次にボタンを置いて、ラベルの表示/非表示を切り替えられるようにしましょう。

「天気」と書いてあるラベルの横にボタンを置きます。

ボタンが縦に置かれてしまいました。

StackViewにはVertical(縦)、Horizontal(横)2つの方向(Axis)があり、1つのStackViewの中で2つの方向を混在させることは出来ません。

先程ボタンを追加したUIStackViewの方向は縦方向なので、新たに追加したUIButtonが縦方向に配置されてしまったのです。

UIStackViewのAxisを変更する

縦方向ではなく、ラベルの横にボタンを配置したいので、ラベルとボタンを新しいUIStackViewに入れてAxis(方向)をHorizontalにします。

天気ラベルとボタンをShiftを押しながら選択し、右下のアイコンからStackViewを選択します。これでラベルとボタンがStackViewに入りますが、このままだと方向がVertical(縦)のままなので、Horizontalに変更します。

ボタンのタイトルもStoryboardで設定しておきましょう。

まず通常のボタンの状態（State ConfigがDefault)のタイトルを「非表示」にし、

つぎに、選択状態のボタンの状態（State ConfigがSelected)のタイトルを「表示」にしておきます。

これで、通常時は、「表示」、タップして選択すると「非表示」となるボタンができました。

ここからはコードでボタンがタップされたときにラベルの表示非表示を切り替える部分を実装していきます。

まずは、非表示にできるようにしたいラベルをUIViewControllerで宣言します。(名前は適宜変更してください。)

@IBOutlet weak var weatherDescriptionLabel: UILabel!

次に足したボタンのアクションを定義して、ボタンと紐付けます。

@IBAction func secretButtonTapped(_ sender: Any) {
    weatherDescriptionLabel.isHidden = !weatherDescriptionLabel.isHidden
}

これだけで、ラベルの表示/非表示の切り替えが出来るようになっているはずです。

これだけだとラベルが非表示になったときに、その分のスペースがちゃんと詰められているか、ただ非表示になっているだけなのか分かりにくいので下にもう一つUIStackViewを置いて確認してみます。

例として、天気の下に評価のラベルを置いてみましょう。

完成

ラベルが非表示の場合はちゃんとラベル分のスペースが詰められていますね。

まとめ

今回はUIStackViewを使ってトルツメのレイアウトを実現する方法をまとめました。

①UIコンポーネントをUIStackViewに入れる
②UIStackViewにコンストレイントをつける
③UIStackView内のUIコンポーネントをhiddenに設定するとそのコンポーネントの部分が詰まる