Elegant Popover
Highly customisable popovers with different shapes, borders, arrow styles and gradient 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