Custom MPVolumeView Thumb Image not vertically centered since iOS 5.1

Question

I'm building an application that needs an MPVolumeView to control the volume. It worked perfectly before iOS 5.1 but since the 5.1 update the thumb image is no longer vertically centered. I tried a few things like changing imagine dimensions, resizing my views (and slider) but nothing seems to work, the thumb is just not vertically centered anymore. The only way i get a centered thumb is if i use the default iOS one.

I tried adding a UISlider to another view with the exact min, max and thumb image and that one is centered fine.

Here is the code for the MPVolumeView:

MPVolumeView *volumeView;
volumeView = [[[MPVolumeView alloc] initWithFrame:volumeViewHolder.bounds] autorelease];
[volumeViewHolder addSubview:volumeView];

UIView  *volumeViewSlider;
for (UIView *view in [volumeView subviews])
{
    if ([[[view class] description] isEqualToString:@"MPVolumeSlider"])
    {
        volumeViewSlider = view;
    }
}

[(UISlider *)volumeViewSlider setThumbImage:sliderHandleIcon forState:UIControlStateNormal];
    [(UISlider *)volumeViewSlider setMinimumTrackImage:leftTrackImage forState:UIControlStateNormal];
    [(UISlider *)volumeViewSlider setMaximumTrackImage:rightTrackImage forState:UIControlStateNormal];

volumeViewHolder is just a UIView thats 153x33. I put the thumb in green in the screenshot.

Martian

I had the same problem, Daniel Amitay pointed me to the solution: tibr.me/2012/07/14/customizing-mpvolumeview-appearance – Globefish

That is not a great solution as it replaces the MPVolumeSlider implementation for all MPVolumeSlider. This causes an offset in the MPMoviePlayerViewController slider we use to play other media. – Martian

@murze: That's a hack if I ever saw one! Is this accepted by Apple? – Xanthous

yep, it's implemented here: itunes.apple.com/us/app/radio-centraal/id567776167?mt=8 – Globefish

Answer 1

Maybe a better solution:

User a bigger image with a transparent border on the bottom. Should be around 10px for Retina Displays.

Dolerite

Answer 2

the same problem i resolved in one project. Must be set color of left part and right part with alpha = 0 -it means transparent all slider without thumb (without moovable part of it). After we must create custom view for line of slider, without thumb. In this view any colored part may be shifted as you want, upper or below, left or right. It obtained using the defined y for your ocassion:

UIView *v = [[UIView alloc] initWithFrame:CGRectMake(x,y,width, height)];

And add the slider to this line as subview. Resulted view will be slider. For example:

UISlider *ourSlider  = ...; 
//initialise UISlider

ourSlider.minimumTrackTintColor = [UIColor colorWithRed:0 green:122.0f/255.0f blue:1 alpha:0];

ourSlider.minimumTrackTintColor = [UIColor colorWithRed:0 green:122.0f/255.0f blue:1 alpha:0];

UIView *lineOfSliderWithoutThumb = ... ;
// creation it

[lineOfSliderWithoutThumb addSubview:ourSlider];

//after this lineOfSliderWithoutThumb is the our custom uislider. Note: colors there are used as default slider colors of left and right sides of UISlider.

Va

it for iOS 8 and iOS 7 too – Va