I remember looking at Apple’s iTunes rating slider and thinking to myself, that will be perfect to integrate into BeefyBoard: The iPhone Soundboard for rating soundboards and skins alike.  Imagine my dismay upon combing through the SDK and coming up empty handed.  Not to be deterred though, I managed to recreate something similar to apple’s slider using a couple images and the base UISlider implementation that Apple provides.

sliderblog1

Apple’s UISlider component is made up of two images one for the left, which I like to call the filled side, and another image for the right, or the empty side.  Apple deals with these images by using some stretchable images with caps and this lets them resize the slider to their heart’s content.  We however do not really have that luxury.

Gotcha #1: The left and right images need to be the same size and you need to account for the frame padding that Apple adds in as part of the component.  On the slider that I worked with, my two images were 250px wide but my slider control had to be 254px wide in order to display properly.  You will notice if you start playing with the size that it will mess up your image if you get this wrong.

Gotcha #2: The thumb image that you choose will affect the size and the position of the two images and where they meet.  Even though you might have figured out how to get the images to line up, if you are using a thumb control image the UISlider will adjust the size of the image to take this into account.  For instance, if you make your thumb image 50px then 50 px will be added to the width of the control to take into account the width of the thumb on either side of the slider.

Now that we have talked about all the sizing problems we should be great right?  Not yet, we still need to worry about the way that you control the slider.  Between the 2.1 and 2.2 releases of the iPhone SDK the behaviour has changed for the touch sensitivity of the UISlider.  In 2.1 you used to be able to touch anywhere on the slider and the slider would move to that position.  In 2.2 some people complained that they were accidentally changing settings and thus it was removed. So…

Gotcha #3: If you do not add a thumb image in your slider you will not have any hit area to click on in order to adjust the value of the slider.  You could add a transparent thumb icon if you wanted to provide a hit area but not have the graphic, but remember gotcha #2 above, the UISlider will adjust the size of the slider and you will need to account for that.

To solve this problem, I went in and enabled touch support for a UISlider subclass that I created.  I added touch support for the slider being pressed and again for a finger being moved on the slider.  One important thing that I almost missed was to fire the value changed action on the UISlider so that it would tell any registered selectors that the rating value had changed.

I hope this helps some people out there to avoid some problems and if you have any questions please feel free to leave a comment.  I will try to answer the best I can.