PRGTipView
PRGTipView is a drop-in solution for adding onboarding tips to your apps. It supports:
- Title, detail and dismissal button
- Give focus on a particular view with configurable insets
- Automatic placement of title, detail and the button above or below the focused view (if provided)
- Presentation and dismissal animations
- Focus view pulsating effect (using the Pulsar Library)
Example
To run the example project, clone the repo, and run pod install from the Example directory first.
Requirements
- iOS 9.3+
- Swift 5
Installation
PRGTipView is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod 'PRGTipView'
Usage
//1. Create a PRGTipViewConfiguration instance
let config = PRGTipViewConfiguration()
//2. Customize the TipView via the properties
config.titleText = "This is a title"
config.detailText = "This is the detail text, that adds more information to your tip."
config.buttonText = "OK"
config.focusView = button
config.focusInsets = UIEdgeInsets(top: 8, left: 4, bottom: 8, right: 4)
config.focusDistance = 50
config.circularFocus = false
config.animateIn = true
config.animateOut = true
//3a. You can either use the static func TipView.show like described below:
PRGTipView.show(fromViewController: self, withConfiguration: config, completion: nil)
//3b. Or you can create a PRGTipView instance and present it (it's a ViewController subclass)
let tipView = PRGTipView(configuration: config)
present(tipView, animated: false, completion: nil)
Configuration Properties
PRGTipViewConfiguration contains properties that help customize the presenting tip view:
| PROPERTY | TYPE | DEFAULT VALUE | EXPLANATION |
|---|---|---|---|
| backgroundColor | UIColor | .black | The background color of the Tip View |
| backgroundAlpha | CGFloat | 0.85 | The background alpha of the Tip View |
| tipTextYSpacing | CGFloat | 30 | The vertical spacing between the Tip View Title, Detail and Button |
| titleText | String? | The string to be shown as the Tip View title | |
| titleTextFont | UIFont | systemFont(ofSize: 25) | The font of the Tip View title |
| titleTextColor | UIColor | .white | The color of the Tip View title |
| attributedTitleText | NSAttributedString? | The attributed string to be shown as the Tip View title. If set, it overrides "titleText", "titleTextFont" and "titleTextColor" properties | |
| detailText | String? | The string to be shown as the Tip View detail | |
| detailTextFont | UIFont | systemFont(ofSize: 29) | The font of the Tip View detail |
| detailTextColor | UIColor | .white | The color of the Tip View detail |
| attributedDetailText | NSAttributedString? | The attributed string to be shown as the Tip View detail. If set, it overrides "detailText", "detailTextFont" and "detailTextColor" properties | |
| buttonText | String? | The string to be shown as the Tip View dismissal button title | |
| buttonTextFont | UIFont | boldSystemFont(ofSize: 14) | The font of the Tip View dismissal button |
| buttonTextColor | UIColor | .white | The color of the Tip View dismissal button |
| attributedButtonText | NSAttributedString? | The attributed string to be shown as the Tip View dismissal title. If set, it overrides "buttonText", "buttonTextFont" and "buttonTextColor" properties | |
| focusView | UIView? | The UIView to be focused when the Tip View is presented | |
| circularFocus | Bool | false | If a "focusView" is provided, this property controls whether the mask used to focus on the view should be circular. In default "false" state, the mask is rectangular |
| useLargestDimension | Bool | true | If "circularFocus" is set to true for a non square "focusView", leaving this property to "true" will use the "focusView"'s largest dimension to calculate the focus mask radius, while setting it to "false" will use the smallest dimension and centre the circular mask on the "focusView". |
| focusInsets | UIEdgeInsets | .zero | Adds padding to the "focusView" mask. If "circularFocus" is set to "true", then it adds only the .top inset to the radius calculation. |
| animateIn | Bool | true | Whether the Tip View should be presented animated. Helpful in situations where you want to chain several Tip Views and you do not want to repeat the animation on each and every one of them. |
| animateOut | Bool | true | Whether the Tip View should be dismissed animated. Helpful in situations where you want to chain several Tip Views and you do not want to repeat the animation on each and every one of them. |
| pulseMode | Enum | .none | Whether the "focusView", if provided, should pulse. |
| focusDistance | CGfloat | 0 | The vertical spacing between the "focusView" and the container of the actual Tip Texts (Title, Detail, Button). If the provided "focusView" is in the bottom half of the screen, the tip container is presented above it and this property is the distance from the bottom of the tip container to the top of the "focusView" mask. If the provided "focusView" is in the top half of the screen, the tip container is presented below it and this property is the distance from the top of the tip container to the bottom of the "focusView" mask. |
| tipContainerLeading | CGFloat | 20 | The spacing between the container of the actual Tip Texts (Title, Detail, Button) to it's superView's leading. |
| tipContainerTrailing | CGFloat | 20 | The spacing between the container of the actual Tip Texts (Title, Detail, Button) trailing to it's superView's trailing. |
| animationDuration | Double | 0.3 | The duration of any animation that takes place in the Tip View (except from the pulsating effect) |
| buttonAction | (()->())? | The code to be executed after the Tip View is dismissed |
About the Pulsar Library
At the time of publishing PRGTipView, the Pulsar library has not been updated on the Cocoapods repositories and cannot be used as a direct dependency, thus resorting in including the v2.0.5 source code in the bundle. As soon as the dependencies are satisfied via Cocoapods, we will update PRGTipView to use Pulsar as a pod dependency.
License
PRGTipView is made for Programize LLC by John Spiropoulos and it is available under the MIT license.
This product includes Pulsar code by Vincent Esche. License information is stored here: LICENSE
1 Dec 11, 2021
9 Nov 15, 2022
2 Dec 19, 2022
0 Dec 31, 2021
74 Dec 15, 2022
25 Nov 3, 2022
53 Dec 16, 2022
5 Oct 31, 2022
362 Jul 1, 2022
17 Sep 24, 2022
94 Dec 31, 2022
6 Nov 10, 2017
9 Dec 29, 2022
20 Dec 29, 2022
210 Dec 28, 2022
231 Dec 29, 2022
380 Dec 19, 2022
1 Dec 15, 2021