はじめに

最近Swiftばかりやっていて、Python脳からSwift脳になってしまいました。
Swiftのライブラリの使い方でよく悩むので、自分用の備忘録兼、今ライブラリを探していたり、使い方がわからなくていろんな記事を探している人に向けての記事です。

ライブラリ名【IBAnimatable】

2018年これだけは知っておきたいiOSライブラリ31選という記事でまとめておられ、いつも参考にさせていただいております。
その中で「欠かせないシリーズ」と銘打って一番に取り上げられているのが、このIBAnimatableです。

これは僕のようなデザインセンス皆無な素人でもパーツや動作のデザインをおしゃれにできるツールです。
今回はその中でも、インディケーターの使い方をまとめました。

githubのリンクはコチラ

インストール

方法は４つ
１、Swift package manager
２、CocoaPods
３、Carthage
４、Accio

CocoaPodsで慣れているので、CocoaPodsの紹介です。
他のは使ったことないので、調べてください。

MacにCocoaPodsがインストールされていることを前提で進めますので、まだ存在を知らなかった人はCocoaPodsからインストールしてください。
入っているかどうかわからない人はターミナルを起動して
pod --versionと入力してenterを押してしてください。
1.8.0 みたいな数字が出ればオッケーです。
なんか難しい言葉がいっぱい並んでいたら記入ミスかインストールされていません。

ではプロジェクト作成から順に進めます。
完全初心者向け(自分)なので、細かく噛み砕いて行きたいと思います。

1.プロジェクト作成

xcodeを起動して[create a new Xcode project]を選択します。
[single view app]を選択して適当な名前をつけます。（今回はIBATestとします）
基本デフォルトのままで大丈夫ですが、UserInterfaceはSwiftUIじゃなくてStorybordで進めてくださいね。私はSwiftUI未対応です。（勉強しなきゃ）

2.Podの初期化

プロジェクトを作れたら、一度xcodeは閉じてください。
ターミナルを起動して作ったプロジェクトにカレントディレクトリを移動します。（言い方あってる？）
例えばディスクトップにプロジェクトを作った場合
cd desktop/IBATestと打てば、移動できます。コマンド入力にも慣れて行きましょう。
ターミナルpod initと入力すると、Podfileというファイルが自動生成されます。

3.Podfileの編集

ターミナルvim Podfileと入力すると、Podfileを編集できるようにエディタが立ち上がります。
vimについては詳しい方が教えてくれるのでググりましょう。
開いた画面ではまだキーボード入力を受け付けてくれません。編集モードにする必要があります。
a または i を打つと編集できるようになりますが、a を押してください。
i を押すとInsert（上書きモード）になり、記入されている文字がどんどん消えてパニックになります。マジで焦るので気をつけてください。
↓ vimを開いたPodfileの中身の画面

endの前の# Pods for IBATestと書かれたコードの前に
pod 'IBAnimatable'と入力します。(ちゃんと''も入れてね)
入力が終わったらescキー、:、w、q、の順でキーボードを押していくと保存終了できます。
escで編集モード終了、:は呪文、w（write）q（quit）と上書きで終了みたいな感じですね。
これでPodfileの編集が終了です。

インストール

Podfileの準備が出来たら
ターミナルpod installと入力
画面が勝手に動いてインストールされます。
終了したら、ファイルが３つぐらい自動生成されてます。
ターミナルopen IBATest.xcworkspaceと入力してください。
xcodeが勝手に開いたと思いますが、今後のアプリ作成作業は全てxcworkspaceで行います。そういうものと思ってください。（←よくわかってない）

設置

ここからアプリを作って行きます。
そも、インディケーターはサイトとかみてる時に「今読み込みしてますよ」と知らせるためのものです。あのクルクル回るやつです。
なので、原則としてWebKitと合わせて使います。

Webkitの設置

真っ白なViewControllerにWebKitを乗せます。

Viewの設置

広げたらViewを上に乗せます。

Viewのクラスの設定

後から乗せたViewのClassをAnimatableActivityIndicatorViewにします。
写真の部分の通りにしてください（語彙力）

