Storybordで制約を付け直す（Xcode、iOS）

こんにちは、オフィス狛 モバイル開発担当 Aika-yuy です。

viewを動的に消したり、表示したり、大きさを変更したいときなどに制約も修正しなければいけないと思います。

そんな時にコードで修正するのが面倒。。なんてことはないでしょうか。
そこでstorybordで簡単に制約を付け直す方法をご紹介します。
コードでの修正はとても少なく、使いやすいです。

まず、３つのviewを用意し、間を均等に60空ける制約をつけます。

今回は、動的にyellowViewを消す場合をやってみます。

黄色のviewを消してみました。

黄色のviewがなくなっても、赤と青のviewの位置はそのままです。

それでは、変更したい制約をstorybordで作ります。

この時制約同士が、ぶつかってしまうので後からつけた制約を無効にしなければなりません。
写真では、無効にしてあるので、色が薄くなっています。こうなっていればOKです。

上の写真のように、installedのチェックを外すだけです！！

それができたら、viewControllerに接続します。

後は消したいタイミングで　.isActiveをtrueにするだけです。

と言いたいところですが、、、、、
制約の変更はスレッドセーフではない為、メインスレッドで実行しないと反映されません。
DispatchQueue.main.async {}で囲みましょう。

うまくできました！！！

class ViewController: UIViewController {

    @IBOutlet weak var redView: UIView!
    @IBOutlet weak var yellowView: UIView!
    @IBOutlet weak var blueView: UIView!
    @IBOutlet weak var changeConstraint: NSLayoutConstraint!
    @IBOutlet weak var blueViewConstraint: NSLayoutConstraint!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.yellowView.isHidden = true
        
        DispatchQueue.main.async {
            self.blueViewConstraint.isActive = false
            self.changeConstraint.isActive = true
        }
    }
}