UISlider, setting images for different ranges

Question

I have a UISlider and I'm basically splitting it into 5 segments.

0 <= x < .2
.2 <= x < .4
.4 <= x < .6
.6 <= x < .8
.8 <= x <= 1

I'm trying to synchronize this with another scrollView that zooms that I have so when I move the slider, the scrollView zooms, AND when I pinch on the scrollView, the slider moves.

When I initialize my slider in the viewDidLoad, I created different thumbImages for the UIControlStateNormal and UIControlStateSelected like this:

if ([self.navigatorSlider value] >= 0 && [self.navigatorSlider value] < .2) {
    [self.navigatorSlider setThumbImage:[UIImage imageNamed:@"firstZoom.png"] forState:UIControlStateNormal];
    [self.navigatorSlider setThumbImage:[UIImage imageNamed:@"firstZoom.png"] forState:UIControlStateSelected];
}

I do this for each of the 5 diffrent sections I noted above. However in the IBAction method I have for the slider, I need to set the thumbImages again doing the same checks. Also in my handleZoom method I need to setThumbImage in that method too. Am I doing something wrong? I feel like I should be able to set these values somewhere and the images will be changed automatically when the slider changes, no matter if it comes from handling the slider itself, or zooming in on the scrollView and using the setValue method for the slider.

Thoughts?

score 1 · Accepted Answer · edited May 23 '17 at 12:12

Looking at the properties that UISlider provides, you can get a pretty strong sense that while the class is designed to let you customize it's appearance, dynamically changing the appearance of the control as the user adjusts it probably wasn't what the designer had in mind. Otherwise, they'd have included the sort of mechanism you suggest: a means to associate different images with ranges of values.

The first thing that comes to mind if you want to simplify your approach is to use KVO to observe a slider. If you could get a notification every time the slider's value is updated, you could update the thumb image in one place. Unfortunately, it looks like UISlider doesn't fully support KVO.

The next thing I'd consider would be creating your own slider control. This isn't rocket science -- all you need is to draw the control, draw the thumb on top, and allow the thumb to slide in one dimension. If you make the thumb a subview of the rest of the control, that's a piece of cake. Then you can add KVO support if you want, or go all the way and support different thumb images for different ranges.

If you don't want to do that, you might be able to subclass UISlider to add your array of images, array of ranges, and an override of -setValue: to make use of them.

Finally, what you've got now isn't really so bad. If you've repeated the code in both your action and -handleZoom methods, that's not so good, but it should be simple to factor out the common code into an appropriate method that you can call from both places.

score 0 · Answer 2 · answered Jan 17 '12 at 18:45

An alternative to KVO would be to use a notification pattern. Register your interested objects (eg, any object that you want to "update" when the value changes) to receive notifications. When your slider changes values, have it post a notification with the new value.

UISlider, setting images for different ranges

2 Answers2

Linked