philippeboisney / alertonboarding

A simple and attractive AlertView to onboard your users in your amazing world.

AlertOnboarding

A simple and attractive AlertView to onboard your users in your amazing world.

PRESENTATION

This AlertOnboarding was inspired by this amazing dribbble. It will help you to maximise, simply, onboarding process on your app.

DEMO

INSTALLATION

####COCOAPODS

pod 'AlertOnboarding'

USAGE

//First, declare datas
var arrayOfImage = ["image1", "image2", "image3"]
var arrayOfTitle = ["CREATE ACCOUNT", "CHOOSE THE PLANET", "DEPARTURE"]
var arrayOfDescription = ["In your profile, you can view the statistics of its operations and the recommandations of friends",
"Purchase tickets on hot tours to your favorite planet and fly to the most comfortable intergalactic spaceships of best companies",
"In the process of flight you will be in cryogenic sleep and supply the body with all the necessary things for life"]

//Simply call AlertOnboarding...
var alertView = AlertOnboarding(arrayOfImage: arrayOfImage, arrayOfTitle: arrayOfTitle, arrayOfDescription: arrayOfDescription)

//... and show it !
alertView.show()

//And maybe, if you want, you can hide it.
alertView.hide()

CUSTOMIZING

You have to set options BEFORE call show() function.

//Modify background color of AlertOnboarding
self.alertView.colorForAlertViewBackground = UIColor(red: 173/255, green: 206/255, blue: 183/255, alpha: 1.0)

//Modify colors of AlertOnboarding's button
self.alertView.colorButtonText = UIColor.whiteColor()
self.alertView.colorButtonBottomBackground = UIColor(red: 65/255, green: 165/255, blue: 115/255, alpha: 1.0)

//Modify colors of labels
self.alertView.colorTitleLabel = UIColor.whiteColor()
self.alertView.colorDescriptionLabel = UIColor.whiteColor()

//Modify colors of page indicator
self.alertView.colorPageIndicator = UIColor.whiteColor()
self.alertView.colorCurrentPageIndicator = UIColor(red: 65/255, green: 165/255, blue: 115/255, alpha: 1.0)

//Modify size of alertview (Purcentage of screen height and width)
self.alertView.percentageRatioHeight = 0.5
self.alertView.percentageRatioWidth = 0.5

//Modify labels
self.alertView.titleSkipButton = "PASS"
self.alertView.titleGotItButton = "UNDERSTOOD !"

TRACKING EVENTS

If you want to know when the user completes onboarding, skips onboarding, or triggers the next step, you can use the AlertOnboardingDelegate to listen for these updates.

//Add delegate to your ViewController
class ViewController: UIViewController, AlertOnboardingDelegate

//... when initialising AlertOnboarding
alertView.delegate = self

//... inside your class that conforms to AlertOnboardingDelegate
func alertOnboardingSkipped(currentStep: Int, maxStep: Int) {
    print("Onboarding skipped the \(currentStep) step and the max step he saw was the number \(maxStep)")
}

func alertOnboardingCompleted() {
   print("Onboarding completed!")
}

func alertOnboardingNext(nextStep: Int) {
   print("Next step triggered! \(nextStep)")
}

FEATURES

• Multi-Device Full Support
• Rotation Support
• Swift 3 Support
• Fully customisable
• Tracking Events

Version

2.0

Author

Philippe BOISNEY (phil.boisney(@)gmail.com)

Design

Sasha Gorosh

alertonboarding's Issues

Showing without pressing button

Hello. How can I show this without pressing a button in the first page? Actually I wrote self.alertView.show() in viewDidLoad() but it does not work. I would appreciate it if you could help me to do it.

Double page control

