UIPanGestureRecognizerで制約を更新する

Question

画面の中央にtopContainerView（オレンジ色）とbottomContainerView（緑色）を分ける黒のseparatorViewがあります。 separatorViewはpanGestureで上下にドラッグできますが、上下のビューを取得して制約を更新したりサイズを変更することはできません。オレンジ色のビューの下部と緑色のビューの上端は常にseparatorViewに固執する必要があります。

ここで私は（変数宣言を含むように更新）しているコードです：

let separatorView: UIView = { 
 
    let view = UIView() 
 
    view.backgroundColor = UIColor.black 
 
    view.translatesAutoresizingMaskIntoConstraints = false 
 
    return view 
 
}() 
 

 
let topContainerView : UIView = { 
 
    let view = UIView() 
 
    view.backgroundColor = UIColor.orange 
 
    view.translatesAutoresizingMaskIntoConstraints = false 
 
    return view 
 
}() 
 

 
let bottomContainerView : UIView = { 
 
    let view = UIView() 
 
    view.backgroundColor = UIColor.green 
 
    view.translatesAutoresizingMaskIntoConstraints = false 
 
    return view 
 
}() 
 

 
override func viewDidLoad() { 
 
     super.viewDidLoad() 
 
     self.addViews() 
 
     let panGesture = UIPanGestureRecognizer(target: self, action: #selector(detectPan(recognizer:))) 
 
     panGesture.delaysTouchesBegan = false 
 
     panGesture.delaysTouchesEnded = false 
 
     separatorView.addGestureRecognizer(panGesture) 
 
    } 
 

 
    override func didReceiveMemoryWarning() { 
 
     super.didReceiveMemoryWarning() 
 
     // Dispose of any resources that can be recreated. 
 
    } 
 
    
 
    func addViews() { 
 
     
 
     view.addSubview(topContainerView) 
 
     view.addSubview(bottomContainerView) 
 
     view.addSubview(separatorView) 
 
     
 
     separatorView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true 
 
     separatorView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true 
 
     separatorView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true 
 
     separatorView.heightAnchor.constraint(equalToConstant: 50).isActive = true 
 
     
 
     topContainerView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true 
 
     topContainerView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true 
 
     topContainerView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true 
 
     topContainerView.bottomAnchor.constraint(equalTo: separatorView.topAnchor).isActive = true 
 
     
 
     bottomContainerView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true 
 
     bottomContainerView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true 
 
     bottomContainerView.topAnchor.constraint(equalTo: separatorView.bottomAnchor).isActive = true 
 
     bottomContainerView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true 
 
    } 
 
    
 
    func detectPan(recognizer: UIPanGestureRecognizer) { 
 
     let translation = recognizer.translation(in: self.view) 
 
     separatorView.center = CGPoint(x: view.center.x, y: lastLocation.y + translation.y) 
 
    } 
 
    
 
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) { 
 
     self.view.bringSubview(toFront: separatorView) 
 
     lastLocation = separatorView.center 
 
    }

Answer 1

あなたは単に自動レイアウトをすることはできません使用しています要素のフレームを変更します（暗黙的に行っていることです）。 centerプロパティを変更して）。まあ、できますが、他の要素には影響しません（あなたが見つけたように）、Autolayoutがトリガーされるとすぐに、フレームの変更がリセットされます。

Autolayoutで必要な結果が得られるように制約を操作する必要があります。

この場合、区切り記号をビューの中央に結ぶ制約のconstantプロパティを変更する必要があります。パンジェスチャ認識プログラムの翻訳値を使用してこれを行うことができます。ちょっとした難点は、この変換がパンの始めに0に関連していることです。そのため、前のパンからのオフセットを組み込む必要があります。

let separatorView: UIView = { 
    let view = UIView() 
    view.backgroundColor = UIColor.black 
    view.translatesAutoresizingMaskIntoConstraints = false 
    return view 
}() 

let topContainerView : UIView = { 
    let view = UIView() 
    view.backgroundColor = UIColor.orange 
    view.translatesAutoresizingMaskIntoConstraints = false 
    return view 
}() 

let bottomContainerView : UIView = { 
    let view = UIView() 
    view.backgroundColor = UIColor.green 
    view.translatesAutoresizingMaskIntoConstraints = false 
    return view 
}() 

var centerConstraint: NSLayoutConstraint! 

var startingConstant: CGFloat = 0.0 

override func viewDidLoad() { 
    super.viewDidLoad() 
    self.addViews() 
    let panGesture = UIPanGestureRecognizer(target: self, action: #selector(detectPan(recognizer:))) 
    panGesture.delaysTouchesBegan = false 
    panGesture.delaysTouchesEnded = false 
    separatorView.addGestureRecognizer(panGesture) 
} 

override func didReceiveMemoryWarning() { 
    super.didReceiveMemoryWarning() 
    // Dispose of any resources that can be recreated. 
} 

func addViews() { 

    view.addSubview(topContainerView) 
    view.addSubview(bottomContainerView) 
    view.addSubview(separatorView) 

    separatorView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true 
    separatorView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true 

    self.centerConstraint = separatorView.centerYAnchor.constraint(equalTo: view.centerYAnchor) 
    self.centerConstraint.isActive = true 

    separatorView.heightAnchor.constraint(equalToConstant: 50).isActive = true 

    topContainerView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true 
    topContainerView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true 
    topContainerView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true 
    topContainerView.bottomAnchor.constraint(equalTo: separatorView.topAnchor).isActive = true 

    bottomContainerView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true 
    bottomContainerView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true 
    bottomContainerView.topAnchor.constraint(equalTo: separatorView.bottomAnchor).isActive = true 
    bottomContainerView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true 
} 

func detectPan(recognizer: UIPanGestureRecognizer) { 

    switch recognizer.state { 
    case .began: 
     self.startingConstant = self.centerConstraint.constant 
    case .changed: 
     let translation = recognizer.translation(in: self.view) 
     self.centerConstraint.constant = self.startingConstant + translation.y 
    default: 
     break 
    } 
}