#PopoverView

[objectivesea]

Put a UISlider into a Popover

To clean up the UI of my app Chack! I decided to move the UISlider from the toolbar to a popover coming from a toolbar button.

Before:

After:

There's more going on than just the change to the UISlider, but the key part of this is there used to be a UISlider in the toolbar, and now it's accessed via a button on the toolbar. This leaves room for another button, which I've used to add a proper color picker. It means more taps for the user, but overall I believe it's an improvement in control and usability.

To do this change, I tried a bunch of things. The first thing I did was try UIPopoverController. I was quickly reminded that this only works on iPad, not on iPhone. sad trombone.

So the next step is always a trip to cocoacontrols.com and cocoapods.org to look up a viable replacement. If I can't find something there, I generally settle in to build it myself, but usually something already exists that can be adapted.

After auditioning a few popover classes, I settled on PopoverView. I tried WEPopover first, but I ran into some problems where the popover was making my UIBarButtonItem disappear every time I showed it. I never sorted out the issue, but PopoverView works well enough, and looks great. The only downside is that it doesn't have a present-from-bar-button-item method on it.

pod 'PopoverView', '~> 0.0.1'

You are using CocoaPods, right? Add the above line to your Podfile and run pod update to install it. If you're not using cocoapods already, HEAVEN HELP YOU, YOUR SOUL IS LOST!

Once installed, go to your view controller and add a custom UIView to your nib, outside of your main view. Place a single UISlider in the center of the view. It's going to be rotated to be vertical, so you want to make it as wide as the containing view is long (less 20px margins on either side). Since my view is 270px tall, I made my UISlider 230px wide and centered it.

Xcode doesn't offer a way to visually make a vertical slider, but you can do it in the .xib by using User Defined Runtime Attributes. Go to that section, and set the Key Path to layer.transform.rotation.z, the type to String and the value to -1.570795 (which is -pi/2).

Now wire up the UIBarButtonItem to a IBAction method on your view controller (sliderButtonAction:), and wire up the UIView that contains the UISlider to an IBOutlet (sliderView). Don't forget to #import "PopoverView.h".

-(IBAction)sliderButtonAction:(id)sender { UIView *topView = nil; NSArray* windowViews = [[[UIApplication sharedApplication] keyWindow] subviews]; for (int i = windowViews.count - 1; i >= 0 ; i--) { topView = [windowViews objectAtIndex:i]; if (!topView.isHidden) break; } [PopoverView showPopoverAtPoint:(CGPoint){147.0f, topView.frame.size.height-44.0f} inView:topView withContentView:self.sliderView delegate:nil]; }

The first bit of this method finds the topmost view, and the second bit uses the topmost view to present the popover. A major downside to PopoverView, as mentioned earlier, is that you have to specify the location of the popover's presenter. This means either hard-coding it, as I've done, or writing some code (as WEPopover has done) to find the location programmatically. I chose the easy way out, and just fudged the location. Annoying if I change the button layout ever, but it works for now.

And amazingly, that's it. PopoverView handles hiding and showing the popover, and prevents two popovers from showing at once (grounds for app store rejection, I know from personal experience). You need to wire the slider up to your UI to do whatever it's supposed to do, but that's the basic premise.