I wanted to show the alert with some transparency so I used the next settings:

        let alpha: CGFloat = 0.82
        let blueAlpha = UIColor(red: 3/255, green: 169/255, blue: 244/255, alpha: alpha)

        alertView.colorForAlertViewBackground = UIColor(white: 0, alpha: alpha)
        alertView.colorButtonText = UIColor(white: 1, alpha: alpha)
        alertView.colorButtonBottomBackground = blueAlpha
        alertView.colorTitleLabel = UIColor(white: 1, alpha: alpha)
        alertView.colorDescriptionLabel =  UIColor(white: 1, alpha: alpha)
        alertView.colorPageIndicator =  UIColor(white: 1, alpha: alpha)
        alertView.colorCurrentPageIndicator = blueAlpha

But then the page control background area was darkened. I realized that the backgroundColor of the page control was the same used in the alert view, so I made a quick mod to the next line in AlertPageViewController:

    self.pageControl.backgroundColor = alertview.colorForAlertViewBackground

to

    self.pageControl.backgroundColor = UIColor.clearColor()

Now it seems like there are two page controls overlapped.

Branch for Swift 2.3?

I wonder what version or branch is compatible with Swift 2.3. Thanks!

Swift Legacy Problems

Getting the following error. Was wondering if this happens to anybody else too when using xcode 8 and swift 3.

Is there something that needs to be changed inside of cocoapod file to prevent this from happening? Thanks!

“Use Legacy Swift Language Version” (SWIFT_VERSION) is required to be configured correctly for targets which use Swift. Use the [Edit > Convert > To Current Swift Syntax…] menu to choose a Swift version or use the Build Settings editor to configure the build setting directly.

Is there a way i can increase the height of the image

Broken on iOS 12 (center of alert is in bottom-right corner of device)

Thanks Philippe for the pod!

A quick heads-up, the alert is broken on iOS 12 beta.

Since I had to manually install the pod anyway to include all the nice PRs that people have pushed, here's how I replaced the constraints to fix the issue (only tested on iPhone X). Won't be pushing a PR because there is already a list of a few ones waiting, plus I am using a UIView convenience extension to create my anchors in a few lines.

In AlertOnboarding, after removing the constraints (keep those lines), here are the constraints to create:

---

• view width anchored to its superview width, multiplier = percentageRatioWidth
• view height anchored to its superview height, multiplier = percentageRatioHeight
• view centered in its superview, on X and Y axis

---

• buttomButton width anchored to view width, multiplier 1
• buttomButton height anchored to view height, multiplier 0.1
• buttomButton's bottom anchored to view bottom
• buttomButton centered in its superview on X axis

---

• container's view width anchored to view width, multiplier 1
• container's view height anchored to view height, multiplier 0.9
• container's view top anchored to view top
• container's view centered in its superview on X axis

---

• background fills its superview (pinned to all edges)

---

For anyone using LBTAComponents's UIView extension, here's a ready-to-use snippet to replace AlertOnboarding' configureConstraints function:

fileprivate func configureConstraints(_ superView: UIView) {
    
    removeConstraints(constraints)
    buttonBottom.removeConstraints(buttonBottom.constraints)
    container.view.removeConstraints(container.view.constraints)
    
    equal(width: superView.widthAnchor, widthMultiplier: percentageRatioWidth,
          height: superView.heightAnchor, heightMultiplier: percentageRatioHeight)
    anchorCenterSuperview()
    
    buttonBottom.equal(width: widthAnchor, height: heightAnchor, heightMultiplier: 0.1)
    buttonBottom.anchor(bottom: bottomAnchor)
    buttonBottom.anchorCenterXToSuperview()
    
    //Constraints for container
    container.view.equal(width: widthAnchor, height: heightAnchor, heightMultiplier: 0.9)
    container.view.anchor(top: topAnchor)
    container.view.anchorCenterXToSuperview()
    
    //Constraints for background
    background.fillSuperview()
}

PageControl Indicator not showing

PageControl indicator doesn't show when purcentageRatioHeight is less than default (0.8).

The error seems to be on AlertPageViewController:

    let alertViewSizeHeight = UIScreen.mainScreen().bounds.height*0.8

