OnboardKit - Customizable user onboarding for your UIKit app in Swift

Overview

OnboardKit

Swift 5.0 Version License Carthage compatible Twitter

OnboardKit

Customizable user onboarding for your UIKit app in Swift

Requirements

  • Swift 5.0
  • Xcode 10
  • iOS 11.0+

Installation

Carthage

github "NikolaKirev/OnboardKit"

CocoaPods

use_frameworks!

# Latest release in CocoaPods
pod 'OnboardKit'

# Get the latest on master
pod 'OnboardKit', :git => 'https://github.com/NikolaKirev/OnboardKit.git', :branch => 'master'

Don't forget to import OnboardKit in the file you intend to use it.

Usage

  1. Create and populate a bunch of OnboardPage instances
let page = OnboardPage(title: "Welcome to OnboardKit",
                       imageName: "Onboarding1",
                       description: "OnboardKit helps you add onboarding to your iOS app")
  1. Create an OnboardViewController
let onboardingViewController = OnboardViewController(pageItems: [pageOne, ...])
  1. Present the view controller
onboardingViewController.presentFrom(self, animated: true)

(use this convenience method to make sure you present it modally)

Customization

Custom examples

Customizing Fonts and Colors

You can customize the look of your onboarding by changing the default colors and fonts.

  1. Initialize an AppearanceConfiguration instance with the desired custom style properties
let appearance = AppearanceConfiguration(tintColor: .orange,
                                         titleColor: .red,
                                         textColor: .white,
                                         backgroundColor: .black,
                                         imageContentMode: .scaleAspectFit,
                                         titleFont: UIFont.boldSystemFont(ofSize: 32.0),
                                         textFont: UIFont.boldSystemFont(ofSize: 17.0))
  1. Pass the AppearanceConfiguration instance as a parameter when initialising an OnboardViewController
let onboardingVC = OnboardViewController(pageItems: onboardingPages,
                                         appearanceConfiguration: appearance)
List of customizable properties:
  • tintColor - used for tinting the advance and action buttons
  • titleColor - used to set title color (textColor is used if not specified)
  • textColor - used to set description text color
  • backgroundColor - used to set view background color
  • imageContentMode - used to set the content mode of page imageViews
  • titleFont - used to set the title font (used for the action button font as well)
  • textFont - used to set the description text font (used for the advance button font as well)
  • advanceButtonStyling - a block used to customize the advance button
  • actionButtonStyling - a block used to customize the action button

Customizing Buttons

To customize the style of the advance and action buttons on each page of the onboarding flow, you can use a ButtonStyling closure.

  1. Create the closure
let advanceButtonStyling: OnboardViewController.ButtonStyling = { button in
    button.setTitleColor(UIColor.lightGray, for: .normal)
    button.titleLabel?.font = UIFont.systemFont(ofSize: 16.0, weight: .semibold)
}
  1. Pass the closure in the AppearanceConfiguration initializer
let appearance = OnboardViewController.AppearanceConfiguration(tintColor: .orange,
                                                               advanceButtonStyling: advanceButtonStyling)

Author

Nikola Kirev

License

OnboardKit is available under the MIT license. See the LICENSE file for more info.

