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

但是当我运行它，我得到这个

这远远比我今天早些时候有更好的。然而，我想滑块是正常的宽度..以及看起来正常只是垂直

任何想法我错过了什么？ （呵呵忽略小紫分支到左侧，这是其他2个滑块，我加入，但没有限制呢。）

Answer 1

你改变bounds和你UISlider的transform并使用自动 - 同时布局，这样可能会有点混乱。

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

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

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

如果要放置剩余的2个滑块向左或他们的上海华盈的权利之一，不水平居中，但千万不要使用以下：

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

（如7月7日，2017）

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 
*/