AutoLayoutを設定した、Viewの挙動について。

Question

前提・実現したいこと

ボタンを押した際にボタンを画面全体に広げたい。

autoLayoutについて勉強しているのですが、理解が浅いので質問させていただきます。
ソースコードのまま動かすと、animation?（一瞬白くなる）したあとまた左の画像のように画面いっぱいに広がりません。
制約を付与した後に、制約を付与したviewのサイズを変更する方法が知りたいです。
またボタンを押して、全画面になった後、再度ボタンを押せば制約したサイズに戻したいのですが、可能なのでしょうか？

.isActive = falseとしても一度付与した制約は解けないのでしょうか？

初歩的な質問かと思いますが、回答お願いします。

該当のソースコード

import UIKit

class ViewController: UIViewController {
    
    var Button = UIButton()
    var flag:Bool = true

    override func viewDidLoad() {
        super.viewDidLoad()
        
        Button.backgroundColor = UIColor.lightGray
        Button.setTitle("Button", for: .normal)
        Button.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(Button)
        
        Button.addTarget(self, action: #selector(ViewController.tapAction(_:)), for: .touchUpInside)
        
        Button.widthAnchor.constraint(equalToConstant: 120).isActive = true
        Button.heightAnchor.constraint(equalToConstant: 60).isActive = true
        Button.centerYAnchor.constraint(equalToSystemSpacingBelow: self.view.centerYAnchor, multiplier: 1.0).isActive = true
        Button.centerXAnchor.constraint(equalToSystemSpacingAfter: self.view.centerXAnchor, multiplier: 1.0).isActive = true
  
        // Do any additional setup after loading the view.
    }
    @objc func tapAction(_ : AnyObject){
        
        if flag == true {
            
            UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveLinear, animations: {
                
                self.Button.widthAnchor.constraint(equalToConstant: 120).isActive = false
                self.Button.heightAnchor.constraint(equalToConstant: 60).isActive = false
                self.Button.centerYAnchor.constraint(equalToSystemSpacingBelow: self.view.centerYAnchor, multiplier: 1.0).isActive = false
                self.Button.centerXAnchor.constraint(equalToSystemSpacingAfter: self.view.centerXAnchor, multiplier: 1.0).isActive = false
                
                self.Button.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height)
                
                self.flag = false
                
                
            }, completion: nil)
        }else if flag == false {
            
            UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveLinear, animations: {
                
                self.Button.widthAnchor.constraint(equalToConstant: 120).isActive = true
                self.Button.heightAnchor.constraint(equalToConstant: 60).isActive = true
                self.Button.centerYAnchor.constraint(equalToSystemSpacingBelow: self.view.centerYAnchor, multiplier: 1.0).isActive = true
                self.Button.centerXAnchor.constraint(equalToSystemSpacingAfter: self.view.centerXAnchor, multiplier: 1.0).isActive = true

                self.flag = true
                
            }, completion: nil)
            
        }
        
    }
}

開発環境

Swift5
Xcode Version 11.3.1 (11C504)

Answer 1

.isActive = falseとしても一度付与した制約は解けないのでしょうか？

Button.widthAnchor.constraint(equalToConstant: 120)を実施する度に新しい制約が生成され、それに対してisActiveを設定しています。
ある制約に対して、設定の変更を行うのなら、メンバ変数に

    var widthConstraint: NSLayoutConstraint
```等を追加し、viewDidLoad内で
```ここに言語を入力
    widthConstraint = Button.widthAnchor.constraint(equalToConstant: 120)
    widthConstraint.isActive = true
```を実行し、後はactionに応じて
```ここに言語を入力
    widthConstraint.isActive = false
// ↑や↓
    widthConstraint.constraint = 640
```を行えば、設定は変更出来ます。

Comments

[atk_721]

わかりやすく回答していただき助かりました。widthConstraint.constraint = 640の様に指定する時、指定する前にwidthConstraintのisActive = false として、一度かけた制約を切ってから、新たに制約を付与するという認識で合っていますか？

[dsuzuki]

constraintの変更だけで画面に反映されます。（isActiveの再設定は不要です。）

調査中に気付いたのですが、２つのNSLayoutConstraintを用意し、制約を動的に変更する場合、実装順によってはコンソールにエラーログが表示されます。（動作に影響はありませんでしたが。）
例：
相反する２つの制約があり、
constraintA.isActive = false
constraintB.isActive = true
の状態で、
constraintA.isActive = true
constraintB.isActive = false
と実装すると、constraintA.isActive = true の段階でconstraintB（= true）の制限と矛盾し、エラーログが出力されます。

[atk_721]

なるほど、調べていただいきありがとうございます！理解が深まりました！