垂直UISlider约束

时间:2016-12-06 02:51:54

标签: swift uislider

我正在创建一个垂直的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])

但是当我运行它时,我得到了这个

enter image description here

这比我今天早些时候要好得多。但是,我希望滑块是正常的宽度......看起来正常只是垂直

关于我错过的任何想法? (哦,忽略左边的那个小紫色分支,这是我添加的其他2个滑块但是还没有约束。)

2 个答案:

答案 0 :(得分:4)

您正在更改bounds的{​​{1}}和transform,并且同时使用自动布局,因此可能会有点混乱。

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

bounds

如果您想将其余2个滑块中的一个放在超级视图的左侧或右侧,请不要将其水平居中,而是执行以下操作:

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)

这就是我得到的: Test Project Result

答案 1 :(得分:1)

(截至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
*/