Help us understand the problem. What is going on with this article?

OnboardでiOSアプリのウォークスルー画面を簡単に実装

More than 3 years have passed since last update.

アプリ起動後、ユーザーにスワイプしてもらいながら特徴や使い方を説明していく画面(ウォークスルー)を実装したいことがある。
そんなときにOnboardというライブラリが便利だった。

mamaral/Onboard

※ウォークスルーの説明に関しては以下の記事などが参考になる

試した環境

  • Xcode 7.2
  • Onboard 2.1.7

CocoaPodsで普通にインストール。

Podfile
platform :ios, '9.0'
use_frameworks!

pod "Onboard"

実装

OnboardingViewControllerというベースとなるViewControllerに、各ページのコンテンツ(OnboardingContentViewController)をプロパティとしてセットする。

AppDelegate.swiftに直接書いていく。

AppDelegate.swift
import UIKit
import Onboard

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?


    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {

        if true {
            let content1 = OnboardingContentViewController(
                title: "Title1",
                body: "Body1",
                image: nil,
                buttonText: "",
                action: nil
            )
            let content2 = OnboardingContentViewController(
                title: "Title2",
                body: "Body2",
                image: nil,
                buttonText: "",
                action: nil
            )
            let content3 = OnboardingContentViewController(
                title: "Title3",
                body: "Body3",
                image: nil,
                buttonText: "ログイン",
                action: {
                    let alert = UIAlertController(
                        title: "ログイン",
                        message: "ログインしました",
                        preferredStyle: .Alert
                    )
                    let ok = UIAlertAction(
                        title: "OK",
                        style: .Default,
                        handler: nil
                    )
                    alert.addAction(ok)
                    application.keyWindow?.rootViewController?.presentViewController(alert, 
                        animated: true, 
                        completion: nil
                    )
                }
            )

            let bgImageURL = NSURL(string: "https://www.pakutaso.com/shared/img/thumb/KAZ_hugyftdrftyg_TP_V.jpg")!
            let bgImage = UIImage(data: NSData(contentsOfURL: bgImageURL)!)
            let vc = OnboardingViewController(
                backgroundImage: bgImage,
                contents: [content1, content2, content3]
            )
            vc.allowSkipping = true
            vc.skipHandler = { _ in
                print("skip")
            }

            window?.rootViewController = vc

            return true
        }

        return true
    }

}

先述したとおり、OnboardingContentViewControllerのインスタンスが、ウォークスルーの各ページのコンテンツを示す。

init時に指定するのは、

  • ページのタイトル
  • ページの本文
  • 画像
  • ボタン
  • ボタンをタップした時のアクション

の5つ。3つめのコンテンツのみ、ボタンとボタンタップ時のアクションを追加してみた。

特に自分で追加しない限りコンテンツの種類は上記の5種類のみだが、コンテンツ間のマージンやフォントサイズは調整ができる。README参照。


OnboardingViewControllerinit時に、上記の3つのコンテンツをセットしてインスタンス(vcという変数の部分)を生成する。ウォークスルー全体を通しての背景画像も一緒に設定する。

OnboardingViewControllerもプロパティを持っている。
上記のサンプルコードでは、allowSkippingtrueにすることで、「Skip」ボタンを表示。
skipButtonという名前でUIButtonが取得できるので、名前などはもちろん変更可能)
また、skipHandlerのブロックで、上記のボタンをタップした時のアクションを記述できる。

他にもいくつかプロパティはあるので、ヘッダファイルなどを参照。
https://github.com/mamaral/Onboard/blob/master/Source/OnboardingViewController.h

完成

というわけで簡単にウォークスルーっぽいのが実装できた

walkthrough-sample.gif

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away