How to add the MPVolumeView via Xcode Designer?

Question

I originally added an MPVolumeView dynamically on to a page...

#import "MediaPlayer/MPVolumeView.h"
.
.
-(IBAction) handleVolumeButtonClicked:(id) sender {
    if (volumeView == nil) {
        volumeView = [[MPVolumeView alloc] initWithFrame:CGRectMake(25, 378, 270, 30)];
        [self.view addSubview:volumeView];
        [volumeView release];
    } else {
        [volumeView removeFromSuperview];
        volumeView = nil;
    }
}

But for some reason I started getting reports of the application crashing when dynamically adding the volume component.

To work around this, I decided to try and add the component to the view via the XCode designer, but then I realised that I didn't know how to do this!

I dragged an 'Object' from the template to the Object palette first, but then I found that I couldn't add it to the view. So I scrapped that idea and then dragged the 'View' object directly on to the .xib view.

Once the component was added, I tried to change the 'Custom Class' to 'MPVolumeView', but the view just rendered an empty rectangle. Running the code in the simulator failed to render anything.

Does anyone know what steps I am missing to add a class to the view that doesnt already exist in the palette?

Answer 1

Not sure if you have figured this out by now. I just created an app with a volume slider successfully. Here's what I did (from MPVolumeView):

• Added a UIView and sized and positioned it as desired into the .xib view.
• Changed the Class to MPVolumeView
• Added the following to my .h file:

#import 

@interface MyView : UIViewController {
    MPVolumeView *_mpVolumeViewParentView;
}
@property (nonatomic, retain) IBOutlet MPVolumeView *mpVolumeViewParentView;

@end

• Added the following to my .m file:

#import "MyView.h"

@implementation MyView

@synthesize mpVolumeViewParentView = _mpVolumeViewParentView;

- (void)viewDidLoad {
    [super viewDidLoad];
    [[self mpVolumeViewParentView] setBackgroundColor:[UIColor clearColor]];
    MPVolumeView *myVolumeView = [[MPVolumeView alloc] initWithFrame:[[self mpVolumeViewParentView] bounds]];
    [[self mpVolumeViewParentView] addSubview:myVolumeView];
    [myVolumeView release];
}
- (void)dealloc {
    [_mpVolumeViewParentView release];
    [super dealloc];
}

Hope it helps.

Answer 2

Adding a generic UIView and setting the custom class to MPVolumeView does indeed work. Make sure to do the following:

• Add the MediaPlayer framework to your project. The loading of MPVolumeView will fail silently (albeit with a message logged to the console) if you don't.
• Run on an actual device. The simulator won't show the volume slider.
• Double-check that your view isn't getting autoresized out of the view.

Answer 3

You should try running your app on an iOS device, not the simulator. On the simulator the MPVolumeView displays "No Volume Available" in white text. If the view's background color is set to white (default in Interface Builder) then the view appears to be empty.

Answer 4

Even much simpler:

Add a view and change the Class to MPVolumeView and declare in .h

    #import <MediaPlayer/MediaPlayer.h>

@interface MyView : UIViewController {
    MPVolumeView *_mpVolumeview;
}

In .m just allocate it.

- (void)viewDidLoad {
    [super viewDidLoad];
    [MPVolumeView alloc];

    // set properties using the declared object in .h
    // Example
    [mpVolumeview setShowsVolumeSlider:NO]; 
}

Answer 5

I changed Roman Aliyev’s decision a little.

You can set MPVolumeView as subclass of UISlider

@IBOutlet weak var volume: MPVolumeView!

let volumeSetting = volume.subviews.first as? UISlider
    volumeSetting?.minimumValueImage = UIImage(named: "SoundQuiet")
    volumeSetting?.maximumValueImage = UIImage(named: "SoundLoud")
    ...

Answer 6

Found another solution.

• Add UISlider via Xcode Interface Builder.
• Configure its appearance in IB.
• Programmatically replace it with MPVolumeView in the following way:

class PlayerView: UIView {
    @IBOutlet weak var volumeViewMock: UISlider!

    override func awakeFromNib() {
        super.awakeFromNib()
        self.volumeViewMock.replaceWithMPVolumeView()
    }
}

extension UISlider {
    func replaceWithMPVolumeView() {
        // do this only once
        guard !self.isHidden else { return }

        let volumeView = MPVolumeView()
        volumeView.showsRouteButton = false

        // get the slider of volumeView and configure it in the same way as the IB slider
        guard let volumeViewSlider = volumeView.subviews.first as? UISlider else { return }
        volumeViewSlider.minimumValueImage = self.minimumValueImage
        volumeViewSlider.maximumValueImage = self.maximumValueImage
        volumeViewSlider.tintColor = self.tintColor
        volumeViewSlider.minimumTrackTintColor = self.minimumTrackTintColor
        volumeViewSlider.maximumTrackTintColor = self.maximumTrackTintColor
        volumeViewSlider.thumbTintColor = self.thumbTintColor

        guard let parentView = self.superview else { return }
        parentView.addSubview(volumeView)

        // frame of volumeView and frame of the IB slider should be the same
        volumeView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            volumeView.topAnchor.constraint(equalTo: self.topAnchor),
            volumeView.bottomAnchor.constraint(equalTo: self.bottomAnchor),
            volumeView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
            volumeView.trailingAnchor.constraint(equalTo: self.trailingAnchor),
            ])

        // hide the IB slider
        self.isHidden = true
    }
}