概要

アプリを作っていると何かしらの処理の完了をユーザーに待機させる目的でインジケータを表示させたいと思うことはよくあることだと思います。
こういうやつですね。

このインジケータを表示させる方法として、PKHUDのようなライブラリを活用する方法や、SwiftUIであればProgressViewを活用する方法があると思います。
しかし、せっかくならインジケータを自作して、アプリに個性を出したいと思わないでしょうか？
私は思いました。

今回はそのような思いから、SF Symbolsを活用してオリジナルのインジケータを作成する方法を紹介したいと思います。
完成イメージは以下です。

手順

1. 任意のシンボルをカスタムシンボルとして書き出す

SF Symbolsを開き、任意のシンボルを選択し、画像のように「1個のカスタムシンボルとして複製」を選択。

2. レイヤーの削除(任意)

サイドメニュー下部の「カスタムシンボル」から複製したカスタムシンボルを選択。
すると右側が画像のようになっていると思います。

ここで注目したいのが、レイヤーとその配下にあるサブパスです。
このレイヤーとサブパスにより、シンボルの一つ一つのパーツを細かく操作出来るようになっています。
今回、このレイヤーを意識することは特にないので、(トラックパッドでの説明になりますが、二本指でクリックし)下のレイヤーを削除し、レイヤーを一つだけにします。
ここまでの説明でレイヤーは以下のような状態になっているかと思います。

チェックマークがオンの状態で、パーツが表示される状態となります。
ここから、パーツごとに画像を書き出し、素材を準備していきます。

3. パーツの書き出し

まずは時計で言うところの12時の場所にあるパーツのみを表示させます。
太陽マークで言うと、サブパス1のチェックを外し、サブパス2にチェックマークを入れた状態です。

パーツ画像は複数作成するので、ここでカスタムシンボルの名前を変更します。
今回はloading.image.1とします。
次にカスタムシンボルを選択し、上のファイルから「シンボルを書き出す」を選択。

書き出しが成功すると、.svgファイルが作成されます。
同様の手順を繰り返し、素材を作成します。
今回私はローディングに違和感がないように合計で9個のsvgを作成しました。

4. プロジェクトにインポート

素材の作成完了後、プロジェクトにインポートします。
プロジェクトのAssetsを選択後、+ボタンより「import」を選択。

その後、作成したsvgファイルを選択し、プロジェクトに全てインポートしてください。
これで、シンボルのインポートが完了です。

5. ローディングアニメーションを実装

最後にローディングアニメーションを実装して、完成です。
私は以下のように実装しました。

import SwiftUI

struct LoadingView: View {
    @State private var currentImageIndex: Int = 0
    let images = [
        Image("loading.image.1"),
        Image("loading.image.2"),
        Image("loading.image.3"),
        Image("loading.image.4"),
        Image("loading.image.5"),
        Image("loading.image.6"),
        Image("loading.image.7"),
        Image("loading.image.8"),
        Image("loading.image.9")
    ]

    var body: some View {
        images[currentImageIndex]
            .font(.largeTitle)
            .onAppear {
                startAnimation()
            }
            .foregroundColor(.orange)
    }

    private func startAnimation() {
        Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { timer in
            withAnimation {
                currentImageIndex = (currentImageIndex + 1) % images.count
            }
        }
    }
}

あとはこの作成したviewを呼び出すだけで、自作のインジケータの完成です！

まとめ

いかがだったでしょうか？
思ったより簡単に出来ると感じた方も多いと思います。
デザインセンスと根気があれば、もっとおしゃれなインジケータも作成出来ると思います。
是非一度お試し頂き、アプリにオリジナリティを加えてみてください！

最後までお読み頂きありがとうございました。