質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

Q&A

解決済

1回答

3577閲覧

Swift UI: カウントダウンタイマーに合わせて円形のプログレスバーを動かしたい

masanaosako

総合スコア5

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

Swift

Swiftは、アップルのiOSおよびOS Xのためのプログラミング言語で、Objective-CやObjective-C++と共存することが意図されています

0グッド

0クリップ

投稿2020/06/15 15:32

前提・実現したいこと

プログラミング初学者です。初めての個人的なアプリ開発として、プレゼン用のシンプルなカウントダウンタイマーを作ろうとしています。SwiftのSwift UIフレームワークを利用して、Xcodeで作業してます。

タイマーの数字を囲むような形で、円形のプログレスバーを配置したのですが、タイマーの数字がカウントダウンされていても、プログレスバーが変化せず、カウントが0になった瞬間にプログレスバーが急に非表示のカウント完了の状態になります。

いろいろ情報を調べ、カウントダウンのController部分を記述するファイルと、UIとして画面に表示するView部分を記述するファイルを分ております。カウントダウンされる数値の同期については、仕組みのファイルでクラスに@ObservableObjectを、プロパティであるカウントダウン数値の変数に@Publishedのキーワードをつけました。さらに、画面表示のファイル側で、仕組み側のクラスをインスタンス化して、@ObservedObjectのキーワードをつけました。結果的に、数字はUI上でもきちんとカウントダウンされ、コンソールにprintコマンドで出力しても問題ありませんが、プログレスバーは変化しません。

自分では間違いが見つけ出せなかったため、ご相談させていただきます。

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

エラーはありません。

該当のソースコード

Controllerファイルのコード

swift

1import SwiftUI 2 3class CountDownTimer: ObservableObject { 4 // この変数の変化に同期する形でカウントダウンの数字、プログレスバーの表示に動きをつける 5 @Published var counter: CGFloat = 10 6 7 let interval = 1.0 8 9 var timer: Timer? 10 11 func start() { 12 timer = Timer.scheduledTimer(withTimeInterval: interval, repeats: true, block: { _ in 13 self.counter -= 1 14 print(self.counter) 15 16 if self.counter <= 0 { 17 self.timer?.invalidate() 18 self.timer = nil 19 } 20 }) 21 } 22 23 func stop() { 24 self.timer?.invalidate() 25 } 26}

Viewファイルのコード

Swift

1import SwiftUI 2 3struct PresentationView: View { 4 5 @ObservedObject var countDownTimer = CountDownTimer() 6 7 var body: some View { 8 NavigationView { 9 VStack { 10 11 Spacer() 12 13 // カウントダウンタイマー 14 VStack { 15 ZStack { 16 Text(String(format: "%.0f", countDownTimer.counter)) 17 .font(Font.largeTitle.monospacedDigit()) 18 .fontWeight(.light) 19 .padding() 20 21 Circle() 22 .stroke(Color(.systemIndigo), style: StrokeStyle(lineWidth: 20, lineCap: .round, lineJoin: .bevel)) 23 .aspectRatio(contentMode: .fit) 24 .padding() 25 26 Circle().trim(from: 0, to: countDownTimer.counter) 27 .stroke(Color(.systemTeal), style: StrokeStyle(lineWidth: 20, lineCap: .round, lineJoin: .bevel)) 28 .aspectRatio(contentMode: .fit) 29 .rotationEffect(Angle(degrees: -90)) 30 .padding() 31 } 32 33 Spacer() 34 35 // スタートボタンとストップボタン 36 HStack { 37 Button(action: {self.countDownTimer.stop()}) { 38 Text("STOP") 39 .fontWeight(.light) 40 .foregroundColor(.white) 41 }.frame(maxWidth: 75, maxHeight: 75) 42 .padding() 43 .background(Color(.systemIndigo)) 44 .cornerRadius(100) 45 .padding() 46 47 Button(action: {self.countDownTimer.start()}) { 48 Text("START") 49 .fontWeight(.light) 50 .foregroundColor(.white) 51 }.frame(maxWidth: 75, maxHeight: 75) 52 .padding() 53 .background(Color(.systemTeal)) 54 .cornerRadius(100) 55 .padding() 56 57 } 58 59 } 60 } 61 } 62 } 63}

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

Xcode Version 11.5 (11E608c)
Swift 5.2

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

trim の値は 0 〜 1 の値を指定する必要がありますので、CountDownTimer の最大値で割りましょう。
(できれば最大値も CountDownTimer のプロパティにしたほうが綺麗ですね。)

diff

1- Circle().trim(from: 0, to: countDownTimer.counter) 2+ Circle().trim(from: 0, to: countDownTimer.counter / 10)

ちなみに、trim を選んで副ボタンクリックして Show Quick Help するとこんなのが出てきて、from と to のデフォルト値がそれぞれ 0, 1 なのできっと 0 〜 1 で指定するんだろうと判断しましたが、はっきりとは書いてないですね。また、Web 上のリファレンス は情報が少なすぎ…。
イメージ説明

投稿2020/06/15 20:22

編集2020/06/15 20:37
hoshi-takanori

総合スコア7893

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問