Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
36
Help us understand the problem. What is going on with this article?
@ysk_1031

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

More than 5 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

36
Help us understand the problem. What is going on with this article?
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
ysk_1031
Software Engineer at Atrae, Inc.
atrae
People Techカンパニーとして、転職サイトGreen, ビジネスマッチングアプリyenta, 組織改善プラットフォームwevoxなどのサービスを運営。全ての社員が誇りを持てる組織と事業の創造にこだわり、関わる人々がファンとして応援したくなるような魅力ある会社であり続けることを目指しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
36
Help us understand the problem. What is going on with this article?