iPhone SDK Vertical UISlide

April 7, 2009 § 1 Comment

It is straight forward to create a horizontal slider using CGRectMake() function,  or using IBOutlet UISlider *slider within Interface Builder.

Interface Builder doesn’t offer any property to set slider into vertical or rotate it. UISlider object doesn’t offer any property to set vertical position. This is the only trick. Once you learn it, it is very easy to do. You just need to add one extra line of code.

The trick to convert a horizontal slider to vertical slider is by using CGAffineTransformRotate.

First you would have to declare the x and y position, width and height of the slide within CGRectMake object.

CGRectMake(x, y, slider’s width, slider’s height)

Then you use the rotation transformations function called CGAffineTransformRotate(). This function takes two parameters, the first being the existing transformation matrix, and the second being the angle of rotation expressed in radians.

iPhone SDK doesn’t contain conversion macro function degreesToRadian()in Core Graphic for Mac OS X.

90 degree rotation would be 270.0/180*M_PI

OR you can create your conversion. Add this to header file:

#define degreesToRadians(x) (M_PI * x / 180.0)

You can rotate a view:

theView.transform = CGAffineTransformRotate(theView.transform, degreesToRadians(45));

You can rotate a slider:

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

Horizontal Slider:

UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(-40, 100, 200, 10)];

// Rotate slider by 270 degree County Clockwise to vertical position
slider.transform = CGAffineTransformRotate(slider.transform, 270.0/180*M_PI);
[slider addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventValueChanged];
[slider setBackgroundColor:[UIColor clearColor]];
slider.minimumValue = 0.0;
slider.maximumValue = 100.0;
slider.continuous = YES;
slider.value = 50.0;
[self.view addSubview:slider];


§ One Response to iPhone SDK Vertical UISlide

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading iPhone SDK Vertical UISlide at Web Builders.


%d bloggers like this: