Creating a custom slider for iPhone

Question

I need to create a custom vertical slider for my iPhone app, simply because the UISlider is to narrow. It is going to be used as a throttle "stick" for my remote controlled helicopter. I managed to rotate the slider in xcode with

throttleSlider.transform = CGAffineTransformMakeRotation(3*M_PI_2);

but I think this is quite ugly since the slider still appear horizontally on my storyboard. Also, I can not find anyway to make the slider wider.

How will I approach this problem?

Thank you.

Answer 1

I've used this implementation of UICustomSwitch before, from Catamount Software's blog:

UICustomSwitch

It attempts to customize the familiar UISwitch class, but it accomplishes this by subclassing UISlider , and replacing the normal switch imagery with custom images. You could download this code, then just replace the included images with something that you draw yourself.

Because this was intended to be a switch, which only has on and off settings, you'll see that it responds to touches with this:

[self setOn:on animated:YES];

Just get rid of the code that calls setOn:animated: so that the slider doesn't force its value all the way to 0.0 or 1.0.

Answer 2

in the application I am developing right now we needed a custom slider. It had to be wider (44pixels wide, the default size of a table view cell). We accomplished our goal by using stretchable images and adjusting the properties of the slider:

UIImage* sliderCenterImage = [UIImage imageNamed:@"sliderCenter.png"];
[slider setThumbImage:sliderCenterImage forState:UIControlStateNormal];
UIImage *leftStretch2 = [[UIImage imageNamed:@"sliderLeft.png"]
                             stretchableImageWithLeftCapWidth:5.0 topCapHeight:0.0];
slider setMinimumTrackImage:leftStretch2 forState:UIControlStateNormal];
UIImage *rightStretch = [[UIImage imageNamed:@"sliderRight.png"]
                          stretchableImageWithLeftCapWidth:1.0 topCapHeight:0.0];
[slider setMaximumTrackImage:rightStretch2 forState:UIControlStateNormal];

This way I got an slider that fulfills a whole cell of a tableView. thumbImage is the image that represents the middle of the slider (the one you interact with, by default a round dot), minimumTrackImage will be the part on the left of the slider (the one that by default is blue), and maximumTrackImage is the part usually left blank on the right of the center of the slider. There are more properties of the UISlider that allow further customization. Take a look at UISlider developer reference

Hope this helps.

Answer 3

There is no way to make UISlider wider. Why dont you make your own slider extending UIControl class and handling touch events.

Answer 4

As an updated answer, stretchableImageWithLeftCapWidth is deprecated. It is advised to use

resizableImageWithCapInsets

For a custom slider in swift:

    var thumb = UIImage(named: "slider_thumb")
    musicSlider.setThumbImage(thumb, forState: UIControlState.Normal)

    var left = UIImage(named: "left_slide")?.resizableImageWithCapInsets(UIEdgeInsets(top: 0.0,left: 0.0,bottom: 0.0,right: 0.0))
    musicSlider.setMinimumTrackImage(left, forState: UIControlState.Normal)
    var right = UIImage(named: "right_slide")?.resizableImageWithCapInsets(UIEdgeInsets(top: 0.0,left: 0.0,bottom: 0.0,right: 0.0))
    musicSlider.setMaximumTrackImage(right, forState: UIControlState.Normal)

The UIEdgeInserts specify the buffer of the image that won't get resized. so left:15.0 would mean the area 15 pixels in from the left will not get resized. In my case I didn't care so it was all zero.

As a note, the images themselves are what is making the slider bar wider. My thumb image is 35 pixels in height, my left and right slider images are 20 pixels in height. All are sliced and resizable from Images.xcassets (where images should be kept)