[Swift3]Autolayoutの値をコードで変更する方法

2017.08.12
AutoLayoutの値を変更する記事のアイキャッチ

こんにちは、プログラマーの@Yuuです。

開発時に「AutoLayoutで設定した制約の値を変更したい!」という事、皆さんはありませんか?

例えば

  • ユーザに課金をしてもらったら広告枠として設定していたViewの高さを0にしたい
  • アニメーションをさせるために制約の値を変更したい

などなど。

この記事では、storyboard上で設定したAutoLayoutの制約の値をコード上で変更する方法をご紹介します。

スポンサーリンク

AutoLayoutの制約の値をコードで変更する方法

今回は広告枠に見立てた青いViewの高さをコード上で変更します。


制約の値を変更して見た目を変更する

処理の内容は大きく3つに分けて解説します。

  1. storyboard上で広告に見立てた青いViewを表示した状態で作成
  2. storyboard上の制約をコードと紐付ける
  3. コード上でフラグとなる変数を作り、フラグがtrueだったら青いViewの高さを0にする

storyboardで2つのViewを配置・設定

2つのViewを配置します。

2つのViewを配置

この後はオレンジ色のViewを『orangeView』、青い色のViewを『blueView』として説明を進めます。

それぞれのAutoLayoutを以下のように設定します。

orangeView

  • TopSpace・・SuperViewに対して0
  • TrailingSpace・・SuperViewに対して0
  • LeadingSpace・・SuperViewに対して0
  • BottomSpace・・blueViewに対して0


ornageViewのAutoLayoutの設定

blueView

  • TrailingSpace・・SuperViewに対して0
  • LeadingSpace・・SuperViewに対して0
  • BottomSpace・・SuperViewに対して0
  • Height・・50を設定


blueViewのAutoLayoutの設定

肝となるのが、blueViewは高さを50と固定値にし、orangeViewのbottomSpaceをblueViewに対して0を設定する部分です。
こうすることでblueViewの高さを調整するとorageViewの高さがそれに応じて変わるようになります。

heightの制約をコードと紐付ける

今回1番重要な部分です。
ここさえ知識として知っていれば、他の制約もコードと紐付けて値を変更する方法が分かるようになります。

ではblueViewに設定した「Height50」という値をコード上で変更出来るようにしていきます。

storyboardの表示を「Show the Assistant editor」に変更。

下記画像のようにstoryboardでblueViewのConstraintを開き、Heightの制約をコードと紐付けます。
今回はblueViewHeightConstraintという変数名で紐付けます。


storyboardからコードに紐付ける

コードで制約の値を変更する

以下がblueViewの高さの制約の値をフラグで動的に変更するコードになります。

重要なのはマーカーがひいてある15行目。
ここでblueViewの高さの制約の値を調整しています。
なので、例えばここの値を100にすればblueViewの高さも100に変更され、orangeViewもそれに応じた高さになります。

余談ですが、
コード上で変更している「constant」がstoryboard上で定義されていないのかなと思って調べると、
以下の画像のようにユーティリティのところに表示されているんですね。


storyboard上でもconstantの値を確認出来る

あとがき

制約の値を変更する方法を覚えておくと何かと便利です。
特にアニメーションをさせる場合には必須になってきますし、覚えておいて損はないかな、と思います。

書き方もそんなに難しくないですし、
この記事を見て自分のものにしてもらえれば幸いです。

ではでは
今回はこの辺で!ヽ(•̀ω•́ )ゝ✧

AutoLayoutの値を変更する記事のアイキャッチ

この記事が気に入ったらいいね!
して最新情報をチェックしよう!

スポンサーリンク