Need help with Surfboard?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
MosheBerman

Description

Surfboard is a delightful onboarding framework for iOS.

436 Stars 57 Forks MIT License 99 Commits 7 Opened issues

Services available

Need anything else?

Surfboard

Surfboard is a delightful onboarding library for iOS.

Screenshots

Intro Panels

Dependencies

Surfboard was developed with Xcode 5 and the iOS 7 SDK. It uses autolayout and

UICollectionViewController
, so although it hasn't been tested on iOS 6, you may entertain yourself by trying to run Surfboard on it.

Installing Surfboard

Add the contents of the SRFSurfboard project to your directory, or use CocoaPods:

pod 'Surfboard'

Import

SRFSurfboard.h
to get access to all of the great features of Surfboard.

Getting Started

When we talk about Surfboards, we talk about a set of panels. Each panel is a screenful of information, including some text, an image or screenshot, and optionally, a button.

Take a look at the Sample Data directory for an idea of what a sample JSON configuration looks like.

Showing a Surfboard

You can show a surfboard by using a segue, or by creating a an instance of

SRFSurfboardViewController
and passing it an array of some panels. You can also pass a path to a JSON file, which we'll discuss in just a second.

The two initializers for a surfboard:

//  One surfboard, the initWithPanels: way.

SRFSurfboardViewController *surfboard = [[SRFSurfboardViewController alloc] initWithPanels:anArrayOfPanels];

// Another surfboard, the initWithPathToCofiguration way.

SRFSurfboardViewController *surfboard = [[SRFSurfboardViewController alloc] initWithPathToConfiguration:aPathToJSONFile];

Creating Panels

Panels can be created programatically, or using a JSON file. The JSON format is simple. There are four keys:

  1. text The text that appears at the top of the panel.
  2. image An image to show in the panel. The image is tinted to the
    tintColor
    of the surfboard.
  3. screen A screenshot to show in the panel. The screenshot is not tinted.
  4. button The title of a button to show at the bottom of the panel. This is optional.

Note that either the contents of the "image" or "screen" will be used, but not both. Supplying both results in undefined behavior.

Here's a sample panel:

{
    "text" : "Welcome to Surfboard.",
    "image" : "swipe"
}

You'd want to add an image to your bundle or asset catelog named "swipe.png" and Surfboard would display it.

License

SRFSurfboard is released under the MIT license. See LICENSE for more.

More Open Source

If you like SRFSurfboard, you may like some of my other projects on GitHub.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.