An iOS framework to easily create a beautiful and engaging onboarding experience with only a few lines of code.

Overview

Onboard

Badge w/ Version CocoaPods Build Status Carthage compatible License

demo demo demo demo

Click Here For More Examples

Important

Onboard is no longer under active development, and as such if you create any issues or submit pull requests, it's not very likely to be integrated. Thanks to all that helped make Onboard better over the last few years!

Usage

Adding the following to your Podfile and running pod install should do the trick:

pod 'Onboard'

If you don't want to use CocoaPods, you can use Carthage or grab the files located in the Source folder and pull them into your project manually.

Each onboarding experience is comprised of two primary components - the background and the content pages. The background includes the static background image/video, the page control, and the skip button. The content pages are made up of four pieces, an image/icon, title, body, and action button.

Create individual pages by creating instances of OnboardingContentViewController. Provide a title, body, image, text for an action button, and within the action block handle whatever you want to do when the users press the button. If you don't want a button, you can leave both the button text and action handler nil.

Objective-C

OnboardingContentViewController *firstPage = [OnboardingContentViewController contentWithTitle:@"Page Title" body:@"Page body goes here." image:[UIImage imageNamed:@"icon"] buttonText:@"Text For Button" action:^{
    // do something here when users press the button, like ask for location services permissions, register for push notifications, connect to social media, or finish the onboarding process
}];

Swift

let firstPage = OnboardingContentViewController(title: "Page Title", body: "Page body goes here.", image: UIImage(named: "icon"), buttonText: "Text For Button") { () -> Void in
    // do something here when users press the button, like ask for location services permissions, register for push notifications, connect to social media, or finish the onboarding process
    }

Then create the OnboardingViewController by providing either a background image or a URL to a local video file in your project, and an array of content view controllers you just created. You can then present the view modally and get the onboarding process started!

Objective-C

// Image
OnboardingViewController *onboardingVC = [OnboardingViewController onboardWithBackgroundImage:[UIImage imageNamed:@"background"] contents:@[firstPage, secondPage, thirdPage]];

// Video
NSBundle *bundle = [NSBundle mainBundle];
NSString *moviePath = [bundle pathForResource:@"yourVid" ofType:@"mp4"];
NSURL *movieURL = [NSURL fileURLWithPath:moviePath];

OnboardingViewController *onboardingVC = [OnboardingViewController onboardWithBackgroundVideoURL:movieURL contents:@[firstPage, secondPage, thirdPage]];

Swift

// Image
let onboardingVC = OnboardingViewController(backgroundImage: UIImage(named: "background"), contents: [firstPage, secondPage, thirdPage])

// Video
let bundle = NSBundle.mainBundle()
let moviePath = bundle.pathForResource("yourVid", ofType: "mp4")
let movieURL = NSURL(fileURLWithPath: moviePath!)

let onboardingVC = OnboardingViewController(backgroundVideoURL: movieUrl, contents: [firstPage, secondPage, thirdPage])

With only a few lines of code you have a beautiful, end-to-end onboarding process that will get your users excited to use your awesome application.

Customization

The iconImageView, titleLabel, bodyLabel, and actionButton properties are exposed for customizing fonts, sizing, etc., and the spacing between elements on the content pages can be customized as well:

onboardingVC.topPadding = 20;
onboardingVC.underIconPadding = 10;
onboardingVC.underTitlePadding = 15;
onboardingVC.bottomPadding = 20;

demo

Blurring, Masking, and Fading

By default, the image you use for the background will have a mask applied over it, darkening it a bit. This is to add a little bit of contrast so the text can more easily be seen. This can easily be disabled if your image is already edited or looks fine as-is:

onboardingVC.shouldMaskBackground = NO; // defaults to YES

We can also apply a blur to your background image:

onboardingVC.shouldBlurBackground = YES; // defaults to NO

Apply a fade effect to the icons, text, and buttons, while transitioning between pages. Contents fade out as you scroll away, and the contents for the next page fade in as they scroll in.

onboardingVC.shouldFadeTransitions = YES; // defaults to NO

Note: Ensure you do not cause the onboard view controller's view to be loaded prior to setting these properties, as these values only take effect when the view controller's viewDidLoad is called, so doing something like setting your onboardingVC.view.backgroundColor = [UIColor whiteColor]; before setting this values would lead to the setting of these to not take effect.

You can tweak these settings in a few different combinations to get your desired effect:

demo demo demo demo

Auto-Navigation

