[Swift3]Autolayoutの値をコードで変更する方法
こんにちは、プログラマーの@Yuuです。
開発時に「AutoLayoutで設定した制約の値を変更したい!」という事、皆さんはありませんか?
例えば
- ユーザに課金をしてもらったら広告枠として設定していたViewの高さを0にしたい
- アニメーションをさせるために制約の値を変更したい
などなど。
この記事では、storyboard上で設定したAutoLayoutの制約の値をコード上で変更する方法をご紹介します。
スポンサーリンク
AutoLayoutの制約の値をコードで変更する方法
今回は広告枠に見立てた青いViewの高さをコード上で変更します。
処理の内容は大きく3つに分けて解説します。
- storyboard上で広告に見立てた青いViewを表示した状態で作成
- storyboard上の制約をコードと紐付ける
- コード上でフラグとなる変数を作り、フラグがtrueだったら青いViewの高さを0にする
storyboardで2つのViewを配置・設定
この後はオレンジ色のViewを『orangeView』、青い色のViewを『blueView』として説明を進めます。
それぞれのAutoLayoutを以下のように設定します。
orangeView
- TopSpace・・SuperViewに対して0
- TrailingSpace・・SuperViewに対して0
- LeadingSpace・・SuperViewに対して0
- BottomSpace・・blueViewに対して0
blueView
- TrailingSpace・・SuperViewに対して0
- LeadingSpace・・SuperViewに対して0
- BottomSpace・・SuperViewに対して0
- Height・・50を設定
肝となるのが、blueViewは高さを50と固定値にし、orangeViewのbottomSpaceをblueViewに対して0を設定する部分です。
こうすることでblueViewの高さを調整するとorageViewの高さがそれに応じて変わるようになります。
heightの制約をコードと紐付ける
今回1番重要な部分です。
ここさえ知識として知っていれば、他の制約もコードと紐付けて値を変更する方法が分かるようになります。
ではblueViewに設定した「Height50」という値をコード上で変更出来るようにしていきます。
storyboardの表示を「Show the Assistant editor」に変更。
下記画像のようにstoryboardでblueViewのConstraintを開き、Heightの制約をコードと紐付けます。
今回はblueViewHeightConstraint
という変数名で紐付けます。
コードで制約の値を変更する
以下がblueViewの高さの制約の値をフラグで動的に変更するコードになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import UIKit class ViewController: UIViewController { /// blueViewの高さの制約 @IBOutlet weak var blueViewHeightConstraint: NSLayoutConstraint! /// 高さを調整するかを判定するフラグ var flg = true override func viewDidLoad() { super.viewDidLoad() if flg { blueViewHeightConstraint.constant = 0 } } } |
重要なのはマーカーがひいてある15行目。
ここでblueViewの高さの制約の値を調整しています。
なので、例えばここの値を100
にすればblueViewの高さも100に変更され、orangeViewもそれに応じた高さになります。
余談ですが、
コード上で変更している「constant」がstoryboard上で定義されていないのかなと思って調べると、
以下の画像のようにユーティリティのところに表示されているんですね。
あとがき
制約の値を変更する方法を覚えておくと何かと便利です。
特にアニメーションをさせる場合には必須になってきますし、覚えておいて損はないかな、と思います。
書き方もそんなに難しくないですし、
この記事を見て自分のものにしてもらえれば幸いです。
ではでは
今回はこの辺で!ヽ(•̀ω•́ )ゝ✧