Zenn
Open2

SwiftUI: 時刻とかを等幅フォントで表示するには？

SwiftUI
kabeyakabeya

タイマーとかを作っているとき、表示が等幅フォントでないと時刻が進むにつれ数字列があっちゃこっちゃ行きます。

以下のように.monospacedDigit()を使うといいですね。

let text = String(format: "%02d:%02d:%02d", hour, minute, second)
Text(text)
    .font(Font.system(size: 48).monospacedDigit())

追記）
monospaceDigitになっていたのをmonospacedDigitに修正しました。

kabeyakabeya

あと、タイマーの絵ですね。
円でカウントダウンされるやつ。

こんな感じの円ですが、末端の丸みとかどうするのかなと思いながら最初は自前で半円を両端に描いたりして、その半円の角度も計算したりして頑張っていたんです。
ですがChatGPTに聞いたら、以下のようにしてtimerProgressを0.0〜1.0の範囲で変化させるだけでいいよ、と教えてくれました。
マジか。

            ZStack {
                Circle()
                    .stroke(lineWidth: 20)
                    .opacity(0.3)
                    .foregroundColor(.gray)

                Circle()
                    .trim(from: 0.0, to: CGFloat(self.timerProgress))
                    .stroke(style: StrokeStyle(lineWidth: 20, lineCap: .round))
                    .foregroundColor(.blue)
                    .rotationEffect(.degrees(-90))
                    .animation(.linear, value: self.timerProgress)

                let text = String(format: "%.0f", self.remainSeconds)
                Text(text)
                    .font(.largeTitle.monospacedDigit())
                    .bold()
            }
            .frame(width: 200, height: 200)