center object on y axis that is connected to pan gesture

Question

I want my swift code to center a frame connected to a uipangesture to the y axis. You can see what I am looking for in the gif I created below. Right now I have figure out a way to do this. I found you can do something similar to this using nslayout constraints and making them be set to true. But it moves the box to the top of the screen and I want to do something similar to the gif below.

import UIKit

class ViewController: UIViewController {
    
    var container = UIView()
  
    
    var panGesture = UIPanGestureRecognizer()
    var btn = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        
        [container,btn].forEach{
            $0.translatesAutoresizingMaskIntoConstraints = false
            view.addSubview($0)
        }
        container.isUserInteractionEnabled = true
        btn.frame = CGRect(x: 100, y: 300, width: 100, height: 100)
        container.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
        container.backgroundColor = .blue
        btn.backgroundColor = .red
        panGesture = UIPanGestureRecognizer(target: self, action: #selector(ViewController.draggedView(_:)))
        container.isUserInteractionEnabled = true
        container.addGestureRecognizer(panGesture)
        
        btn.addTarget(self, action: #selector(centerYAlighment), for: .touchDown)

    }
    
    @objc func draggedView(_ sender: UIPanGestureRecognizer) {
        self.view.bringSubview(toFront: container)
        let translation = sender.translation(in: self.view)
        container.center = CGPoint(x: container.center.x + translation.x , y: container.center.y + translation.y)
        sender.setTranslation(CGPoint.zero, in: self.view)
        
        
        
        
        
    }
    
    @objc func centerYAlighment(){
       
    }


}

your question is not quite clear. Do you want to move the red box along with blue one, when blue one moves? — Shivani Bajaj, Apr 16 '21 at 10:44
The red box should not move at all. Only the blue box should move. The goal is to align the center of the blue box with the y axis. So the center point of the blue box should pass through the y axis. — Sam Burns, Apr 16 '21 at 22:11

aheze · Accepted Answer · 2021-04-20T01:11:06.487

For how to constrain the blue square's translation to only along the center Y axis, see this answer's history

Edit:

If you want the red button to center the blue square horizontally, just do container.center.x = view.center.x inside centerYAlignment().

class ViewController: UIViewController {
    
    var container = UIView()
      
    var panGesture = UIPanGestureRecognizer()
    var btn = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        [container,btn].forEach{
            $0.translatesAutoresizingMaskIntoConstraints = false
            view.addSubview($0)
        }
        container.isUserInteractionEnabled = true
        btn.frame = CGRect(x: 100, y: 300, width: 100, height: 100)
        container.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
        container.backgroundColor = .blue
        btn.backgroundColor = .red
        panGesture = UIPanGestureRecognizer(target: self, action: #selector(draggedView(_:)))
        container.isUserInteractionEnabled = true
        container.addGestureRecognizer(panGesture)
        
        btn.addTarget(self, action: #selector(centerYAlignment), for: .touchDown)

    }
    
    @objc func draggedView(_ sender: UIPanGestureRecognizer) {
        self.view.bringSubviewToFront(container)
        let translation = sender.translation(in: self.view)
        container.center = CGPoint(x: container.center.x + translation.x, y: container.center.y + translation.y)
        sender.setTranslation(CGPoint.zero, in: self.view)
    }
    
    
    @objc func centerYAlignment() {
        container.center.x = view.center.x /// here!
    }
}

Result:

The blue button should be able to move anywhere within the view in any direction its free. The red button should align it to the y axis — Sam Burns, Apr 19 '21 at 17:00
@SamBurns so when you press the red button, you want the blue button to be centered horizontally? — aheze, Apr 19 '21 at 17:24
yes that is correct. I want the blue button to be the same y position horizontally but I want it center horizontally just like I have in the image above — Sam Burns, Apr 19 '21 at 17:30
@SamBurns just do `container.center.x = view.center.x` inside `centerYAlignment() {` — aheze, Apr 19 '21 at 17:40
With your code I can't move around the blue square freely. Please change that for the answer. — Sam Burns, Apr 19 '21 at 21:57

center object on y axis that is connected to pan gesture

1 Answers1

Edit: