[Swift] BWWalkthrough を使って、簡単にウォークスルーを導入する

2018年9月6日ITSwift

ウォークスルーとは、はじめてアプリを使う人に向けての取扱説明書のようなものです

自作のアプリに導入しようと思い、BWWalkthrough を使ったら、非常に簡単に導入できました

参考:
https://github.com/ariok/BWWalkthrough

こんな感じになります

[検証環境]
・Xcode 9.3
・BWWalkthrough 2.1.2 ※CocoaPodsでインストールしました



storyboard を用意する

CustomClass に ViewController を設定。「show walk through」 とありますが、ボタンです

Main.storyboard
walkthrough-sample1.png

1~4枚目まですべて ViewController になります
1枚目の「skip」「prev」「next」はボタンです
2~4枚目の中央にあるものをイメージビューになります

Walkthrough.storyboard
walkthrough-sample2.png

1枚目の ViewController
Class : BWWalkthroughViewController
※自分は BWWalkthrough 「 Page 」 ViewController と間違えて設定してしまい、エラーになって、ハマりました

Module : BWWalkthrough
Storyboard ID : walk

walkthrough-sample3.png

2枚目以降の ViewController
Class : BWWalkthroughPageViewController
※こっちが BWWalkthrough 「 Page 」 ViewController です

Module : BWWalkthrough
Storyboard ID : walk1
※以降の ViewController は 「walk2」、「walk3」と設定します



ViewController に BWWalkthroughViewControllerDelegate を採用する

Github にある BWWalkthrough の Example をほぼコピペしてます
https://github.com/ariok/BWWalkthrough/blob/master/Example/ViewController.swift

「import BWWalkthrough」、「BWWalkthroughViewControllerDelegate」 を設定して、「showWalkthrough」 メソッド内に処理を書きます

import UIKit
import BWWalkthrough

class ViewController: UIViewController, BWWalkthroughViewControllerDelegate {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        let userDefaults = UserDefaults.standard
        
        if !userDefaults.bool(forKey: "walkthroughPresented") {
        
            showWalkthrough()
            
            userDefaults.set(true, forKey: "walkthroughPresented")
            userDefaults.synchronize()
        }
    }
    
    @IBAction func showWalkthrough(){
        
        // Walkthrough.storyboard のインスタンス作成
        let stb = UIStoryboard(name: "Walkthrough", bundle: nil)
        
        // 先程設定した Storyboard ID を元に Storyboard内の ViewController を呼び出す
        let walkthrough = stb.instantiateViewController(withIdentifier: "walk") as! BWWalkthroughViewController
        let page_one = stb.instantiateViewController(withIdentifier: "walk1")
        let page_two = stb.instantiateViewController(withIdentifier: "walk2")
        let page_three = stb.instantiateViewController(withIdentifier: "walk3")
        
        // Walkthrough.storyboard の 1枚目の ViewController に delegateを設定
        walkthrough.delegate = self
        
        // ウォークスルーに載せたいページを追加していく
        walkthrough.add(viewController:page_one)
        walkthrough.add(viewController:page_two)
        walkthrough.add(viewController:page_three)
        
        self.present(walkthrough, animated: true, completion: nil)
    }

    func walkthroughPageDidChange(_ pageNumber: Int) {
        print("Current Page \(pageNumber)")
    }
    
    func walkthroughCloseButtonPressed() {
        self.dismiss(animated: true, completion: nil)
    }
}

storyboard の部品 とプログラムを紐付ける

先程 ViewController に追加した「showWalkthrough」メソッドが見ているはずなので、矢印で引っ張って、「show walk through 」ボタンと紐付けます

Main.storyboard
walkthrough-sample5.png

ちゃんと紐付けば、このような表示に変わります。(Actionは「Touch Up Inside」にしました)
walkthrough-sample6.png

「closeButton」「pageControl」、、「nextPage」、、と書いた覚えのない outlet、action が並んでいますが、こちらに設定した class は 「BWWalkthroughViewController」 ですので、BWWalkthroughViewController 内で定義されています
ですので、用意してもらっているのをそのまま使うと、すごく楽に実装できます

参考:
https://github.com/ariok/BWWalkthrough/blob/master/BWWalkthrough/BWWalkthroughViewController.swift

それぞれ丸ポチから部品に矢印を伸ばして、1つずつ当てていきます

Walkthrough.storyboard
walkthrough-sample7.png

最終的にこんな感じになり、、、
walkthrough-sample8.png

起動すると、下記のようになるかと思います

以上になります

ひとこと

「自分たちが実装しようと思うようなものは誰かがもう作っているはずだから、まずはそれがないか探せ」と、先輩によく言われたました。今回のフレームワークなんかまさにそれですね。あと、全く話しが変わりますが、最近プリズナートレーニングという本を読んで、ジムに通うのを思い留まれて、ちょっと得した気分です。(ちゃいますね、得というわけではないんか)

スポンサーリンク

Posted by nobuhiro harada