Elegant Popover

Highly customisable popovers with multiple borders, borders styles (color and gradient) and arrow styles in iOS.

Features

• [x] Border with Color or Gradient (Any layer).
• [x] Multiple Borders for a Popover.
• [x] Customisable Arrow shape.
• [x] Solid and Outlined Arrow.

Requirements

• Swift 4
• iOS 11 and above

Installation

ElegantPopover is available on CocoaPods.

Add this line to your Podfile.

pod 'ElegantPopover'

Run pod install.

Dependencies

This library depends on ClippingBezier library.

Usage

// In your view controller
let arrow = PSArrow(height: 25, base: 35, baseCornerRadius: 0, direction: .up)
var design = PSDesign()
design.backGroundColor = UIColor.white

// 'contentView' is the UIView which contains 'Elegant Popover' UILabel
let popoverController = ElegantPopoverController(contentView: contentView,
                                                design: design,
                                                arrow: arrow,
                                                sourceView: view,
                                                sourceRect: CGRect(origin: CGPoint(x: 100, y: 170), size:CGSize.zero))
    
present(popoverController, animated: true)

Customisations

Note: The following customisations are to be done before creating an instance of ElegantPopoverController

Gradient border

let gradient = CAGradientLayer()
gradient.colors = [UIColor(red: CGFloat(222/255.0),
                           green: CGFloat(98/255.0),
                           blue: CGFloat(98/255.0),
                           alpha: CGFloat(1.0)).cgColor,
                   UIColor(red: CGFloat(255/255.0),
                           green: CGFloat(184/255.0),
                           blue: CGFloat(140/255.0),
                           alpha: CGFloat(1.0)).cgColor]
gradient.startPoint = CGPoint(x: 0, y: 0)
gradient.endPoint = CGPoint(x: 1, y: 1)

design.borders = [PSBorder(filling: .layer(gradient), width: 12)]

Insets of popover

design.insets = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)

Corner radius of popover

design.cornerRadius = 15

Arrow direction

Can be set as .any for the popover to figure out appropriate direction on its own

arrow.direction = .left

Customise arrow shape

arrow.height = 60
arrow.base = 140

Multiple borders

Multiple borders consisting of either UIColor or CALayer can be added in any combination

design.borders = [PSBorder(filling: .layer(gradient), width: 12),
                  PSBorder(filling: .pureColor(UIColor(red: CGFloat(255/255.0),
                                                       green: CGFloat(184/255.0),
                                                       blue: CGFloat(140/255.0),
                                                       alpha: CGFloat(1.0))), width: 8)]

Solid Arrow

The index of border required to take the shape of a solid arrow and not outline it. Indices go from outermost border starting with 0 to innermost. Default value is nil which means all the borders will outline the arrow.

design.solidArrowBorderIndex = 1

Anchor to UIBarButtonItem

let popoverController = ElegantPopoverController(contentView: contentView,
                                                design: design,
                                                arrow: arrow,
                                                barButtonItem: barButtonItem)

To adjust the arrow position to barButtonItem

arrow.height = 25
arrow.base = 45

License

This project is licensed under the MIT License - see the LICENSE file for details