Vertical UISlider in iOS with autolayout

Question

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?

Meteoric

https://mcmap.net/q/369462/-how-to-make-a-vertical-uislider Solution is working for me. – Morvin

Answer 1

I got it to work this way:

In viewDidLoad: I added

[self.slider removeConstraints:self.slider.constraints];
[self.slider setTranslatesAutoresizingMaskIntoConstraints:YES];

so that it's called before rotating the slider with

self.slider.transform=CGAffineTransformRotate(self.slider.transform,270.0/180*M_PI);

and there is no need to remove and re-add it to superview.

Friedcake

Answer 2

I got a vertical slider working with iOS 8 and Xcode 6 with only 3 constraints in the storyboard and one line of code. Here's a cropped screencap of the interface:

There are 3 constraints between the vertical slider and the UIImageView next to it:

1. vSlider.Center Y = Image View.Center Y
2. vSlider.Width = Image View.Height
3. vSlider.Center X = Image View.Trailing + 16

And of course the one line of code is:

self.vSlider.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi / 2))

It's easy to set up these constraints in the storyboard in Xcode 6, but I think it should be simple to write these constraints in code to support iOS 7 or 6.

Katsuyama

Answer 3

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.

Opportunist

for a slider on the right side you would use trailing instead of leading for the first item as follows: myView.Trailing = mySlider.CenterX + 20 – Considerable

Answer 4

Uncheck Auto-Layout on your ViewController, there is no other option under the SDK 7.0 to make it work vertically :(

Taritariff

Answer 5

There are so many possible solutions around about putting UISlider vertical. Here is my summary for iOS7 in XCode5 with autoLayout enabled(defaultly in storyboard):

1. in viewDidLoad add method self.slider.transform = CGAffineTransformMakeRotation(M_PI_2);

2. define your autoLayout constraints about slider explicitly in storyboard as whatever you like

Sciurine

Answer 6

In your viewDidLoad, try:

UIView *superView = self.sizeSlider.superview;
[self.sizeSlider removeFromSuperview];
[self.sizeSlider removeConstraints:self.view.constraints];
self.sizeSlider.translatesAutoresizingMaskIntoConstraints = YES;
self.sizeSlider.transform = CGAffineTransformMakeRotation(M_PI_2);
[superView addSubview:self.sizeSlider];

It does not work with constraints, so the trick is to remove the constraints for your uislider. You might have to resize it manually by setting its frame property.

Nipa

Answer 7

You can't use storyboard to build up a UISlider. Build up UISlider by coding.

slider = [[UISlider alloc] initWithFrame:CGRectMake(640, 150, 600, 400)];
[slider.layer setAnchorPoint:CGPointMake(0.0f, 0.0f)];
slider.transform = CGAffineTransformMakeRotation(M_PI/2);
[self.view addSubview:slider];

Pomerleau

Answer 8

Try this :-

self.slider.transform=CGAffineTransformRotate(slideToUnlock.transform,-90.0/180*M_PI);

Wonky

Answer 9

Try below code to Rotate the UISlider in Vertical Position..

//To rotate the slider in Vertical Position
CGAffineTransform sliderRotation = CGAffineTransformIdentity;
sliderRotation = CGAffineTransformRotate(sliderRotation, -(M_PI / 2));
sliderBrightness.transform=sliderRotation;

Briggs

Answer 10

For me a two-step process worked best (incorporating some of the previous solutions)

Autolayout step) I added a vertical view in IB and used autolayout to link it to neighboring views. Then I added a slider in the view and simply hooked it up to the center of the view. Then hooked up the width of the slider to the height of the view. Finally control-dragged the slider outlet to my ViewController code (as slider)

Code step) Then simply added the to my viewWillAppear (swift-code):
let trans = CGAffineTransformMakeRotation(CGFloat(M_PI_2)); slider.transform = trans;

Argonaut