将垂直滑块约束在另一个对象的顶部锚点上

Question

在我的 swift 代码中，有 2 个滑块，1 个位于底部，1 个是约束并垂直旋转。我想要做的是将右侧滑块限制到底部滑块的顶部锚点。您可以在照片中看到当前的输出和我正在寻找的内容。

import UIKit

 class ViewController: UIViewController {


var bottomSlider = UISlider()
var rightSlider = UISlider()



override func viewDidLoad() {
    super.viewDidLoad()
    
    rightSlider.transform = CGAffineTransform(rotationAngle: .pi / 2)
   
    
    
    bottomSlider.value = 1
    [ bottomSlider, rightSlider].forEach {
        view.addSubview($0)
        $0.translatesAutoresizingMaskIntoConstraints = false
        $0.layer.borderWidth = 1
        $0.backgroundColor = UIColor(
            red: .random(in: 0.5...0.7),
            green: .random(in: 0.0...1),
            blue: .random(in: 0.3...0.5),
            alpha: 1
        )
        $0.layer.borderWidth = 1
        
        if let button = $0 as? UIButton {
            button.setTitleColor(.black, for: .normal)
        }
    }
    
    // Initialize sliderX's properties
    NSLayoutConstraint.activate([
        
        rightSlider.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -30),
        rightSlider.centerYAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerYAnchor),
        rightSlider.widthAnchor.constraint(equalTo: view.safeAreaLayoutGuide.heightAnchor),
       
        
        
        bottomSlider.bottomAnchor.constraint(equalTo: view.bottomAnchor,constant: -60),
        bottomSlider.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.08),
        bottomSlider.widthAnchor.constraint(equalTo: view.widthAnchor),
        bottomSlider.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        
    
    ])
    
    bottomSlider.minimumValue = 1
    bottomSlider.maximumValue = 3
    
   
}


}

Answer 1

在这种情况下，将垂直滑块包裹到另一个

UIView

中会更方便。然后，您可以像平常一样定位

UIView

。

class VerticalSlider: UIView {
    let wrappedSlider = UISlider()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        addSubview(wrappedSlider)
        wrappedSlider.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            wrappedSlider.centerXAnchor.constraint(equalTo: self.centerXAnchor),
            wrappedSlider.centerYAnchor.constraint(equalTo: self.centerYAnchor),
            // note the swapped width and height constraints here, because the slider is rotated
            wrappedSlider.widthAnchor.constraint(equalTo: self.heightAnchor),
            wrappedSlider.heightAnchor.constraint(equalTo: self.widthAnchor),
        ])
        wrappedSlider.transform = .init(rotationAngle: .pi / 2)
    }
    
    required init?(coder: NSCoder) {
        fatalError()
    }
}

然后您可以像平常一样定位

VerticalSlider

。

class MyViewController: UIViewController {

    override func viewDidLoad() {
        let rightSlider = VerticalSlider()
        rightSlider.wrappedSlider.maximumValue = 1
        rightSlider.wrappedSlider.minimumValue = 0
        rightSlider.wrappedSlider.value = 0.5
        rightSlider.translatesAutoresizingMaskIntoConstraints = false
        
        let bottomSlider = UISlider()
        bottomSlider.maximumValue = 1
        bottomSlider.minimumValue = 0
        bottomSlider.value = 0.5
        bottomSlider.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(rightSlider)
        view.addSubview(bottomSlider)
        
        // note that I changed some of the constraints to use the safeAreaLayoutGuide of the view
        // you wouldn't want your sliders to go out of the safe area, would you?
        NSLayoutConstraint.activate([
            bottomSlider.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
            bottomSlider.heightAnchor.constraint(equalTo: view.safeAreaLayoutGuide.heightAnchor, multiplier: 0.08),
            bottomSlider.widthAnchor.constraint(equalTo: view.safeAreaLayoutGuide.widthAnchor),
            bottomSlider.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
            
            rightSlider.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            rightSlider.bottomAnchor.constraint(equalTo: bottomSlider.topAnchor, constant: -8),
            rightSlider.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -30)
        ])
    }
}

输出（横向模式，这样截图不会显得太大）：