高身長プログラマ

口だけだったプログラマが奮闘するブログ。iOS, Android

【iOS】Auto Layoutで非表示箇所を簡単にトルツメ!

はじめに

非表示にした部分のレイアウトを詰めたい場面は多々あると思います。
その方法のご紹介です。

※iOS9以降では、UIStackViewを使用した方が簡単だと思いますが、
 iOS9未満をサポートしないといけない場合の参考になれば!

全体

f:id:n_yuu30:20181024004046g:plain UIButtonを3つ並べています。

今回は真ん中の"Button2"を非表示となった場合に
"Button3"がトルツメされるよう実装していこうと思います。

Auto Layout設定

各ボタンのAuto Layout設定です。
左隣のボタンから15、上下は配置した位置のまま設定していきます。

Button3は、Button2が非表示になった場合に
トルツメしたいのでButton3 → Button1へのAuto Layoutも設定します。

その1 Button1

f:id:n_yuu30:20181023234300p:plain

その2 Button2

f:id:n_yuu30:20181023234315p:plain

その3 Button3

f:id:n_yuu30:20181023234338p:plain

その4 Button3 → Button1 へ設定

f:id:n_yuu30:20181023235001p:plain

ここまで設定が終わると"その3" と "その4"の制約が競合しているため、エラーとなっていると思います。
"その4"の制約はButton2が非表示になった場合に有効となればいいため、今のところ必要ありません。
なので、Priority(優先度)を下げ、"その4"の制約が効かない状態にします。

その5 "その4"の制約のPriorityを下げる(1000 → 250)

f:id:n_yuu30:20181024000044p:plain

これでエラーがなくなったと思います。
続いて、コードの処理部分を見ていきます。

コードで表示/非表示時の処理

f:id:n_yuu30:20181022002516p:plain ストーリーボードとの紐付けは以下を行なっています。
・Button2
・Button2の右側マージン(その3で設定している左15)
・showボタン押下時のアクション
・hiddenボタン押下時のアクション

Button2 非表示処理(hiddenボタン押下時)
  1. Button2を非表示に設定
  2. Button2の右側マージンのActiveをfalseに設定
    → constantのActiveにfalseに設定するとその制約が無効となります。
     そのため、"その5"で設定したPriority250の制約が有効となります。
Button2 表示処理(showボタン押下時)
  1. Button2を表示に設定
  2. Button2の右側マージンのActiveをtrueに設定

⭐️注意点としては、constantにActive=falseを設定するとconstantがnilとなってしまうため、プロパティ属性のweakを消しておく必要があります。

以下のサイトを参考にさせていただきました。
egg-is-world.com