自定义Airplay按钮的外观

Question

我使用标准渐变叠加(在photoshop中完成)使按钮在我的应用程序中看起来更好.我添加了一个Airplay按钮,但美学不匹配.

我真的想在它上面放一个渐变层使它匹配,但我能找到的任何东西只显示如何使用png,而不是现有的UIView.如果不是渐变层,我只需要以任何方式改变Apple airplay按钮的外观,同时保持其功能完好无损.

设置代码很简单:

MPVolumeView *volumeView = [[MPVolumeView alloc] initWithFrame:frame];
[volumeView setShowsVolumeSlider:NO];
[bottomPanel addSubview:volumeView];

如何才能使其外观与我的控件相匹配？

Answer 1

在接受了@Erik B的回答并向他颁发奖金之后,我发现需要进行更多的调整才能让它发挥作用.我在这里发帖是为了未来搜索者的利益.

我看到的问题是按钮的内部机制将根据当前的播放状态分配图像.因此,如果Airplay接收器消失,或者状态以某种方式改变,我在init期间进行的任何自定义都不会坚持.为了解决这个问题,我在按钮的alpha键上设置了KVO观察.我注意到按钮总是淡入/淡出,这是一个动画alpha.

MPVolumeView *volumeView = [[MPVolumeView alloc] initWithFrame:CGRectZero];
[volumeView setShowsVolumeSlider:NO];
for (UIButton *button in volumeView.subviews) {
    if ([button isKindOfClass:[UIButton class]]) {
        self.airplayButton = button; // @property retain
        [self.airplayButton setImage:[UIImage imageNamed:@"airplay.png"] forState:UIControlStateNormal];
        [self.airplayButton setBounds:CGRectMake(0, 0, kDefaultIconSize, kDefaultIconSize)];
        [self.airplayButton addObserver:self forKeyPath:@"alpha" options:NSKeyValueObservingOptionNew context:nil];
    }
}
[volumeView sizeToFit];

然后我观察按钮的改变值alpha.

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
    if ([object isKindOfClass:[UIButton class]] && [[change valueForKey:NSKeyValueChangeNewKey] intValue] == 1) {
        [(UIButton *)object setImage:[UIImage imageNamed:@"airplay.png"] forState:UIControlStateNormal];
        [(UIButton *)object setBounds:CGRectMake(0, 0, kDefaultIconSize, kDefaultIconSize)];
    }
}

如果销毁按钮,请不要忘记移除观察者

- (void)dealloc {
    [self.airplayButton removeObserver:self forKeyPath:@"alpha"];
    …
}

基于代码观察,如果Apple更改内部视图层次结构MPVolumeView以添加/删除/更改视图以便显示不同的按钮,则该按钮将中断.这使它变得脆弱,因此请自担风险,或者在发生这种情况时提出计划b.我一直在使用它超过一年的生产没有问题.如果你想看到它的实际效果,请查看Ambiance中的主播放器屏幕

Answer 2

我终于找到了一个蓝牙耳机,以便我可以测试按钮.改变它的外观非常简单.这是代码:

for (UIButton *button in volumeView.subviews) {
    if ([button isKindOfClass:[UIButton class]]) {
        [button setImage:[UIImage imageNamed:@"custom-route-button.png"] forState:UIControlStateNormal];
        [button sizeToFit];
    }
}

这就是它的全部内容.

Answer 3

我认为自iOS 6以来有更好的解决方案:使用

- (void)setRouteButtonImage:(UIImage *)image forState:(UIControlState)state;

在MPVolumeView上.

请参阅 https://developer.apple.com/Library/ios/documentation/MediaPlayer/Reference/MPVolumeView_Class/index.html#//apple_ref/occ/instm/MPVolumeView/setRouteButtonImage:forState: