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

Swift, プログラム

2017.08.12

つぶやく

はてブ

あとで

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

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

例えば

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

などなど。

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

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

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

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

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

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

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の高さの制約の値をフラグで動的に変更するコードになります。

import UIKit

class ViewController: UIViewController {
    
    /// blueViewの高さの制約
    @IBOutlet weak var blueViewHeightConstraint: NSLayoutConstraint!
    /// 高さを調整するかを判定するフラグ
    var flg = true
    

    override func viewDidLoad() {
        super.viewDidLoad()
        
        if flg {
            blueViewHeightConstraint.constant = 0
        }
    }

}