[Swift]ライブラリEAIntroViewの使い方

先日、初めてアプリを公開したんですけど、妻に使ってもらったら第一声が「使い方わからん」でした。
「俺が使いたくて作っただけのアプリやからいいねん（汗）」的な言い訳をしつつ心の中では「確かにな〜」って思ってました。

んで初回起動時によくあるチュートリアル的なやつを実装しようと調べたら「ウォークスルー」って言うみたいです！
今回はEAIntroViewと言うライブラリを使って下記のようなウォークスルーを実装してみます！

基本的な使い方

EAIntroViewをプロジェクトにインストールしたらViewController.swiftに下記をコピペすればとりあえず動きますので試しにコピペしてビルドしてみてください！

import UIKit
import EAIntroView

class ViewController: UIViewController, EAIntroDelegate {
override func viewDidLoad() {
super.viewDidLoad()

let page1 = EAIntroPage()
page1.title = "インストールありがとうございます！！"
page1.desc = "まゆげじおの備忘録をご覧頂きありがとうございます！"

let page2 = EAIntroPage()
page2.title = "2ページ目"
page2.desc = "こんな感じでページを増やしていきます"

let page3 = EAIntroPage()
page3.title = "3ページ目"
page3.desc = "スキップボタンで飛ばす事も可能です。"

//ここでページを追加
let introView = EAIntroView(frame: self.view.bounds, andPages: [page1, page2, page3])
//スキップボタン
introView?.skipButton.setTitle("スキップ", for: UIControl.State.normal)

introView?.delegate = self
introView?.show(in: self.view, animateDuration: 1.0)
}
}

こんな感じになってますか？
これから色々とカスタマイズしていきましょう！

カスタマイズしよう

テキストの色や背景色の変更などの基本的な設定は下記のコードを参考にすればだいたいカスタマイズできると思います！
色々試してみてください！

let page1 = EAIntroPage()
//背景色変更
page1.bgColor = UIColor.gray
//タイトルのテキスト
page1.title = "インストールありがとうございます！！"
//タイトルの色変更
page1.titleColor = UIColor.orange
//タイトルのフォントの設定
page1.titleFont = UIFont(name: "Helvetica-Bold", size: 32)

//ディスクリプションのテキスト
page1.desc = "まゆげじおの備忘録をご覧頂きありがとうございます！"
//ディスクリプションの色変更
page1.descColor = UIColor.white
//ディスクリプションのフォントの設定
page1.descFont = UIFont(name: "HiraMaruProN-W4", size: 16)
//テキストの位置を変更
page1.descPositionY = self.view.bounds.size.height/2

//ここでページを追加
let introView = EAIntroView(frame: self.view.bounds, andPages: [page1])
//スキップボタンのテキスト
introView?.skipButton.setTitle("スキップ", for: UIControl.State.normal)
//スキップボタンの色変更
introView?.skipButton.setTitleColor(UIColor.systemPink, for: UIControl.State.normal)

introView?.delegate = self
//アニメーション設定
introView?.show(in: self.view, animateDuration: 0.5)

ちなみにこんな感じになります！

背景に画像を使おう

次に背景に画像を使う方法を紹介します！
実際使うのはこっちの方が多いのかなって思います！
と言っても簡単です！

まず画像を用意します！
例えばiPhone11ProMax用の画像（1242×2688）を用意してXcodeのAssets.xcassetsの中に入れます。
ちなみに画像はこちらを使用しました！参考までに！

コードは下記になります！

let page1 = EAIntroPage()
//画像の設定
page1.bgImage = UIImage(named: "iphone_1")
//ここでページを追加
let introView = EAIntroView(frame: self.view.bounds, andPages: [page1])
//スキップボタンのテキスト
introView?.skipButton.setTitle("スキップ", for: UIControl.State.normal)
//スキップボタンの色変更
introView?.skipButton.setTitleColor(UIColor.white, for: UIControl.State.normal)

introView?.delegate = self
//アニメーション設定
introView?.show(in: self.view, animateDuration: 0.5)

ではシュミレーターをiPhone11ProMaxに設定してビルドしてみましょう！

画像を作るのは手間ですが、思い通りのデザインでいけますね！
ただ、iphoneによっては画面サイズが違うのでうまく配置されない可能性が高いです。
今回使用した画像をiphoneSE(2nd)でビルドすると下記画像のようにスキップボタンが見にくくなります。
サイズごとに画像を作成するのが正しい方法かもしれませんがちょっと違う方法を試してみたので書いておきたいと思います。

EAIntroViewライブラリのファイルを編集してしまいます！
下記画像のファイル、EAIntroView.mファイルの67行目を修正します。

下記のようにAspectFillをAspectFitに変えてもう一度ビルドしてみます！

self.bgViewContentMode = UIViewContentModeScaleAspectFill;
//↓に変更
self.bgViewContentMode = UIViewContentModeScaleAspectFit;

ちょっと微秒ですが、ドットも見えたのでさっきよりはましかと思います(^^;
あとは両サイドが黒になってるので背景色を画像と同じ色にすればOKかと思います！

画面幅で条件分岐させて違う画像を表示させてみる

番外編として、iphoneとipadの時で違う画像を表示させてみたいと思います！
画面幅を取得して、767pxより大きかったらipadだと判断しipad用の画像を表示させて、767px以下だったらiphone用の画像を表示させます。
ipad用の画像はこちらです！コードは下記です。

let boundSize: CGSize = UIScreen.main.bounds.size
let width = boundSize.width
if width > 767 {
    page1.bgImage = UIImage(named: "ipad_1")
} else {
    page1.bgImage = UIImage(named: "iphone_1")
}

ipad、iphoneそれぞれでビルドさせると下記画像のように画面サイズによって画像を切り替える事ができました！

まとめ

今回はよくあるウォークスルーを実装してみました！
上級者の人にとってはライブラリを使うまでもない実装かもしれませんが、僕みたいな初心者にとっては短時間で実装できるライブラリはありがたいですね！
また他のライブラリの記事も書きたいと思います！