How to customize MPVolumeView?

Question

I have tried many methods to implement a regular UISlider and control the device volume, but it's all Native-C functions which results in many untraceable bugs.

I tried the MPVolumeView it works like charm, it even controls the device volume even after you close the app, just like the iPod app.

My question is, is there anyway to customize the MPVolumeView with specific colors and images, just like UISlider?

NOTE: I want a legal method without using private undocumented APIs.

UPDATE
As per @Alexsander Akers answer, since the sub views are hidden in MPVolumeView I had to cycle through subviews, get the UISlider and customize it, here is the code.

IBOutlet UISlider *volumeSlider;   //defined in <class.h> and connected to a UISlider in Interface Builder

-(void) viewDidLoad {
     ....
     [self setCustomSlider];
     ....
}

-(void) setCustomSlider{
     MPVolumeView *volumeView = [[[MPVolumeView alloc] initWithFrame:[volumeSlider frame]] autorelease];
     NSArray *tempArray = volumeView.subviews;

     for (id current in tempArray){
           if ([current isKindOfClass:[UISlider class]]){
                    UISlider *tempSlider = (UISlider *) current;
                    UIImage *img = [UIImage imageNamed:@"trackImage.png"];
                    img = [img stretchableImageWithLeftCapWidth:5.0 topCapHeight:0];
                    [tempSlider setMinimumTrackImage:img forState:UIControlStateNormal];

                    [tempSlider setThumbImage:[UIImage imageNamed:@"thumbImage.png"] forState:UIControlStateNormal];

           } 
    }
    [volumeSlider removeFromSuperview];
    [self.view addSubview:volumeView];
 }

@sooper very late reply, sorry. Unfortunately, I didn't continue this app and never submitted it to App Store. But from personal experience, I have seen many tutorials of modifying the original components and they were accepted. — mohdajami, Jun 27 '12 at 08:32
Note that in iOS 6, there are built-in methods for customizing the MPVolumeView slider, similar to the methods for UISlider — coco, Dec 17 '12 at 18:09

score 10 · Accepted Answer · answered Sep 28 '10 at 14:17

10

You could try cycling through its subviews and look for a UISlider subclass?

answered Sep 28 '10 at 14:17

Alexsander Akers

15,967
12
58
83

1

In the end that's exactly what I used, Just for clarity I will update the question with the code. I hope Apple don't reject the app for that. – mohdajami Sep 29 '10 at 10:03

score 8 · Answer 2 · answered May 01 '13 at 10:03

Since iOS 5.0 you can use UIAppearance on a UISlider, even when part of MPVolumeView.

Anywhere in your codebase:

[[UISlider appearanceWhenContainedIn:[MPVolumeView class], nil] setMinimumTrackImage:[[UIImage imageNamed:@"nowplaying_bar_full.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(5, 25, 5, 25)] forState:UIControlStateNormal];
[[UISlider appearanceWhenContainedIn:[MPVolumeView class], nil] setMaximumTrackImage:[[UIImage imageNamed:@"nowplaying_bar_empty.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(5, 25, 5, 25)] forState:UIControlStateNormal];
[[UISlider appearanceWhenContainedIn:[MPVolumeView class], nil] setThumbImage:[UIImage imageNamed:@"nowplaying_player_nob.png"] forState:UIControlStateNormal];

Here a list of some of the other classes that can be implemented using UIAppearance: https://gist.github.com/mattt/5135521

Working on iOS 8 perfectly! – Genevios Mar 19 '15 at 18:57 — Genevios, Mar 19 '15 at 18:57

score 3 · Answer 3 · answered May 08 '13 at 15:44

There are now ways to accomplish this, simply use:

– setMaximumVolumeSliderImage:forState:
– setMinimumVolumeSliderImage:forState:
– setVolumeThumbImage:forState:

Which are slightly different method names than the ones for the vanilla UISlider.

This prevents you from having to cycle through the views and potentially have something break in the future as Apple changes things.

score 1 · Answer 4 · answered Nov 21 '17 at 15:54

Answer in Swift:

func customSlider() {
        let temp = mpVolView.subviews
        for current in temp {
            if current.isKind(of: UISlider.self) {
                let tempSlider = current as! UISlider
                tempSlider.minimumTrackTintColor = .yellow
                tempSlider.maximumTrackTintColor = .blue
            }
        }
    }

Result:

score -1 · Answer 5 · edited May 23 '17 at 12:19

-1

Try using a Notification, but it looks like Apple is denying them.

[EDIT]

Try this.

edited May 23 '17 at 12:19

Community

1
1

answered Sep 28 '10 at 14:31

Stephen Furlani

6,794
4
31
60

How to customize MPVolumeView?

5 Answers5

Linked