If you want to automatically move users to the next page in the onboarding process when they press the action button simply set the movesToNextViewController property to YES on any OnboardingContentViewController that isn’t the last view controller in the onboarding process. Coupled with this, you can disable the ability to swipe between contents by setting the swipingEnabled property on the OnboardingViewController to NO. This allows you to have greater control over the onboarding process if you desire. Finally, if your design lends itself to not having a page control, or if it is only one page, you can set the hidePageControl property to YES and the page control dots will not appear.

contentVC.movesToNextViewController = YES;
onboardingVC.swipingEnabled = NO;
onboardingVC.hidePageControl = YES;

Skipping

If you want to allow users to skip the onboarding process, enable skipping on the onboarding view controller and set a block to be executed when the skip button is pressed.

onboardingVC.allowSkipping = YES;
onboardingVC.skipHandler = ^{
    // Dismiss, fade out, etc...
};

Blocks

There may be cases in which you want to do something when the content pages are about to appear, and when they did appear. In this case, you can set the viewWillAppearBlock and viewDidAppearBlock properties on any or all of the content pages to handle whatever you’d like.

contentVC.viewWillAppearBlock = ^{
	// do something when the view will appear here…
}

contentVC.viewDidAppearBlock = ^{
	// do something when the view appears here…
}

Notes

I'm not currently supporting landscape at the moment, so I would recommend either using this in an application that only supports portrait, or wrapping it in a subclassed UINavigationController that only supports portrait.

Community

Questions, comments, issues, and pull requests welcomed!!

License

This project is made available under the MIT license. See LICENSE.txt for details.