このクラスは、IBAnimatableをインストールしておくと勝手に出てきます。
Class欄に出てこない人はウィンドウを一度消して、ターミナルopen IBATest.xcworkspaceと入力してください。多分ですがxcodeprojを開けてるかと思います。

アニメーションの設定

インディケーターのアニメーションを設定します。
これにいろいろ種類があるので、IBAnimatableのインディケーターの説明をみていろいろ試してください。
今回はパックマン(Pacman)で設置してみます。

コードの記述

まずコード全文を乗せます。

ViewController.swift

import UIKit
import WebKit
import IBAnimatable

class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {

    //Outlet
    @IBOutlet weak var WebView: WKWebView!
    @IBOutlet weak var Indicator: AnimatableActivityIndicatorView!
    
    private let urlString: String = "https://qiita.com/"
    
    override func viewDidLoad() {
        super.viewDidLoad()

        WebView.navigationDelegate = self
        WebView.uiDelegate = self
        guard let url = URL(string: urlString) else { return }
        let req = URLRequest(url: url,
                             cachePolicy: .returnCacheDataElseLoad,
                             timeoutInterval: 100)
        self.WebView.load(req)
    }


    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        Indicator.startAnimating()
    }
    
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        Indicator.stopAnimating()
    }

細かくみていきましょう。

import UIKit
import WebKit
import IBAnimatable

まずimportですね。どのライブラリを使っているのかをここで示します。
つまり、他のライブラリを使いたい時もここを忘れずに記入することが大事です。

class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {

んでclass:VIewControllerの後に長々と書かれたクラス名。
僕の勝手な覚え方イメージとして、delegateは処理（関数）の住所みたいなものだと思っています。
たくさんのマンション（ライブラリ）に、たくさんの住人（関数）が住んでいて、そのマンションの住所がDelegate名なのかなという感じ。
違ってたらご指摘ください。

//Outlet
    @IBOutlet weak var WebView: WKWebView!
    @IBOutlet weak var Indicator: AnimatableActivityIndicatorView!

Outletは設置したパーツとコードをつなげるための配線です。
ViewControllerにパーツを置いても、コードと配線をつなげていないと意味がありません。
部屋に洗面器を置いても、水道を繋げなていなければ水がでないのと同じです。
XCodeのヴァージョンアップに伴い、storybordとコードを同時に見る方法が変わりましたが、storybord画面で「control+option+command+enter」の４つを押すと出てきます。
controlを押しながらstorybordからコードへドラッグ＆ドロップすると繋がります。
わからない時はググりましょう。

override func viewDidLoad() {
        super.viewDidLoad()

        WebView.navigationDelegate = self
        WebView.uiDelegate = self
        guard let url = URL(string: urlString) else { return }
        let req = URLRequest(url: url,
                             cachePolicy: .returnCacheDataElseLoad,
                             timeoutInterval: 100)
        self.WebView.load(req)
    }

WebView.navigationDelegate = self
僕はこれを記述していなくて、どれだけ頑張ってもインディケーターが回りませんでした。
WebKitの挙動を監視し、例えば読み込み始めたとか、読み込みが終わったとかを知らせる為に必要な大切な一文です。

あとはURLリクエストする文とか、リクエストが成功したら読み込み始める文です。

func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        Indicator.startAnimating()
    }
    
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        Indicator.stopAnimating()
    }

最後に読み込み始めと終わりにインディケータースタートとストップをしています。

テスト

ここまで出来てエラーが発生していなければシミュレーターで動作確認しましょう。
[command+r]で起動できます。
動作すると、パックマンがパクパク食べているアニメーションがみられるはずです。お疲れ様でした。

現在はViewの背景がデフォルトの白なので、アプリに馴染ませるならbackgroundColorをclearとかにするといいと思いますよ。

終わりに

ここまで見ていただいてありがとうございました。
IBAnimatableはアプリ作成に大きな味方になってくれると思います。
グラデーションを簡単に付けれたり、ボタンを簡単に丸くできたり、まだまだ真の力を開放できていないと思うので、新しい発見などがあったらまたアップします。
この記事が、少しでもあなたの役に立ちますように。