しめ鯖日記

swift, iPhoneアプリ開発, ruby on rails等のTipsや入門記事書いてます

paper-onboardingでおしゃれウォークスルー

paper-onboardingというライブラリを使っておしゃれなウォークスルーを実現してみました。

github.com

paper-onboardingのインストール

target 'MyApp' do
  use_frameworks!

  pod 'paper-onboarding'
end

2017/10/16現在はSwift4に対応していないので、Swift3.2で動かしました。

f:id:llcc:20171016125935p:plain

paper-onboardingの使い方

まずは利用するアイコンと写真をセットします。
今回は下のサイトのフリーアイコンと写真を利用しました。

icooon-mono.com

www.pakutaso.com

f:id:llcc:20171016131202p:plain

実装は下の通りです。
PaperOnboardingのdataSourceでタイトルやアイコンなどを指定する事で画面をデザインします。

import UIKit
import paper_onboarding

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let onboarding = PaperOnboarding()
        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)
        }
    }
}

extension ViewController: PaperOnboardingDataSource {
    func onboardingItemsCount() -> Int {
        return 3
    }
    
    func onboardingItemAtIndex(_ index: Int) -> OnboardingItemInfo {
        return (
            imageName: UIImage(named: "image\(index+1)")!,
            title: "タイトル\(index)",
            description: "説明\(index)",
            iconName: UIImage(named: "icon\(index+1)")!,
            color: [UIColor.blue, UIColor.darkGray, UIColor.brown][index],
            titleColor: UIColor.white,
            descriptionColor: UIColor.lightGray,
            titleFont: UIFont.systemFont(ofSize: 20),
            descriptionFont: UIFont.systemFont(ofSize: 14)
        )
    }
}

実行の様子は下の通りです。

f:id:llcc:20171016131829g:plain

PaperOnboardingのdelegateを使うとページ移動のタイミングなどを取得することができます。

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let onboarding = PaperOnboarding()
        onboarding.dataSource = self
        onboarding.delegate = 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)
        }
    }
}

extension ViewController: PaperOnboardingDelegate {
    func onboardingWillTransitonToIndex(_ index: Int) {}
    func onboardingDidTransitonToIndex(_ index: Int) {}
    func onboardingConfigurationItem(_ item: OnboardingContentViewItem, index: Int) {}
    var enableTapsOnPageControl: Bool { return true }
}