Comments
  • Nothing happens

    Nothing happens

    I'd like to show Onboard at first time launch, but right now nothing appears. This is my code:

    
    #import "OnboardingViewController.h"
    @interface ViewController ()
    
    @implementation ViewController
    #
    #
    #
    -(void)firstTimePopup{
    
        OnboardingContentViewController *firstPage = [OnboardingContentViewController contentWithTitle:@"Welcome" body:@"body." image:[UIImage imageNamed:@"logo"] buttonText:@"Text For Button" action:^{
        }];
        OnboardingContentViewController *secondPage = [OnboardingContentViewController contentWithTitle:@"Welcome" body:@"body." image:[UIImage imageNamed:@"logo"] buttonText:@"Text For Button" action:^{
        }];
        OnboardingViewController *onboardingVC = [OnboardingViewController onboardWithBackgroundImage:[UIImage imageNamed:@"bg"] contents:@[firstPage, secondPage]];
        [self presentViewController:onboardingVC animated:YES completion:nil];
    end
    

    what am I missing?

    help wanted 
    opened by hellofabrizio 16
  • Xcode 8, Swift 3, crash

    Xcode 8, Swift 3, crash

    After update to Xcode 8 I got this crash.

    *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[_SwiftValue setDelegate:]: unrecognized selector sent to instance 0x60000024d9b0' *** First throw call stack: (

    0   CoreFoundation                      0x000000010f03a34b __exceptionPreprocess + 171
    1   libobjc.A.dylib                     0x000000010ea5521e objc_exception_throw + 48
    2   CoreFoundation                      0x000000010f0a9f34 -[NSObject(NSObject) doesNotRecognizeSelector:] + 132
    3   CoreFoundation                      0x000000010efbfc15 ___forwarding___ + 1013
    4   CoreFoundation                      0x000000010efbf798 _CF_forwarding_prep_0 + 120
    5   Onboard                             0x000000010df85289 -[OnboardingViewController generateView] + 2121
    6   Onboard                             0x000000010df83f7b -[OnboardingViewController viewDidLoad] + 171
    7   UIKit                               0x000000010faa306d -[UIViewController loadViewIfRequired] + 1258
    8   UIKit                               0x000000010faa34a0 -[UIViewController view] + 27
    9   UIKit                               0x000000010f96d045 -[UIWindow addRootViewControllerViewIfPossible] + 71
    10  UIKit                               0x000000010f96d796 -[UIWindow _setHidden:forced:] + 293
    11  UIKit                               0x000000010f9810a9 -[UIWindow makeKeyAndVisible] + 42
    12  UIKit                               0x000000010f8fa259 -[UIApplication _callInitializationDelegatesForMainScene:transitionContext:] + 4818
    13  UIKit                               0x000000010f9003b9 -[UIApplication _runWithMainScene:transitionContext:completion:] + 1731
    14  UIKit                               0x000000010f8fd539 -[UIApplication workspaceDidEndTransaction:] + 188
    15  FrontBoardServices                  0x00000001142e976b __FBSSERIALQUEUE_IS_CALLING_OUT_TO_A_BLOCK__ + 24
    16  FrontBoardServices                  0x00000001142e95e4 -[FBSSerialQueue _performNext] + 189
    17  FrontBoardServices                  0x00000001142e996d -[FBSSerialQueue _performNextFromRunLoopSource] + 45
    18  CoreFoundation                      0x000000010efdf311 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ + 17
    19  CoreFoundation                      0x000000010efc459c __CFRunLoopDoSources0 + 556
    20  CoreFoundation                      0x000000010efc3a86 __CFRunLoopRun + 918
    21  CoreFoundation                      0x000000010efc3494 CFRunLoopRunSpecific + 420
    22  UIKit                               0x000000010f8fbdb6 -[UIApplication _run] + 434
    23  UIKit                               0x000000010f901f34 UIApplicationMain + 159
    24  FirstCard                           0x000000010bbe9d3f main + 111
    25  libdyld.dylib                       0x0000000111b3268d start + 1
    26  ???                                 0x0000000000000001 0x0 + 1
    

    )

    Here is the code that I use to create Onboarding in AppDelegate.swift

    ` func generateOnBoardViewController()-> OnboardingViewController { print("(#function)") // Initialize onboarding view controller // var onboardingVC = OnboardingViewController() let icon = UIImage(named: "empty-biz") let firstPage = OnboardingContentViewController.content(withTitle: "Welcome", body: "Welcome message", image: icon, buttonText: nil) { }

        let secondPage = OnboardingContentViewController.content(withTitle: "Hello", body: "Body", image: icon, buttonText: nil) {
        }
        let thirdPage = OnboardingContentViewController.content(withTitle: "Start now.", body: "Sign up now it's easy.", image: icon, buttonText: nil) {
            self.switchToSignupOrLoginViewControllers()
        }
    
        let bg = UIImage(named: "onboard-bg")
        let onboardingVC = OnboardingViewController.init(backgroundImage: bg, contents: [firstPage, secondPage, thirdPage])
        return onboardingVC!
    
    }`
    

    Then I check if user is login, if not replace the rootViewController with this code

    self.window?.rootViewController = generateOnBoardViewController()

    I have try so many init method of OnboardingViewController but none of them works. Any suggestion?

    bug 
    opened by Geeroz 13
  • Action blocks

    Action blocks

    I made some changes to the action blocks. I know these are breaking changes, but with autocomplete it shouldn't be too big of an update for existing users. If this looks good I can make the necessary updates to the README file as well.

    The idea here is to pass a reference to self in the action block, so the handler can do things like skip to the next page. Here is an example of the desired usage:

    OnboardingContentViewController *page = [OnboardingContentViewController contentWithTitle:@"Page Title" body:@"Page body goes here." image:[UIImage imageNamed:@"icon"] buttonText:@"Text For Button" action:^(OnboardingContentViewController *onboardingContentController) {
        // start some long async process
    
        // show progress HUD or something
    
        // all done and everything succeeded, ready to move on
        [onboardingContentController moveNextPage];
    }];
    

    This allows for a bit more control than just the movesToNextViewController property.

    opened by Vortec4800 13
  • Add to an Storyboard

    Add to an Storyboard

    Hi Mike, here again my problem :) As I already mention in my email I can't really figure out, how to add this amazing project into mine. I´m using Storyboards and I would like to add my firstViewController after your "Skip" / "Lets Start" Buttons.... I saw in Code some hint, but for me it´s like a Wormhole (full of mysteries and questions) :)

    Here your code:

    - (void)setupNormalRootViewControllerAnimated:(BOOL)animated {
        // create whatever your root view controller is going to be, in this case just a simple view controller
        // wrapped in a navigation controller
        UIViewController *mainVC = [UIViewController new];
        mainVC.title = @"Main Application";
    
        // if we want to animate the transition, do it
        if (animated) {
            [UIView transitionWithView:self.window duration:0.5 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
                self.window.rootViewController = [[UINavigationController alloc] initWithRootViewController:mainVC];
            } completion:nil];
        }
    
        // otherwise just set the root view controller normally without animation
        else {
            self.window.rootViewController = [[UINavigationController alloc] initWithRootViewController:mainVC];
        }
    

    I´ve added an new ViewController to the SB and tried to Link it to UIViewController *mainVC but it hasn't worked.... To understand how it could works, i also add an blank Storyboard to your project and I´ve tried to build it up with an new ViewController and so on, but without any results.

    I would be very thankful for your help. With best regards and happy holidays

    Adam

    help wanted 
    opened by viscid09 13
  • Get the action buttons work in Swift

    Get the action buttons work in Swift

    would you mind to enhance the Swift example so it shows the full implementation of the capabilities. Newbies like me struggle with stuff such as the action button, which does not currently work. Thx!

    For example: how can I get tp my initial rootViewController created in my Storboard?

    let thirdPage: OnboardingContentViewController = OnboardingContentViewController(title: "second Page", body: "on second page...", image: UIImage(named: "yellow"), buttonText: "Let's Get Started") {

                //let mainStoryboard: UIStoryboard = UIStoryboard(name: "loginVC", bundle: nil)
                let loginView: VCLogin = VCLogin(nibName: "loginVC", bundle: nil)
                self.window?.makeKeyAndVisible()
                self.window?.rootViewController?.presentViewController(loginView, animated: true,   completion: nil)      
        }
    

    the above code does not work

    BTW: great work!

    enhancement 
    opened by DirkLXX 13
  • Swift: Sometimes, the view controller is not rendered

    Swift: Sometimes, the view controller is not rendered

    I used Onboard a couple of times without worries. Today I ran into a very weird bug : a view is not rendered (it is blank, but if I click were the button is supposed to be, it starts working again). If I allow swiping, it works. But not if I move to the next page programmatically.

    I can't put the code (too big?) but it's pretty straightforward : I execute moveToNextPage() on each button action.

    Thanks

    bug 
    opened by jerometonnelier 11
  • Landscape Mode?

    Landscape Mode?

    Any way to implement Landscape mode?

    Alternatively, how would I "wrap it in a subclassed UINavigationController that only supports portrait"

    question 
    opened by inadeem 10
  • Need an option to disable video background.

    Need an option to disable video background.

    In iOS 9.3 and iOS 10 you need to request user access when calling any Media APIs. Since many people use on boarding to explain and request this access this poses a problem. Simply loading the Onboard framework causes ios10 to prompt for access to the library. This means that the prompt appears before the on boarding screen designed to request this access.

    This ruins the on boarding experience unfortunately and will make this an unusable solution for many

    opened by opswhisperer 9
  • When I run Onboard, an error has occurred

    When I run Onboard, an error has occurred

    The environment:iOS7.1+iphone4s *** Assertion failure in -[_UIQueuingScrollView _replaceViews:updatingContents:adjustContentInsets:animated:], /SourceCache/UIKit/UIKit-2935.138/_UIQueuingScrollView.m:383 2015-06-08 18:00:08.856 Onboard[442:60b] *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Invalid parameter not satisfying: [views count] == 3' *** First throw call stack: (0x2d88cf83 0x3803dccf 0x2d88ce5d 0x2e23ad5b 0x3060ab99 0x3060da75 0x3060a1a9 0x300a9d59 0x2fd2762b 0x2fd22e3b 0x2fd22ccd 0x2fd226df 0x2fd224ef 0x2fd1c21d 0x2d858255 0x2d855bf9 0x2d855f3b 0x2d7c0ebf 0x2d7c0ca3 0x326c6663 0x3010d14d 0x996d1 0x3854aab7) libc++abi.dylib: terminating with uncaught exception of type NSException。

    Some helpful information online: http://stackoverflow.com/questions/14220289/removing-a-view-controller-from-uipageviewcontroller http://stackoverflow.com/questions/20004310/invalid-parameter-exception-thrown-by-uiqueuingscrollview

    bug 
    opened by lizhaodong 9
  • Video background vs photo

    Video background vs photo

    Hey,

    Great work with this library!

    Is it possible to use a video as background instead of a photo? Something like a video looping would be really cool with both mask + blur applied.

    enhancement 
    opened by Titanas0 9
  • Read.me process

    Read.me process

    Hey mamaral, Incredible work with the framework, but i can't understand exactly what i should do after importing the "Onboard" with cocoapods. Can you explain it a little bit more? So i create a class and i put the first line of code there screen shot 2016-02-11 at 23 00 40 after that i make the VC and i "connect" the .swift file with the VC. The conclusion is that i think that you could think and write the whole process more analytical etc. It will help a lot of people. It's an awesome framework!

    opened by agisilaos 7
  • Skip Button not centralized in page control

    Skip Button not centralized in page control

    Using Onboard I saw that skip button text was not vertically centralized in the page control as in the bellow image.

    img_0107

    after some digging I could see it is because PageController and SkipButton does not have the same height as you can see bellow.

    img_0106

    opened by felipeplets 0
