Matching vertical positions of MPVolumeView and UISlider in UIToolBar

Question

I have a UIToolBar that should contain sliders for controlling volume and brightness. I use the MPVolumeView slider for volume and the regular UISlider for brightness. While the sliders themselves work fine, their vertical positions are incompatible:

How can I make them be at the same height?

My code is:

- (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 coordinates of CGRectMake does nothing.)

The comment in the question “ MPVolumeView Thumb custom image is not vertically centered with iOS 5.1 ” seemed to suggest using the “ Thumb Lock Pointer ” trick here , but the implementation of this code did not seem to do anything as far as I can tell, and I'm not sure I said Is it about the same problem.

Answer 1

If you create a trivial subclass of MPVolumeView and override volumeSliderRectForBounds: you can define your own alignment for the slider rectangle. I like to return all borders that center the slider in the MPVolumeView frame MPVolumeView

 @interface KMVolumeView : MPVolumeView @end @implementation KMVolumeView - (CGRect)volumeSliderRectForBounds:(CGRect)bounds { return bounds; } @end 

Just use your subclass in code or in the interface builder, and then you can reliably position the volume view.

Answer 2

I came up with something that will extend kmikael's answer:

 @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 

This implementation is different in that it still uses horizontal defaults, but overrides vertical ones to keep MPVolumeView vertically in its container. It also overrides -routeButtonRectForBounds: so that the broadcast / route button is also centered.

I need to wonder why the default implementation has a shaky vertical position.

Answer 3

SWIFT Version: Accept Hyperspasm Response Form:

 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

In the end, I used UISlider for both, using the instructions in “Get a System Volume” and “Change System Volume” to make the volume slider instead of using MPVolumeView.