垂直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])

但是当我运行它的时候，我得到了这个

​

​

比我今天早些时候做的要好得多。然而，我希望滑块是普通的width..and看起来很正常只是垂直的

对我错过了什么有什么想法吗？(哦，忽略左边那个紫色的小分支，那是我添加的另外两个滑块，但还没有约束。)

Answer 1

您正在更改您的bounds和transform的UISlider，并同时使用自动布局，因此它可能有点混乱。

我建议您不要修改bounds，而是使用自动布局。您应该将滑块宽度设置为其superview高度，并将滑块设置在其superview中。这样，当你旋转它时，它的高度(旋转后)--实际上是它的宽度(旋转前)--将等于它的superview高度。将滑块垂直对中将确保滑块接触到其superview的底部和顶部。

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

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

如果您想将剩下的两个滑块中的一个放置在其superview的左边或右侧，请不要将其水平居中，而是执行以下操作：

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)
    }
}

我得到的是：

​

Answer 2

(截至2017年7月7日)

self.customSlider = [[UISlider alloc] init]];
self.customView = [[UIView alloc] init];

//create the custom auto layout constraints that you wish the UIView to have

[self.view addSubview:self.customView];
[self.customView addSubview:self.customSlider];
self.slider.transform = CGAffineTransformMakeRotation(-M_PI_2);

/*Create the custom auto layout constraints for self.customSlider to have these 4 constraints:
    //1. self.customSlider CenterX = CenterX of self.customView
    //2. self.customSlider CenterY = CenterY of self.customView
    //3. self.customSlider width = self.customView height
    //4. self.customSlider height = self.customView width
*/