しめ鯖日記

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

MYBlurIntroductionViewを使ったチュートリアル作成

MYBlurIntroductionViewというウォークスルーを作るライブラリを試してみました。

f:id:llcc:20171106132253g:plain

github.com

インストールはCocoaPodsで行います。

target 'MyApp' do
  use_frameworks!

  pod 'MYBlurIntroductionView'
end

実際に使うにあたって、まずは適当なアイコンをプロジェクトに追加します。

f:id:llcc:20171106141433p:plain

アイコンは下サイトのものを利用しました。

icooon-mono.com

アイコンを追加したら実際に実装していきます。
おおまかな流れとしては「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ページだけのウォークスルーを作成できました。

f:id:llcc:20171106141614g:plain

各ラベルへのアクセスできるので、フォントや文字色も簡単に変更できます。

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

f:id:llcc:20171106142014p:plain

delegateで、下のイベントを取ることが可能です。

extension ViewController: MYIntroductionDelegate {
    func introduction(_ introductionView: MYBlurIntroductionView!, didFinishWith finishType: MYFinishType) {
    }
    
    func introduction(_ introductionView: MYBlurIntroductionView!, didChangeTo panel: MYIntroductionPanel!, with panelIndex: Int) {
    }
}