MYBlurIntroductionViewというウォークスルーを作るライブラリを試してみました。
インストールはCocoaPodsで行います。
target 'MyApp' do use_frameworks! pod 'MYBlurIntroductionView' end
実際に使うにあたって、まずは適当なアイコンをプロジェクトに追加します。
アイコンは下サイトのものを利用しました。
アイコンを追加したら実際に実装していきます。
おおまかな流れとしては「MYIntroductionPanel(ウォークスルーの各ページに相当)を複数個作成、それを元にMYBlurIntroductionViewを作って画面にセットする」という流れです。
import UIKit import MYBlurIntroductionView class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() let headerView = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: 100)) headerView.backgroundColor = UIColor.blue let panel1 = MYIntroductionPanel(frame: view.bounds, title: "Welcome to MYBlurIntroductionView", description: "MYBlurIntroductionView is a powerful platform for building app introductions and tutorials. Built on the MYIntroductionView core, this revamped version has been reengineered for beauty and greater developer control.", image: #imageLiteral(resourceName: "book"), header: headerView) panel1?.backgroundColor = UIColor.darkGray let panel2 = MYIntroductionPanel(frame: view.bounds, title: "Automated Stock Panels", description: "Need a quick-and-dirty solution for your app introduction? MYBlurIntroductionView comes with customizable stock panels that make writing an introduction a walk in the park. Stock panels come with optional overlay on background images. A full panel is just one method away!", image: #imageLiteral(resourceName: "pen")) panel2?.backgroundColor = UIColor.lightGray let introductionView = MYBlurIntroductionView(frame: view.bounds) introductionView.buildIntroduction(withPanels: [panel1, panel2]) view.addSubview(introductionView) introductionView.backgroundImageView.image = #imageLiteral(resourceName: "pen") } }
アプリを起動すると、下のように2ページだけのウォークスルーを作成できました。
各ラベルへのアクセスできるので、フォントや文字色も簡単に変更できます。
let panel1 = MYIntroductionPanel(frame: view.bounds, title: "Welcome to MYBlurIntroductionView", description: "MYBlurIntroductionView is a powerful platform for building app introductions and tutorials. Built on the MYIntroductionView core, this revamped version has been reengineered for beauty and greater developer control.", image: #imageLiteral(resourceName: "book"), header: headerView) panel1?.panelTitleLabel.textColor = UIColor.darkGray panel1?.panelDescriptionLabel.textColor = UIColor.lightGray
delegateで、下のイベントを取ることが可能です。
extension ViewController: MYIntroductionDelegate { func introduction(_ introductionView: MYBlurIntroductionView!, didFinishWith finishType: MYFinishType) { } func introduction(_ introductionView: MYBlurIntroductionView!, didChangeTo panel: MYIntroductionPanel!, with panelIndex: Int) { } }