CODEWITHSUNDEEP
iphoneavaudioplayeraudio-streaming
mohdajami
mohdajami

Reputation: 9680

How to customize MPVolumeView?

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];
 }

Upvotes: 19

Views: 9579

Answers (5)

Adam
Adam

Reputation: 1913

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:

enter image description here

Upvotes: 1

ekinnear
ekinnear

Reputation: 437

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.

Upvotes: 3

cescofry
cescofry

Reputation: 3704

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

Upvotes: 8

Stephen Furlani
Stephen Furlani

Reputation: 6856

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

[EDIT]

Try this.

Upvotes: -1

Alexsander Akers
Alexsander Akers

Reputation: 16024

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

Upvotes: 10

Related Questions