Make It Your Own
Pre-requisites
Customization should only be applied before presenting the menu, and assume that you already have either one of the following:
- a
PopMenuViewControllervariable called ->menu - a
PopMenuManagervariable called ->manager
Dismiss On Selection default: true
If you don't want the menu to auto-dismiss once a selection has been performed, you can change the property:
menu.shouldDismissOnSelection = false
// ======= or =======
manager.popMenuShouldDismissOnSelection = false
Background styles default: .dimmed(color: .black, opacity: 0.4)
There are mainly 3 types of background styles:
- Blurred (dark, light & extra Light)
- Dimmed (color & opacity)
- None
Simply set the popMenuBackgroundStyle on the appearance property using . notation:
menu.appearance.popMenuBackgroundStyle = .blurred(.dark)
menu.appearance.popMenuBackgroundStyle = .blurred(.light)
menu.appearance.popMenuBackgroundStyle = .blurred(.extralight)
menu.appearance.popMenuBackgroundStyle = .dimmed(color: .white, opacity: 0.6)
menu.appearance.popMenuBackgroundStyle = .none()
// ======= or =======
manager.popMenuAppearance.popMenuBackgroundStyle = .blurred(.dark)
Action Color default: white
To bulk set action colors is simple and straightforward:
menu.appearance.popMenuColor.actionColor = .tint(.green) // or use Color Literals if you're using Xcode 9
// ======= or =======
manager.popMenuAppearance.popMenuColor.actionColor = .tint(.green) // or use Color Literals if you're using Xcode 9
To set each action with different color, you'll have to specify in the color parameter initializer of action PopMenuDefaultAction:
let actions = [
PopMenuDefaultAction(title: "Some Title", image: UIImage(named: "blah"), color: .gray),
PopMenuDefaultAction(title: "Another Title", image: UIImage(named: "icon"), color: .yellow)
]
Background Color(s) default: flat dark gradient
There are 2 types of background colors:
- Solid fill (one color)
- Gradient fill (two colors)
To set the background color(s) of the menu:
menu.appearance.popMenuColor.backgroundColor = .solid(fill: .gray) // A solid gray background color
menu.appearance.popMenuColor.backgroundColor = .gradient(fill: .yellow, .pink) // A gradient from yellow to pink
// ======= or =======
manager.popMenuAppearance.popMenuColor.backgroundColor = ...
Action Font default: .systemFont(ofSize: 16, weight: .semiBold)
To set the font of all actions:
menu.appearance.popMenuFont = UIFont(name: "AvenirNext-DemiBold", size: 14)!
menu.appearance.popMenuFont = .systemFont(ofSize: 15, weight: .bold)
// ======= or =======
manager.popMenuAppearance.popMenuFont = ...
Corner Radius default: 24
To set corner radius of the menu container:
menu.appearance.popMenuCornerRadius = 10
// ======= or =======
manager.popMenuAppearance.popMenuCornerRadius = 10
Action Height default: 50
To set height of each action:
menu.appearance.popMenuActionHeight = 65
// ======= or =======
manager.popMenuAppearance.popMenuActionHeight = 65
Action Item Separator default: none
To set the action item separator:
menu.appearance.popMenuItemSeparator = .none()
menu.appearance.popMenuItemSeparator = .fill() // Default height of 0.5, white color with 0.5 opacity
menu.appearance.popMenuItemSeparator = .fill(.yellow, height: 1) // Or set it yourself
// ======= or =======
manager.popMenuAppearance.popMenuItemSeparator = ...
Action Image Rendering Mode default: .alwaysTemplate
To set the action item image rendering mode:
let action = PopMenuDefaultAction(title: "Some Title", image: UIImage(named: "blah"), color: .gray)
action.imageRenderingMode = .alwaysOriginal
Action Image Sizing default: 27
To set the action item image sizing:
let action = PopMenuDefaultAction(title: "Some Title", image: UIImage(named: "blah"), color: .gray)
action.iconWidthHeight = 45
Scrollable when actions are too many
To set the scrolling properties:
menu.appearance.popMenuActionCountForScrollable = 10 // default 6
menu.appearance.popMenuScrollIndicatorHidden = true // default false
menu.appearance.popMenuScrollIndicatorStyle = .black // default .white
// ======= or =======
manager.popMenuAppearance.popMenuActionCountForScrollable = ... // same as above
Status Bar Style default: automatic detection based on background color
If you don't want PopMenu to use automatic detection to set status bar style, you can override it:
menu.appearance.popMenuStatusBarStyle = .default
// ======= or =======
manager.popMenuAppearance.popMenuStatusBarStyle = .default
Missing Customization?
If there's any missing customization that you'd want PopMenu to have, feel free to open an issue in the official GitHub repository.