将具有可变约束的对象对齐到视图上的中心 x 点

Question

我希望下面的快速代码将框与 x 轴的中心对齐。您可以从下面的 gif 中看到我的代码在做什么。当按下紫色按钮时，我希望框对齐。我不知道该怎么做，因为一些约束被声明为 var 我不知道下一步该去哪里。

import UIKit

class ViewController: UIViewController {
    
    var slizer = UISlider()
    var viewDrag = UIImageView()
    var b2 = UIButton()
    var panGesture = UIPanGestureRecognizer()
    
    // Width, Leading and CenterY constraints for viewDrag
    var widthConstraints: NSLayoutConstraint!
    var viewDragLeadingConstraint: NSLayoutConstraint!
    var viewDragCenterYConstraint: NSLayoutConstraint!
    
    var tim: CGFloat = 50.0
    var slidermultiplier: CGFloat = 0.6
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        [viewDrag,slizer,b2].forEach{
            $0.translatesAutoresizingMaskIntoConstraints = false
            view.addSubview($0)
        }
        b2.backgroundColor = .purple
        
        NSLayoutConstraint.activate([
            
            
            b2.bottomAnchor.constraint(equalTo: slizer.topAnchor),
            b2.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            b2.heightAnchor.constraint(equalTo: view.heightAnchor,multiplier: 0.05),
            b2.widthAnchor.constraint(equalTo: view.widthAnchor,multiplier: 1),
            
            
            
            slizer.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            slizer.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            slizer.heightAnchor.constraint(equalTo: view.heightAnchor,multiplier: 0.2),
            slizer.widthAnchor.constraint(equalTo: view.widthAnchor,multiplier: 1),
        ])
        
        slizer.addTarget(self, action: #selector(increase), for: .valueChanged)
        
        viewDrag.backgroundColor = .orange
        
        // no point setting a frame, since
        //  viewDrag has .translatesAutoresizingMaskIntoConstraints = false
        //viewDrag.frame = CGRect(x: view.center.x-view.frame.width * 0.05, y: view.center.y-view.frame.height * 0.05, width: view.frame.width * 0.1, height: view.frame.height * 0.1)
        
        // start with viewDrag
        //  width = "slidermultiplier" percent of view width
        widthConstraints = viewDrag.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: slidermultiplier)
        // Leading = "tim" pts from view leading
        viewDragLeadingConstraint = viewDrag.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: tim)
        //  centered vertically
        viewDragCenterYConstraint = viewDrag.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        
        NSLayoutConstraint.activate([
            
            // viewDrag height will never change, so we can set it here
            viewDrag.heightAnchor.constraint(equalTo: view.heightAnchor,multiplier: 0.3),
            
            // activate the 3 "modifiable" constraints
            widthConstraints,
            viewDragLeadingConstraint,
            viewDragCenterYConstraint,
            
        ])
        
        panGesture = UIPanGestureRecognizer(target: self, action: #selector(draggedView(_:)))
        
        viewDrag.isUserInteractionEnabled = true
        viewDrag.addGestureRecognizer(panGesture)
        
        // start the slider at the same percentage we've used
        //  for viewDrag's initial width
        slizer.value = Float(slidermultiplier)
        
        b2.addTarget(self, action: #selector(press), for: .touchDown)
        
    }
    
    @objc func press(){
        
        
        
    }
    
    @objc func draggedView(_ sender: UIPanGestureRecognizer) {
        // old swift syntax
        //self.view.bringSubview(toFront: viewDrag)
        self.view.bringSubview(toFront: viewDrag)
        
        let translation = sender.translation(in: self.view)
        viewDragLeadingConstraint.constant += translation.x
        viewDragCenterYConstraint.constant += translation.y
        
        // don't do this
        //viewDrag.center = CGPoint(x: viewDrag.center.x + translation.x , y: viewDrag.center.y + translation.y)
        
        sender.setTranslation(CGPoint.zero, in: self.view)
    }
    
    @objc func increase() {
        // get the new value of the slider
        slidermultiplier = CGFloat(slizer.value)
        
        // deactivate widthConstraints
        widthConstraints.isActive = false
        // create new widthConstraints with slider value as a multiplier
        widthConstraints = viewDrag.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: slidermultiplier)
        // activate the new widthConstraints
        widthConstraints.isActive = true
    }
    
    
}

Answer 1

我建议直接使用框架而不是约束。 约束适用于处理可变屏幕尺寸和屏幕旋转。

第 1 步：将可移动对象放入容器视图中

第 2 步：通过容器视图内的坐标处理对象

第 3 步：将容器添加到您的视图控制器的视图并约束布局它与其他元素

class ViewController: UIViewController {
    @IBOutlet weak var container: Container!
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        container.addPanGestures()
    }
    @IBAction func didTapLeftButton(_ sender: Any) {
        container.setLeftAlign()
    }
    
    @IBAction func didTapCenterButton(_ sender: Any) {
        container.setCenterXAlign()
    }
    
    @IBAction func didTapRightButton(_ sender: Any) {
        container.setRightAlign()
    }
    
    @IBAction func slide(_ sender: UISlider) {
        let scale = CGFloat(max(sender.value, 0.1))
        container.setWidthScale(scale)
    }
}

class Container: UIView {
    func setLeftAlign() {
        for view in self.subviews {
            view.frame.origin = CGPoint(x: 0, y: view.frame.origin.y)
        }
    }
    
    func setRightAlign() {
        for view in self.subviews {
            view.frame.origin = CGPoint(x: self.frame.width - view.frame.width, y:view.frame.origin.y)
        }
    }
    
    func setCenterXAlign() {
        for view in self.subviews {
            var center = view.center
            center.x = self.frame.width / 2
            view.center = center
        }
    }
    
    func setWidthScale(_ ratio: CGFloat) {
        for view in self.subviews {
            var frame = view.frame
            let center = view.center
            frame.size.width = self.frame.width * ratio
            view.frame = frame
            view.center = center
        }
    }
    
    func addPanGestures() {
        for v in self.subviews {
            let panGesture = UIPanGestureRecognizer(target: self, action: #selector(didPan(_:)))
            v.addGestureRecognizer(panGesture)
        }
    }
    
    private var initCenter: CGPoint!
    @objc func didPan(_ sender: UIPanGestureRecognizer) {
        let view = sender.view!
        let translation = sender.translation(in: view)
        
        switch sender.state {
        case .began:
            initCenter = view.center
        case .changed:
            view.center = CGPoint(x: initCenter.x + translation.x, y: initCenter.y + translation.y)
        case .cancelled:
            view.center = initCenter
        default:
            return
        }
        
    }
}