It must be:

    let alertViewSizeHeight = UIScreen.mainScreen().bounds.height*alertview.purcentageRatioHeight

Thanks

Loading images from the Web

I see AlertOnboarding uses UIImage(named: ) to load images and wants arrayOfImages as Strings from the user but I can’t seem to load images from the web as UIImage(named: “URLString of an image”). Nor do I have an option to download the image as NSData and then use UIImage(data: ) to show my image. What do I do?

Carthage Compatibility

Could you make this compatible with Carthage?

CocoaPods please!

I'd be cool to also add Cocoapods support. I done this implementation myself last week for my library. Just follow this post and this checklist.
Lemme know if you need any help! 😄

Could not cast value of type 'AlertOnboarding.AlertChildPageViewController'

Hi Philippe and thank You for Your job.

I'm trying to use AlertOnboarding on my project but I receive the error:

Could not cast value of type 'AlertOnboarding.AlertChildPageViewController' (0x10d8b53f8) to 'Surf_Shop.AlertChildPageViewController' (0x10d2a6da8).

on:

pageContentViewController = UINib(nibName: "AlertChildPageViewController", bundle: nil).instantiateWithOwner(nil, options: nil)[0] as! AlertChildPageViewController

while the master project works fine.

Could You help me please to solve it?
Thank You very much
Kind regards
Fabio

How to increase height and width image on alertview ?

i want to increase height and width of image ? mean i want make image full screen on alertview ?

Swift 3 Support

Are there plans to upgrade this library to support Swift 3? Thanks!

How to access the child page view content?

The following line in the code is preventing me from tinting the color of my icons. Is there a workaround to accessing the child page view controllers?

Thanks!

    fileprivate var container: AlertPageViewController!

Remove pagecontrol when max step is 1

Would be swell to add an option to remove the page control when items being used in the AlertOnboarding is only 1, so this can also be used as an alert.

Carthage support

Hey, nice and simple library - thx for sharing!

Any plans or desire to support Carthage?

swift5.0 support

swift5.0 support

fatal error: init(coder:) has not been implemented

Why did I got fatal error: init(coder:) has not been implemented error? I'm installing this lib with cocoapod and using XCode 9. Thanks in advance

alertView.show() not working in UIViewController

Following the usage I can't get this to work. Calling it from my viewDidLoad() in iOS 9.0 installed using cocoapods.

After calling alertView.show(), print(alertView) shows:

<AlertOnboarding.AlertOnboarding: 0x144d43e00; frame = (0 0; 0 0); clipsToBounds = YES; layer = <CALayer: 0x144d338f0>>

Am I doing anything wrong or do I need to do something else?

Viewing on top of a SKScene (SpriteKit)

The alert doesn't show when calling it from a SKScene.
Solutions?

WEB APP

Hello I really liked the idea and would like to use it in my web app, would have some version for webapp, with (javascript, html and css)

Alert dark background incorrect size after rotation

When I rotate the device the background doesn't size correctly.

I made the next changes to fix the issue:

    //Constraints for background
    let widthContraintsForBackground = NSLayoutConstraint(item: self.background, attribute:.Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: UIScreen.mainScreen().bounds.width)
    let heightConstraintForBackground = NSLayoutConstraint.init(item: self.background, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: UIScreen.mainScreen().bounds.height)

to

    //Constraints for background
    let widthContraintsForBackground = NSLayoutConstraint(item: self.background, attribute:.Width, relatedBy: .Equal, toItem: superView, attribute: .Width, multiplier: 1, constant: 0)
    let heightConstraintForBackground = NSLayoutConstraint.init(item: self.background, attribute: .Height, relatedBy: .Equal, toItem: superView, attribute: .Height, multiplier: 1, constant: 0)

Edit Label Size

How can I edit the font and label size? Thank you!

add scroll for description & image should be optional

1. If my description too long it'll cannot show full, so I hope you will make scroll view for description part.
2. Sometime we don't want to show image in alert, so image should be optional.