ios - Matching MPVolumeView and UISlider vertical positions in a UIToolBar

Question

I have a UIToolBar that is intended to contain sliders for controlling volume and brightness. I use a MPVolumeView slider for the volume, and an ordinary UISlider for the brightness. While the sliders themselves work fine, their vertical positions are mismatched:

How do I get them to be on the same height?

My code:

- (void) createToolbar{

toolBar = [[UIToolbar alloc] init];
toolBar.frame = CGRectMake(0, 0, self.view.frame.size.width, 44);

UISegmentedControl *modeSelector = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:@"Play", @"Rec", nil]];
[modeSelector setSegmentedControlStyle:UISegmentedControlStyleBar];
[modeSelector addTarget:self action:@selector(changePlayMode) forControlEvents:UIControlEventValueChanged];
modeSelector.selectedSegmentIndex = 0;
UIBarButtonItem *modeSelectorAsToolbarItem = [[UIBarButtonItem alloc] initWithCustomView:modeSelector];

brightnessSlider = [[UISlider alloc] initWithFrame:CGRectMake(0, 0, 150, 30)];
brightnessSlider.minimumValue = 0;
brightnessSlider.maximumValue = 1;
brightnessSlider.value = [[UIScreen mainScreen] brightness];
brightnessSlider.continuous = YES;
[brightnessSlider addTarget:self action:@selector(adjustBrightness:) forControlEvents:UIControlEventValueChanged];
UIBarButtonItem *brightSliderAsToolbarItem = [[UIBarButtonItem alloc] initWithCustomView:brightnessSlider];

MPVolumeView *volView = [[MPVolumeView alloc] initWithFrame:CGRectMake(0, 0, 150, 30)];
volView.showsRouteButton = NO;
UIBarButtonItem *volSliderAsToolbarItem = [[UIBarButtonItem alloc] initWithCustomView:volView];

UIBarButtonItem *flexibleSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
UIBarButtonItem *toc = [[UIBarButtonItem alloc] initWithTitle:@"Contents" style:UIBarButtonItemStyleBordered target:self action:@selector(goToToC)];
[toolBar setItems:[NSArray arrayWithObjects:modeSelectorAsToolbarItem, flexibleSpace, brightSliderAsToolbarItem, volSliderAsToolbarItem, flexibleSpace, toc, nil] animated:NO];

toolBar.autoresizingMask |= UIViewAutoresizingFlexibleWidth;

[[self view] addSubview:toolBar];

}

(Changing the CGRectMake coordinates doesn't seem to do anything.)

A comment in the question "Custom MPVolumeView Thumb Image not vertically centered since iOS 5.1" seemed to suggest using the "Fixing thumb alignment" trick explained here, but implementing that code didn't seem to do anything as far as I could tell, and I'm not sure whether it was talking about the same problem.

Answer 1

如果您创建一个简单的子类MPVolumeView和 override volumeSliderRectForBounds:，您可以为滑块 rect 定义自己的对齐方式。我喜欢返回整个边界，它将滑块居中在MPVolumeView's 框架中

@interface KMVolumeView : MPVolumeView

@end

@implementation KMVolumeView

- (CGRect)volumeSliderRectForBounds:(CGRect)bounds
{
    return bounds;
}

@end

只需在代码或界面构建器中使用您的子类，然后您就可以可靠地定位体积视图。

Answer 2

我想出了一些东西，可以扩展 kmikael 的答案：

@interface SystemVolumeView : MPVolumeView

@end

@implementation SystemVolumeView

- (CGRect)volumeSliderRectForBounds:(CGRect)bounds {
    CGRect newBounds=[super volumeSliderRectForBounds:bounds];

    newBounds.origin.y=bounds.origin.y;
    newBounds.size.height=bounds.size.height;

    return newBounds;
}

- (CGRect) routeButtonRectForBounds:(CGRect)bounds {
    CGRect newBounds=[super routeButtonRectForBounds:bounds];

    newBounds.origin.y=bounds.origin.y;
    newBounds.size.height=bounds.size.height;

    return newBounds;
}

@end

此实现的不同之处在于它仍然使用默认的水平值，但会覆盖垂直值以保持 MPVolumeView 在其容器中垂直居中。它还覆盖-routeButtonRectForBounds:，以便播放/路由按钮也居中。

我不得不想知道为什么默认实现有一个不稳定的垂直位置。

Answer 3

SWIFT 版本： 来自 hyperspasm 的答案：

import Foundation

class SystemVolumeView: MPVolumeView {
    override func volumeSliderRect(forBounds bounds: CGRect) -> CGRect {
        var newBounds = super.volumeSliderRect(forBounds: bounds)
        newBounds.origin.y = bounds.origin.y
        newBounds.size.height = bounds.size.height
        return newBounds
    }
    override func routeButtonRect(forBounds bounds: CGRect) -> CGRect {
        var newBounds = super.routeButtonRect(forBounds: bounds)
        newBounds.origin.y = bounds.origin.y
        newBounds.size.height = bounds.size.height
        return newBounds
    }
}

Answer 4

我最终只使用了 UISlider，使用“获取系统音量”和“更改系统音量”答案中提供的说明来制作音量滑块，而不是使用 MPVolumeView。