GithubHelp home page GithubHelp logo

trendingtechnology / onboardkit Goto Github PK

View Code? Open in Web Editor NEW

This project forked from nikolakirev/onboardkit

0.0 1.0 0.0 1.42 MB

Customisable user onboarding for your iOS app

License: MIT License

Objective-C 1.87% Swift 95.48% Ruby 2.65%

onboardkit's Introduction

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.

onboardkit's People

Contributors

avgx avatar flyingbear66 avatar freetonik avatar mcleinman avatar nikolakirev avatar pettazz avatar tosbaha avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.