Releases(v2.3.3)
Owner
Mike
Mike
Onboarding - Completed project for creating Onboarding screens in SwiftUI

Onboarding Completed project for creating Onboarding screens in SwiftUI.

Khawlah Bawazir 0 Jan 13, 2022
An iOS framework to easily create simple animated walkthrough, written in Swift.

Intro Overview An iOS framework to easily create simple animated walkthrough, written in Swift. Requirements iOS8 Installation with CocoaPods Intro is

Nurdaulet Bolatov 33 Oct 1, 2021
An animated popover that pops out a given frame, great for subtle UI tips and onboarding.

Animated popover that pops out of a frame. You can specify the direction of the popover and the arrow that points to its origin. Color, border radius

Andrea Mazzini 3k Jan 8, 2023
iOS library Paper Onboarding is a material design UI slider written on Swift.

iOS library Paper Onboarding is a material design UI slider written on Swift. We specialize in the designing and coding of custom UI

Ramotion 3.2k Jan 5, 2023
SwiftUI library for a walkthrough or onboarding flow with tap actions

Concentric Onboarding iOS library for a walkthrough or onboarding flow with tap actions written with SwiftUI We are a development agency building phen

Exyte 955 Jan 4, 2023
OnboardKit - Customizable user onboarding for your UIKit app in Swift

