垂直UISlider约束

Question

我正在创建一个垂直的UISlider。我已经使用所有代码创建了它的视图。（其余的故事板元素使用界面生成器进行了约束）

根据我的阅读，要创建一个垂直的UISlider，您需要给UISlider一个宽度，然后旋转它。由于UISlider所在的容器的高度因屏幕尺寸而异，因此我不希望为其指定固定的高度（宽度）。

这就是我的想法

    // Mark: Slider View

    let leftSlider = UISlider()
    let centerSlider = UISlider()
    let rightSlider = UISlider()

    let colorSliders = [leftSlider, centerSlider, rightSlider]

    for slider in colorSliders {

        slider.translatesAutoresizingMaskIntoConstraints = false
        sliderContainer.addSubview(slider)

        let w = sliderContainer.bounds.width
        slider.bounds.size.width = w
        slider.center = CGPoint(x: w/2, y: w/2)
        slider.transform = CGAffineTransform(rotationAngle: CGFloat(-M_PI_2))

        slider.value = 0
        slider.minimumValue = 0
        slider.maximumValue = 255

        let sliderTopConstraint = slider.topAnchor.constraint(equalTo: centerHiddenView.bottomAnchor, constant: 5)
        let sliderBottomConstraint = slider.bottomAnchor.constraint(equalTo: sliderContainer.bottomAnchor, constant: 5)

        NSLayoutConstraint.activate([sliderTopConstraint, sliderBottomConstraint])
        slider.backgroundColor = .purple
        slider.isEnabled = true
        slider.isUserInteractionEnabled = true

    }

    let sliderContainerWidth: CGFloat = sliderContainer.frame.width


    let centerSliderHorizontalConstraints = centerSlider.centerXAnchor.constraint(equalTo: sliderContainer.centerXAnchor)

    let widthConstraint = centerSlider.widthAnchor.constraint(equalToConstant: sliderContainerWidth)

    let centerSliderWidthConstraint = centerSlider.widthAnchor.constraint(equalToConstant: 90)

    NSLayoutConstraint.activate([centerSliderHorizontalConstraints, centerSliderWidthConstraint, widthConstraint])

但是当我运行它时，我得到了

比我今天早些时候要好得多。但是，我希望滑块的宽度是正常的。并且看起来很垂直

关于我错过的任何想法？（哦，请忽略左侧的那个紫色小分支，这是我添加的但没有限制的其他两个滑块。）

Answer 1

您正在更改bounds和transform，UISlider同时正在使用自动版式，因此可能会有些混乱。

我建议您不要修改，bounds而是改用自动版式。您应将滑块的宽度设置为其父视图的高度，并将滑块置于其父视图的中央。这样，当您旋转它时，它的高度（旋转后）实际上就是它的宽度（旋转前）将等于其超级视图高度。将滑块垂直居中将确保滑块接触其视图的底部和顶部。

slider.widthAnchor.constraint(equalTo: sliderContainer.heightAnchor
slider.centerYAnchor.constraint(equalTo: sliderContainer.centerYAnchor)

slider.centerXAnchor.constraint(equalTo: sliderContainer.centerXAnchor)

如果要将剩余的两个滑块之一放在其视图的左侧或右侧，请不要将其水平居中，而应执行以下操作：

slider.leadingAnchor.constraint(equalTo: sliderContainer.leadingAnchor)

slider.trailingAnchor.constraint(equalTo: sliderContainer.trailingAnchor)

另外，请仔细检查控制台中的自动版式错误日志。

编辑： 我在测试项目上检查了上面的代码，这是我的视图控制器代码：

class ViewController: UIViewController {
    @IBOutlet private weak var containerView: UIView!


    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        let leftSlider = UISlider()
        let centerSlider = UISlider()
        let rightSlider = UISlider()
        let colorSliders = [leftSlider, centerSlider, rightSlider]

        var constraints = [NSLayoutConstraint]()
        for slider in colorSliders {
            slider.translatesAutoresizingMaskIntoConstraints = false
            containerView.addSubview(slider)

            slider.transform = CGAffineTransform(rotationAngle: CGFloat(-M_PI_2))

            constraints.append(slider.widthAnchor.constraint(equalTo: containerView.heightAnchor))
            constraints.append(slider.centerYAnchor.constraint(equalTo: containerView.centerYAnchor))

            slider.backgroundColor = .purple
        }
        constraints.append(leftSlider.centerXAnchor.constraint(equalTo: containerView.centerXAnchor))
        constraints.append(centerSlider.centerXAnchor.constraint(equalTo: containerView.leadingAnchor))
        constraints.append(rightSlider.centerXAnchor.constraint(equalTo: containerView.trailingAnchor))

        NSLayoutConstraint.activate(constraints)
    }
}

这就是我得到的：