Question

In our iOS app, we have subclassed a UISlider in order to use a custom design. However, no matter what we try, the images used in the UISlider come out distorted. For instance, the original thumb rect is 156×44. We have overridden this to be 15×22, which results in a blown up image. Other permutations result in the thumb going off-track, and still blown up. How can we correctly set the image size for the thumb and track, by using padding on the images or by overriding the appropriate functions?

Answer 1

I think that UISlider was designed one resolution and one only, and making the elements smaller, will negatively affect user experience. But if you really want to, try one of these:

1. Use the bigger images, but set the transform property of an UISlider instances to some CGAffineTransformMakeScale(scaleX, scaleY).

2. Add transparent padding to your images, so they look small, but are actually of a proper size.

That is, if you really want your UISlider smaller. If all you are bothered with is the distortion caused, but automatic upscaling, consider loading UIImages as stretchable, f.i. with

 - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets // iOS >=5.0

or

 - (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight // iOS <5.0