paper-onboardingというライブラリを使っておしゃれなウォークスルーを実現してみました。
paper-onboardingのインストール
target 'MyApp' do use_frameworks! pod 'paper-onboarding' end
2017/10/16現在はSwift4に対応していないので、Swift3.2で動かしました。
paper-onboardingの使い方
まずは利用するアイコンと写真をセットします。
今回は下のサイトのフリーアイコンと写真を利用しました。
実装は下の通りです。
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) ) } }
実行の様子は下の通りです。
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 } }