Vertical UISlider in iOS with autolayout

user_265341 0
Viewed 23102

As per my iPad app requirement, i've to show the UISlider vertically.
I'm using iOS7 compiler and deployment target is iOS6.
In the story board I added horizontal UISlider of width 600 pixels. I created IBOutlet in my view controller. I didn't set any auto layout constraints. I'm using the below code to rotate and make it vertical.

self.slider.transform = CGAffineTransformMakeRotation(M_PI_2);

After and before rotation I'm printing the frame size of the slider which is correct. But the slider is not looking proper. Its just showing only knob in the center. How can I rotate the UISlider?


enter image description here

ios7 cgaffinetransform uislider rotation
10 Answers

This is an old topic, but here is a Swift solution with autolayout constraints in storyboard and nothing else.

1/ You need to add rotation to the IBOutlet:

@IBOutlet weak var mySlider: UISlider! {
    didSet {
        mySlider.transform = CGAffineTransform(rotationAngle: -CGFloat.pi/2)
    } // didSet
} // IBOutlet

2/ Define in storyboard the constraints, keeping in mind that the Slider will be rotated around its center.

For instance if you want to locate mySlider on the left side of myView, you need three constraints.

  1. myView.Leading = mySlider.CenterX - 20
  2. mySlider.width = myView.Height (with a multiplier of 0.8 for instance)
  3. mySlider.CenterY = myView.CenterY

mySlider will of course appear horizontal in storyboard, but will have the correct sizing, and the center will be correctly positioned.

user_47049000
Related