Вертикальные ограничения 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 и transform вашего UISlider и с использованием ауто- Макет в то же время, так что это может быть немного запутанным.

Я предлагаю вам не изменять 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) 

Кроме того, тщательно проверьте ваша консоль для журналов ошибок Auto-Layout.

EDIT: Я проверил приведенный выше код на тестовый проект, вот мой взгляд контроллер код:

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 июля , 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 
*/