MPVolumeView change size of Airplay icon

Question

I have an MPVolumeView on one of my views, which comes up with an Airplay icon when there are other output sources available. That's all fine, but the icon is tiny, no matter how big I set the frame for MPVolumeView it doesn't get any bigger.

Anyone know how to increase the size of the airplay icon?

Answer 1

I did this to just show the icon and increase its size:

MPVolumeView *volumeView = [[[MPVolumeView alloc] initWithFrame:CGRectMake(255, 12, 30, 25)] autorelease];
volumeView.showsVolumeSlider = NO;
volumeView.showsRouteButton = YES;
volumeView.transform = CGAffineTransformMakeScale(1.5, 1.5); // increase size by 50%

Answer 2

Crawling the subviews and using constraints I've manage to replicate the behaviour of AVRoutePickerView, which resizes icon image according to its containing view.

Although it's needed to use a custom icon via setRouteButtonImage(second image). If not, it uses 2 ImageView that don't show the ion resized (first image).

Code and View Hierarchy attached next:

class ViewController: UIViewController {

    @IBOutlet weak var airplayView: MPVolumeView!

    override func viewDidLoad() {
        super.viewDidLoad()
        airplayView.showsRouteButton = true
        airplayView.showsVolumeSlider = false
        airplayView.setRouteButtonImage(UIImage(named: "airplay"), for: .normal)
        for view in airplayView.subviews {
            if let button = view as? UIButton {
                button.imageView?.contentMode = .scaleAspectFit
                button.translatesAutoresizingMaskIntoConstraints = false
                NSLayoutConstraint(item: button,
                                   attribute: NSLayoutConstraint.Attribute.bottom,
                                   relatedBy: NSLayoutConstraint.Relation.equal,
                                   toItem: airplayView,
                                   attribute: NSLayoutConstraint.Attribute.bottom,
                                   multiplier: 1,
                                   constant: 0).isActive = true
                NSLayoutConstraint(item: button,
                                   attribute: NSLayoutConstraint.Attribute.trailing,
                                   relatedBy: NSLayoutConstraint.Relation.equal,
                                   toItem: airplayView,
                                   attribute: NSLayoutConstraint.Attribute.trailing,
                                   multiplier: 1,
                                   constant: 0).isActive = true
                NSLayoutConstraint(item: button,
                                   attribute: NSLayoutConstraint.Attribute.top,
                                   relatedBy: NSLayoutConstraint.Relation.equal,
                                   toItem: airplayView,
                                   attribute: NSLayoutConstraint.Attribute.top,
                                   multiplier: 1,
                                   constant: 0).isActive = true
                NSLayoutConstraint(item: button,
                                   attribute: NSLayoutConstraint.Attribute.leading,
                                   relatedBy: NSLayoutConstraint.Relation.equal,
                                   toItem: airplayView,
                                   attribute: NSLayoutConstraint.Attribute.leading,
                                   multiplier: 1,
                                   constant: 0).isActive = true
            }
        }
    }
}

Answer 3

At least for now, all you can do is crawling the subviews and manually set the size. It's probably not a good idea, as subview hierarchy is suspect to change, and even if you set a bigger frame for the icon, it won't get bigger (or if contentMode is set to stretch, you get a blurred icon)

You may even be able to manually replace the icon with a larger one that you provide in your app, but let me say this again, it's not a good idea.