Customizing slider track images

Question

Hi i would like to customize my UISlider similar to the way iBooks has done. I Know that [slider setMaximumTrackImage:] and [slider setMinimumTrackImage:] are to be used.But can someone clarify as to how many dots would i need in the image?

Answer 1

The images are supposed to be stretchable. From the docs:

The orientation of the track image must match the orientation of the slider control. To facilitate the stretching of the image to fill the space between the thumb and end point, track images are usually defined in three regions. A stretchable region sits between two end cap regions. The end caps define the portions of the image that remain as is and are not stretched. The stretchable region is a 1-point wide area between the end caps that can be replicated to make the image appear longer.

To define the end cap sizes for a horizontally-oriented slider, assign an appropriate value to the image’s leftCapWidth property. For more information about how this value defines the regions of the slider, see the UIImage class.

So, the image you draw would have your end part (the rounded part on the far left in the default slider) - the width of this is defined by your left cap width. Then a 1-pixel wide part which can be stretched to the length of the slider, then a right cap (which takes up the remaining part of the image).

In theory then you could make a one-pixel wide image and this would just be stretched out from the end of the track to the current thumb position. However, this would have no shape at the end.