Skip to content

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

License

Notifications You must be signed in to change notification settings

prasad1120/ElegantPopover

Repository files navigation

Top Language Platform Version License

Elegant Popover

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

Features

  • Border with Color or Gradient (Any layer).
  • Multiple Borders for a Popover.
  • Customisable Arrow shape.
  • 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