Comments
  • Documentation is terrible

    Documentation is terrible

    Please improve the documentation. I had to look into your source code to figure out which class has the function AppearanceConfiguration. That should be in the docs. Also, your cocoa pods version is behind. I had to use the Github version.

    opened by oluwatimio 5
  • Bug fix for hi-res images using in imageView

    Bug fix for hi-res images using in imageView

    imageView.contentMode should be changed to .scaleAspectFit in order to be able to use hi-res images or to customize the imageView height by adjusting multiplier value in imageView.heightAnchor.constraint(equalTo: pageStackView.heightAnchor, multiplier: 0.5)

    If we have imageView.contentMode = .center and use hi-res image, the stack renders completely broken.

    onboardkit before bug fix 500 onboardkit after bug fix 500

    opened by afil310 3
  • Delegate methods are not being called

    Delegate methods are not being called

    Even though I've set the view controller as the delegate, the delegate methods don't get called.

    ` private func showAlert(_ completion: @escaping (_ success: Bool, _ error: Error?) -> Void) { let controller = SPPermissions.native([.notification])

        // Set Delegate if need.
        controller.delegate = self
    
        // Always use this method for request.
        // You can pass any controller, this request becouse need implement base protocol.
        controller.present(on: self)
    }
    
    // Events
    func didAllow(permission: SPPermission) {
        print("Allowed")
    }
    
    func didDenied(permission: SPPermission) {
        print("Denied")
    }
    
    @objc func deniedData(for permission: SPPermission) -> SPPermissionDeniedAlertData? {
        print("but it got denied")
        if permission == .notification {
            let data = SPPermissionDeniedAlertData()
            data.alertOpenSettingsDeniedPermissionTitle = "Permission denied"
            data.alertOpenSettingsDeniedPermissionDescription = "Please, go to Settings and allow permission."
            data.alertOpenSettingsDeniedPermissionButtonTitle = "Settings"
            data.alertOpenSettingsDeniedPermissionCancelTitle = "Cancel"
            return data
        } else {
            // If returned nil, alert will not show.
            return nil
        }
    }`
    
    opened by tewodroswondimu 2
  • Action Button Styling

    Action Button Styling

    Action Button Styling appears to have been removed as ActionButtonStyling isn't a member of OnboardKit - inspecting the pod, it doesn't appear you can customize action buttons any longer...

    opened by froggomad 1
  • Expose imageview contentmode

    Expose imageview contentmode

    By popular demand exposed contentMode for the imageView of the OnboardPage. It can be set in the AppearanceConfiguration.

    Updated README with a list of all customizable properties.

    opened by NikolaKirev 1
  • add support to disable swipe

    add support to disable swipe

    This enables a behavior configuration object that disables the swipe scrolling. That way a user cannot go backwards.

    If you have a prompt for enabling location services, for example, after they enable it, going back to that page and tapping the action again may cause indeterminate behavior.

    opened by sean7512 0
  • Button Styling

    Button Styling

    • Add ability to style buttons by exposing them in a closure. This allows for very flexible and extensive styling
    • Update README with more documentation on styling
    • Update podspec
    opened by NikolaKirev 0
  • Feature - Title Color

    Feature - Title Color

    • You can now set a separate title color to the text color specified
    • Improvements to the README file
    • Added a more customized example in the example project
    opened by NikolaKirev 0
  • Fix project/example project structure

    Fix project/example project structure

    Currently the code for the example project gets included in the framework build. This seems to be the result of me not setting up a separate project file for the example project.

    opened by NikolaKirev 0
  • How to advance to the next page

    How to advance to the next page

    Is there a way to advance the page forward. For example, if the user is asked to enable notification, and once they do proceed to the next page with the user having to press next.

    opened by tewodroswondimu 0
  • Failed to determine navigation direction for scroll

    Failed to determine navigation direction for scroll

    @NikolaKirev thanks a lot for the amazing work!

    I just experienced the following crash:

    Fatal Exception: NSInternalInconsistencyException Failed to determine navigation direction for scroll closure #1 in OnboardViewController.advanceToPageWithIndex(_:)

    The info I have about it is:

    • the view where OnboardKit is shown was loaded
    • the app entered the applicationWillResignActive state
    • the app entered the applicationDidBecomeActive state.
    • then, the crash happened.

    Are you able to reproduce it?

    opened by hellofabrizio 0
  • Use of unresolved identifier AppearanceConfiguration

    Use of unresolved identifier AppearanceConfiguration

    Hi!

    I just copy code from github to my project and get this error: "Use of unresolved identifier AppearanceConfiguration". How can i fix it? (I'm trying to clean build and reinstall pod, bot nothing...

    Full text: let appearance = AppearanceConfiguration(tintColor: .orange, titleColor: .red, textColor: .white, backgroundColor: .black, imageContentMode: .scaleAspectFit, titleFont: UIFont.boldSystemFont(ofSize: 32.0), textFont: UIFont.boldSystemFont(ofSize: 17.0))

        let page = OnboardPage(title: "Welcome to OnboardKit",
                               imageName: "CheckmarkTrue",
                               description: "OnboardKit helps you add onboarding to your iOS app")
        
        let onboardingViewController = OnboardViewController(pageItems: [page, page], appearanceConfiguration: appearance)
        
        onboardingViewController.presentFrom(self, animated: true)
    

    Снимок экрана 2020-03-12 в 13 25 28

    opened by fury21 2
  • Individual appearance configurations per page

    Individual appearance configurations per page

    Nikola, thank you very much for your library!

    Currently, I only see the option to pass a global appearance configuration to an onboarding controller. However, I would like to use individual appearances per page similar to this example.

    Is there any way to do so?

    opened by Balauue 2
Releases(v1.5.0)
Owner
Nikola Kirev
I build thing with code and colors.
Nikola Kirev
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
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
A swifty iOS framework that allows developers to create beautiful onboarding experiences.

SwiftyOnboard is being sponsored by the following tool; please help to support us by taking a look and signing up to a free trial SwiftyOnboard A simp

Juan Pablo Fernandez 1.2k Jan 2, 2023
An iOS framework to easily create a beautiful and engaging onboarding experience with only a few lines of code.

Onboard Click Here For More Examples Important Onboard is no longer under active development, and as such if you create any issues or submit pull requ

Mike 6.5k Dec 17, 2022
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
DeliveryOnboardingSwiftUI - A Delivery Onboarding screen made with SwiftUI

DeliveryOnboardingSwiftUI Its a Onboarding screen made with SwiftUI

null 1 Feb 5, 2022
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
Highly customizable drop-in solution for introduction views.

EAIntroView - simple iOS Introductions This is highly customizable drop-in solution for introduction views. Some features (remember, most features are

Evgeny Aleksandrov 3.8k Dec 17, 2022
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
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
Showcase your awesome new app features 📱

WhatsNewKit enables you to easily showcase your awesome new app features. It's designed from the ground up to be fully customized to your needs. Featu

Sven Tiigi 2.8k Jan 3, 2023
SwiftyWalkthrough is a library for creating great walkthrough experiences in your apps, written in Swift.

SwiftyWalkthrough is a library for creating great walkthrough experiences in your apps, written in Swift. You can use the library to allow users to navigate and explore your app, step by step, in a predefined way controlled by you.

Rui Costa 370 Nov 24, 2022
✨ An elegant way to guide your beloved users in iOS apps - Material Showcase.

Material Showcase for iOS An elegant and beautiful tap showcase view for iOS apps based on Material Design Guidelines. Requirement iOS 10.0+ Swift 4.2

Aromajoin 349 Dec 5, 2022
ColorMix-by-IUKit - colorMix app by Intro to app development in Swift

colorMix-by-IUKit colorMix app by "Intro to app development in Swift" In this ap

null 0 Feb 11, 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 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
A nice tutorial like the one introduced in the Path 3.X App

ICETutorial Welcome to ICETutorial. This small project is an implementation of the newly tutorial introduced by the Path 3.X app. Very simple and effi

Icepat 798 Jun 30, 2022
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