Highly customisable popovers with multiple borders, borders styles (color and gradient) and arrow styles in iOS.
- Border with Color or Gradient (Any layer).
- Multiple Borders for a Popover.
- Customisable Arrow shape.
- Solid and Outlined Arrow.
- Swift 4
- iOS 11 and above
ElegantPopover is available on CocoaPods.
Add this line to your Podfile
.
pod 'ElegantPopover'
Run pod install
.
This library depends on ClippingBezier library.
// 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)
Note: The following customisations are to be done before creating an instance of ElegantPopoverController
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)]
design.insets = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
design.cornerRadius = 15
Can be set as .any
for the popover to figure out appropriate direction on its own
arrow.direction = .left
arrow.height = 60
arrow.base = 140
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)]
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
let popoverController = ElegantPopoverController(contentView: contentView,
design: design,
arrow: arrow,
barButtonItem: barButtonItem)
To adjust the arrow position to barButtonItem
arrow.height = 25
arrow.base = 45
This project is licensed under the MIT License - see the LICENSE file for details