Swift for文の中でUIの描画をしたい

Question

前提・実現したいこと

Swiftの質問です。
ボタンを押すとFor文の処理が走り、For文で処理している最中にLabelの文字を逐一変えたいです。
しかしうまくいかずFor文の処理が完全に終わるまでLabelは何も変わりません。

ストップウォッチなどのように数字が目にも止まらない速さで変わっていくような描画やアプリのローディング(進捗の%がわかる)のような描画をしたいです。

発生している問題・エラーメッセージ

なし

該当のソースコード

下のソースコードではUITextViewから取得した長い英語の文の単語数を数えるプログラムになっております。

もしお試しになる場合は下のリンクなどからサンプルの英文をコピーしてみてください。
英語文字列長文サンプル

 func countWords(){
        str = textView.text!
        let arr:[String] = str.components(separatedBy: " ")
        
        for i in 0..<arr.count{
            let word = arr[i]
            var count = 0
            for num in arr {
              if num == word {
                count = count + 1
              }
            }
            print(i)
            print("(word)が(count)個ありました")

            //ここでUIを変更しているのに変わらない
            totalCountLabel.text = "計(i)個"
        }
}

試したこと

クロージャー,コンプレーションハンドラーなどの書き方を試してみましたが、同じ動作で、なかなかうまく行きませんでした。

補足情報（FW/ツールのバージョンなど）

Swift5

ご回答していただけたら本当ありがたいです。
よろしくお願いいたします！

Comments

[hoshi-takanori]

OS に処理を戻さないと表示は更新されませんので、何らかの方法で遅延処理を行う必要があります。
https://program-life.com/1541

[tomato879241]

For-loopの中でusleep()を使ってください。

[tis]

hoshi-takanoriさん
for文の中の処理をDispatchQueue.main.asyncAfterで0.5秒遅らせましたが、できませんでした。
どのタイミングで遅延処理を行えばUIの更新を行ってくれるのでしょうか？

ありがとうございます。

[tis]

tomato879241さん
usleep(500000)、、、 (0.5秒遅らせる)をFor-loopの中で行う処理の前に書きましたが処理が遅くなっただけでUIの更新は行 われませんでした。

これも遅延処理だと思いますが、遅延させただけでUIの更新が行われるようになるのですか？

ありがとうございます。

Answer 1

Timer を使って書くとこんな感じでしょうか。

class ViewController: UIViewController {

    @IBOutlet weak var totalCountLabel: UILabel!

    var timer: Timer?

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func countWords() {
        if timer != nil {
            return
        }

        let str = """
            Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do. Once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice, "without pictures or conversations?"
            """
        let arr: [String] = str.components(separatedBy: " ")

        var i = 0
        timer = Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { timer in
            let word = arr[i]
            let count = arr.filter { $0 == word }.count
            print(i)
            print("(word)が(count)個ありました")
            self.totalCountLabel.text = "計(i)個"

            i += 1
            if i == arr.count {
                timer.invalidate()
                self.timer = nil
            }
        }
    }
}

---

Thread を使う方法も書いておきます。

    @IBAction func countWords() {
        let str = """
            Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do. Once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice, "without pictures or conversations?"
            """
        let arr: [String] = str.components(separatedBy: " ")

        Thread.detachNewThread {
            // バックグラウンドスレッドで処理を行う。
            for i in 0..<arr.count {
                let word = arr[i]
                let count = arr.filter { $0 == word }.count
                print(i)
                print("(word)が(count)個ありました")

                // UI の更新はメインスレッドで行う必要がある。
                DispatchQueue.main.async {
                    self.totalCountLabel.text = "計(i)個"
                }

                Thread.sleep(forTimeInterval: 0.1)
            }
        }
    }

Comments

[tis]

試してみたところ高速でUIの描画をすることができました。
for文と比較してもほぼ処理スピードに違いも出ませんでした。

このやり方は他のプログラミング言語でも使われるようなやり方なのでしょうか。Timerを使うやり方以外にはないのでしょうか？それも知りたいと思っております。
処理を待つ時のLoading画面などはいろんなアプリで使われており、そういったものは基本的に全てこのTimerのような方法で実装されているのでしょうか？

ご回答ありがとうございます！

[hoshi-takanori]

OS や言語や処理の内容によっていろいろなやり方があり、すべてを紹介するのは難しいですね。
とりあえず Thread を使う方法を追加しておきましたが、データを更新する場合は競合に気をつける必要があります。

[tis]

Threadを使う方法もありがとうございます。こうやってサブスレッドでやるんですね。
こちらも試してみました。
UIの高速描画は行われますがタイマーを使った時よりも処理が2倍くらい遅かったです。
他の機能を実装するときサブスレッドも使った実装も検討していきたいと思います。

ありがとうございます！