how to set the maximum and minimum image of MPVolumeView correctly

Question

i am trying to set the maximum and minimum image of MPVolumeView but i can't get it working

here is the code

VolumeView.setVolumeThumbImage(UIImage(named: "VolumeSlider"), forState: UIControlState.Normal)
VolumeView.setMinimumVolumeSliderImage(UIImage(named: "VolumeUp"), forState: UIControlState.Normal)
VolumeView.setMaximumVolumeSliderImage(UIImage(named: "VolumeDown"), forState: UIControlState.Normal)

and here is the result does any one had this problem before , any help will be great ?

Answer 1

The code you have written is fine, however, you misunderstood what setMinimumVolumeSliderImage and setMaximumVolumeSliderImage achieve. These methods are for actually setting the track images of the control.

You're looking for something comparable to minimumValueImage and maximumValueImage on UISlider. Unfortunately, MPVolumeView doesn't have such methods.

The only work around would be to position a UIImageView either side of the volume view to show your images. The downside to this is that the route button will get in the way for the maximum value image, so you would have to set showsRouteButton = NO; to prevent this.

Answer 2

Actually there's a quite easy way to do that:

if let volumeSliderView = volumeView.subviews.first as? UISlider {
    volumeSliderView.minimumValueImage = #imageLiteral(resourceName: "icon_music_volume_min")
    volumeSliderView.maximumValueImage = #imageLiteral(resourceName: "icon_music_volume_max")
}

Answer 3

You can set the minimum and maximum value images for MPVolumeView via appearance methods. Here's how to do it in Objective-C:

If you only support iOS 9.0+:

[[UISlider appearanceWhenContainedInInstancesOfClasses:@[[MPVolumeView class]]] setMinimumValueImage:[UIImage imageNamed:@"VolumeDown"]];
[[UISlider appearanceWhenContainedInInstancesOfClasses:@[[MPVolumeView class]]] setMaximumValueImage:[UIImage imageNamed:@"VolumeUp"]];

Or for any iOS version after 5.0:

if( [UISlider respondsToSelector:@selector(appearanceWhenContainedInInstancesOfClasses:)] )
{
   [[UISlider appearanceWhenContainedInInstancesOfClasses:@[[MPVolumeView class]]] setMinimumValueImage:[UIImage imageNamed:@"VolumeDown"]];
   [[UISlider appearanceWhenContainedInInstancesOfClasses:@[[MPVolumeView class]]] setMaximumValueImage:[UIImage imageNamed:@"VolumeUp"]];
}
else
{
   [[UISlider appearanceWhenContainedIn:[MPVolumeView class], nil] setMinimumValueImage:[UIImage imageNamed:@"VolumeDown"]];
   [[UISlider appearanceWhenContainedIn:[MPVolumeView class], nil] setMaximumValueImage:[UIImage imageNamed:@"VolumeUp"]];
}

In Swift:

UISlider.appearance(whenContainedInInstancesOf: [MPVolumeView.self]).minimumValueImage = UIImage(systemName: "speaker.fill")
UISlider.appearance(whenContainedInInstancesOf: [MPVolumeView.self]).maximumValueImage = UIImage(systemName: "speaker.wave.3.fill")