OnboardKit Customizable user onboarding for your UIKit app in Swift Requirements Swift 5.0 Xcode 10 iOS 11.0+ Installation Carthage github "NikolaKire

Nikola Kirev 470 Dec 23, 2022
DeliveryOnboardingSwiftUI - A Delivery Onboarding screen made with SwiftUI

DeliveryOnboardingSwiftUI Its a Onboarding screen made with SwiftUI

null 1 Feb 5, 2022
Configurable animated onboarding screen written programmatically in Swift for UIKit

Configurable animated onboarding screen written programmatically in Swift for UIKit – inspired by many Apple-designed user interfaces in iOS – with Insignia as an example.

Lukman “Luke” Aščić 370 Dec 27, 2022
Create walkthroughs and guided tours (coach marks) in a simple way, with Swift.

Add customizable coach marks into your iOS project. Available for both iPhone and iPad. ⚠️ Instructions 2.0.1 brings a couple of breaking changes, ple

Frédéric Maquin 4.9k Jan 3, 2023
Awesome tool for create tutorial walkthrough or coach tour

AwesomeSpotlightView is a nice and simple library for iOS written on Swift 5. It's highly customizable and easy-to-use tool. Works perfectly for tutor

Alexander Shoshiashvili 309 Jan 5, 2023
SuggestionsKit is a framework for iOS that was created in order to provide developers with the opportunity to educate users on various features of applications.

SuggestionsKit is a framework for iOS that was created in order to provide developers with the opportunity to educate users

Ilya 63 Nov 30, 2022
A simple keyframe-based animation framework for iOS, written in Swift. Perfect for scrolling app intros.

RazzleDazzle is a simple AutoLayout-friendly keyframe animation framework for iOS, written in Swift. Perfect for scrolling app intros. RazzleDazzle gr

IFTTT 3.4k Jan 1, 2023
A simple keyframe-based animation framework for UIKit. Perfect for scrolling app intros.

Jazz Hands is a simple keyframe-based animation framework for UIKit. Animations can be controlled via gestures, scroll views, KVO, or ReactiveCocoa. J

IFTTT 6.4k Dec 28, 2022
A super-charged version of MYIntroductionView for building custom app introductions and tutorials.

MYBlurIntroductionView #####NOTICE: As of February 4th, Apple has begun to ban new app submissions using the common blurring method (UIToolbar hack) f

Matthew York 1.5k Dec 23, 2022
Presentation helps you to make tutorials, release notes and animated pages.

Presentation helps you to make tutorials, release notes and animated pages.

HyperRedink 3k Jan 5, 2023
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

Boisney Philippe 832 Jan 8, 2023
Show overlay and info on app components

SwiftyOverlay App Intro / Instruction component to show data over app UI at run time! Easy to use, Animated and Customizable. Supported Components are

Saeid 80 Aug 29, 2022
BWWalkthrough is a simple library that helps you build custom walkthroughs for your iOS App

What is BWWalkthrough? BWWalkthrough (BWWT) is a class that helps you create Walkthroughs for your iOS Apps. It differs from other similar classes in

Yari @bitwaker 2.8k Jan 4, 2023
Fully customisable tooltip view in Swift for iOS.

Description EasyTipView is a fully customizable tooltip view written in Swift that can be used as a call to action or informative tip. Contents Featur

Teo 2.9k Dec 27, 2022