【Swift】初回起動時のチュートリアルを表示する方法

今回は初回起動時のチュートリアルを表示する方法をこの記事で説明します。

この記事のポイント・viewDidLayoutSubviews()を使用

初回起動時のチュートリアルを表示する方法

チュートリアル画面の作成

Main.storryboardにチュートリアル画面を作成します。

WelcomeViewControllerの作成

チュートリアル画面で使用するWelcomeViewControllerを作成します。

class WelcomeViewController: UIViewController {
    @IBOutlet var holderView: UIView! // ←　チュートリアル画面のViewと紐付けします。

普段はviewDidLoadに処理を追加しますがチュートリアル画面の場合は「viewDidLayoutSubviews()」に処理を追加します。

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    configure()
}

configure()の処理は以下のようになります。

private func configure() {
    // setup scrollview
    self.overrideUserInterfaceStyle = .light
        
    scrollView.frame = holderView.bounds
    holderView.addSubview(scrollView)
        
    let titles = ["ページ①", "ページ②", "ページ③", "ページ④", "ページ⑤"]
        
    for x in 0..<5 {
        let pageView = UIView(frame: CGRect(x: CGFloat(x) * holderView.frame.size.width, y: 0, width: holderView.frame.size.width, height: holderView.frame.size.height))
         
        scrollView.addSubview(pageView)
        let label = UILabel(frame: CGRect(x: 10, y: 10, width: pageView.frame.size.width-20, height: 80))
        let imageView = UIImageView(frame: CGRect(x: 10, y: 10+80+10, width: pageView.frame.size.width-20, height: pageView.frame.size.height-60-130-15))
        let button = UIButton(frame: CGRect(x: 10, y: pageView.frame.size.height-60, width: pageView.frame.size.width-20, height: 50))
            
        label.textAlignment = .center
        label.font = UIFont(name: "Helvetica-Bold", size: 25)
        pageView.addSubview(label)
        label.text = titles[x]
            
        imageView.contentMode = .scaleAspectFit
        imageView.image = UIImage(named: "welcome_\(x)") // ← 表示する画像をセット
        pageView.addSubview(imageView)
            
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = .black
        button.setTitle("next", for: .normal)
            
        if x == 4 {
            button.setTitle("start", for: .normal)
        }
        button.addTarget(self, action: #selector(didTapButton(_:)), for: .touchUpInside)
        button.tag = x+1
        pageView.addSubview(button)
    }
        
    scrollView.contentSize = CGSize(width: holderView.frame.size.width * 17, height: 0)
    scrollView.isPagingEnabled = true
        
}

didTapButton()の処理は以下のようになります。

@objc func didTapButton(_ button: UIButton) {
guard button.tag < 5 else {
	// dismiss
	Core.shared.setIsNotNewUser()
	dismiss(animated: true, completion: nil)
		
	// Main
	let storyboard: UIStoryboard = self.storyboard!
	let nextView = storyboard.instantiateViewController(withIdentifier: "Main") // ← 遷移先のStoryboard IDを設定
	nextView.modalPresentationStyle = .fullScreen
	present(nextView, animated: true, completion: nil)
		
	return
}
	
// scroll to next page
scrollView.setContentOffset(CGPoint(x: holderView.frame.size.width * CGFloat(button.tag), y: 0), animated: true)
	
}

これで初回起動時のチュートリアルを表示出来るようになります。