ASJOverflowButton

Working on projects that are simultanously being developed on both iOS and Android can post interesting challenges, especially concerning the look and feel of both apps. There are standard controls on both platforms that are not available in the other. Overflow menu is one of them. This library is a UIBarButtonItem subclass that you can put on a navigation bar and an overflow menu will be presented on its tap.

Installation

CocoaPods is the preferred way to install this library. Add this command to your Podfile:

pod 'ASJOverflowButton'

Usage

Use the designated initializer to create the button, like so:

ASJOverflowButton *overflowButton = [[ASJOverflowButton alloc] initWithTarget:aController title:@"An optional title" image:anOptionalImage button:anOptionalButton items:_overflowItems];
self.navigationItem.rightBarButtonItem = overflowButton;

The items need to be on type ASJOverflowItem. Constructor method is provided to generate them. Just attach an array of these during initialization.

ASJOverflowItem *item = [ASJOverflowItem itemWithName:itemName image:image backgroundColor:color];

The are a few properties to customize the look and feel of the overflow menu.

@property (nullable, strong, nonatomic) UIColor *menuBackgroundColor;

Sets the background color of the overflow menu. Defaults to white.

@property (nullable, strong, nonatomic) UIColor *itemTextColor;

Sets the text color of the menu items. Defaults to black.

@property (nullable, strong, nonatomic) UIColor *itemHighlightedColor;

Sets the menu item's background color when tapped. Defaults to RGB (217, 217, 217).

@property (nullable, strong, nonatomic) UIColor *borderColor;

Sets the color of border for the menu. Defaults to gray.

@property (assign, nonatomic) CGFloat borderWidth;

Sets the width of the menu's border. Defaults to zero.

@property (nullable, strong, nonatomic) UIFont *itemFont;

Sets the font of the menu items. Defaults to system font of size 17 pts.

@property (assign, nonatomic) BOOL hidesSeparator;

Hides the separator between two menu items. Needs to be set NO for separatorInsets property to work. Defaults to YES.

@property (assign, nonatomic) BOOL hidesShadow;

Hides the shadow around the menu. Defaults to NO.

@property (assign, nonatomic) BOOL dimsBackground;

Dims the background when menu is showing. Defaults to NO.

@property (assign, nonatomic) CGFloat dimmingLevel;

Sets the degree to which the background is dimmed when menu is shown. Will work only if shouldDimBackground is set to YES. Ranges from 0.0 to 1.0. Defaults to 0.6.

@property (assign, nonatomic) CGFloat menuItemHeight;

Sets the height of individual overflow menu items. Defaults to 40 pts.

@property (assign, nonatomic) CGFloat widthMultiplier;

A ratio to set the menu width with respect to the screen width. Acceptable values are from 0.0 to 1.0. For example, if your screen width is 320.0 pts and 'widthMultiplier' is set to 0.5, the menu width will be 0.5 * 320.0 = 160 pts. Defaults to 0.4.

@property (assign, nonatomic) SeparatorInsets separatorInsets;

Sets the left and right insets of the separator between two menu items. Works only if hidesSeparator is set to 'NO'. Defaults to (15.0f, 0.0f).

@property (assign, nonatomic) MenuMargins menuMargins;

Sets the margins of the menu from the top, right and bottom edges of the screen. Menu will always appear below the status bar. Defaults to 5 pts each.

@property (assign, nonatomic) MenuAnimationType menuAnimationType;

Sets the way the menu should be shown. There are two options, fading it in or zooming in from the top right corner. Defaults to MenuAnimationTypeZoomIn.

Limitation

Can only show the overflow menu on the top right corner of the screen. From release 1.2 however, you can adjust the menuMargins property to change the menu position.

To-do

~~Menu closes abruptly when tapped outside~~
~~Menu should close when tapped on the clear table view outside the items~~
~~Allow a menu to be created with a title~~
~~Some way to adjust width of the menu~~
Maybe some way to show menu on both, left and right sides
Gradient at bottom to hint scrolling

Credits

To Shashank Pali to make the menu zoom in code work - Read a blog post about it
To Ken M. Haggerty for adding new features and logic
To Vishal Deshai for helping fix RTL issue
to Fuzzball for helping implement custom buttons
UITableView passes touch events to superview when it shouldn't
Can i change multiplier property for NSLayoutConstraint?
Which is the best way to suppress “unused variable” warning?

License

ASJOverflowButton is available under the MIT license. See the LICENSE file for more info.