:octocat: PaperOnboarding is a material design UI slider. Swift UI library by @Ramotion - https://dev.ramotion.com/gthbr
Clone or download
Latest commit 90b1fcc Dec 10, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
PaperOnboardingDemo Added Swift 4.2 support Sep 13, 2018
Source Added Swift 4.2 support Sep 13, 2018
docs update docs Jun 10, 2016
.gitignore Updated to Swift 3 + Xcode 8 Sep 18, 2016
.swift-version Updated swift version in .swift-version file Sep 13, 2018
.travis.yml Updated Travis config Sep 13, 2018
LICENSE Initial commit Apr 25, 2016
README.md Update README.md Dec 10, 2018
header.png update header May 3, 2016
paper-onboarding.gif Add files via upload Apr 28, 2018
paper-onboarding.podspec update podspec Sep 25, 2018
preview.gif update gif May 17, 2016

README.md

header

paper-onboarding

Twitter CocoaPods CocoaPods Carthage compatible Travis codebeat badge Donate

Check this library on other platforms:

Looking for developers for your project?
This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites.


The iPhone mockup available here.

Requirements

  • iOS 10.0+
  • Xcode 9

Installation

Just add the Source folder to your project.

or use CocoaPods with Podfile:

pod 'paper-onboarding'

or Carthage users can simply add to their Cartfile:

github "Ramotion/paper-onboarding"

Usage

Storyboard

  1. Create a new UIView inheriting from PaperOnboarding

  2. Set dataSource in attribute inspector

or Code

override func viewDidLoad() {
  super.viewDidLoad()

  let onboarding = PaperOnboarding(itemsCount: 3)
  onboarding.dataSource = self
  onboarding.translatesAutoresizingMaskIntoConstraints = false
  view.addSubview(onboarding)

  // add constraints
  for attribute: NSLayoutAttribute in [.Left, .Right, .Top, .Bottom] {
    let constraint = NSLayoutConstraint(item: onboarding,
                                        attribute: attribute,
                                        relatedBy: .Equal,
                                        toItem: view,
                                        attribute: attribute,
                                        multiplier: 1,
                                        constant: 0)
    view.addConstraint(constraint)
  }
}

For adding content use dataSource methods:

  func onboardingItem(at index: Int) -> OnboardingItemInfo {

   return [
     OnboardingItemInfo(informationImage: IMAGE,
                                   title: "title",
                             description: "description",
                                pageIcon: IMAGE,
                                   color: UIColor.RANDOM,
                              titleColor: UIColor.RANDOM,
                        descriptionColor: UIColor.RANDOM,
                               titleFont: UIFont.FONT,
                         descriptionFont: UIFont.FONT),

     OnboardingItemInfo(informationImage: IMAGE,
                                    title: "title",
                              description: "description",
                                 pageIcon: IMAGE,
                                    color: UIColor.RANDOM,
                               titleColor: UIColor.RANDOM,
                         descriptionColor: UIColor.RANDOM,
                                titleFont: UIFont.FONT,
                          descriptionFont: UIFont.FONT),

    OnboardingItemInfo(informationImage: IMAGE,
                                 title: "title",
                           description: "description",
                              pageIcon: IMAGE,
                                 color: UIColor.RANDOM,
                            titleColor: UIColor.RANDOM,
                      descriptionColor: UIColor.RANDOM,
                             titleFont: UIFont.FONT,
                       descriptionFont: UIFont.FONT)
     ][index]
 }

 func onboardingItemsCount() -> Int {
    return 3
  }

configuring content item:

func onboardingConfigurationItem(item: OnboardingContentViewItem, index: Int) {

//    item.titleLabel?.backgroundColor = .redColor()
//    item.descriptionLabel?.backgroundColor = .redColor()
//    item.imageView = ...
  }

This library is a part of a selection of our best UI open-source projects.

License

paper-onboarding is released under the MIT license. See LICENSE for details.


Get the Showroom App for iOS to give it a try

Try this UI component and more like this in our iOS app. Contact us if interested.



Follow us for the latest updates