LoginSignup
8
0

【Swift学習備忘録2】時計アプリ制作編

Posted at

時計アプリの仕様

時計アプリの仕様を下記に記載しました
1 画面に表示される時刻は常に更新され現在の時刻が表示されること
2 画面の中央に
 現在の時刻:
 ⭕️時⭕️分と表示されること
3 Swift UIを用いること

プロジェクトの作成

下記の順番で選択
File > New > Project > iOS > App

InterFaceでSwift UIを選択する

ContentViewについて
表示されるコンテンツの内容を記載できる部分のよう
Text("Hello, world!")
上記のHello, World!をGood Bye, World!に変更するために下記のようにソースを変更する
Text("Good Bye, World!")

変更した結果出力されるテキストの内容が変更された
qiita01.jpg

なので、まずContentViewに「現在時刻:」を追加する

次に、現在の時刻をContentView内で定義する
var currentTime = Date()

currentTimeにDateDate型のインスタンを付与している

現在時刻の用意ができたので、時間を文字列に変換しテキストとして表示するためのメソッドを作成します

private func formattedTime() -> String {
            // 日付を文字列に変換する
            let dateFormatter = DateFormatter()
            //timeStyleプロパティを利用してフォーマットをhh:mm:ssに変更する
            dateFormatter.timeStyle = .medium
            // currentTimeにフォーマットを適用した文字列を渡している
            return dateFormatter.string(from: currentTime)
        }

VstackのTextにメソッドを渡して表示される結果を確認します
qiita02-1.jpg

現在時刻の表示ができましたが問題が発生しました

問題発生:時間が更新されない

表示したタイミングでの時刻のみが表示され更新されませんでした
常にメソッドを呼び呼び続けることが必要なようです

調べた結果、TimerライブラリのscheduledTimerメソッドを利用することで毎秒処理を行うことができるというものがありました
なので毎秒現在時刻の取得を行いcurrentTimeに渡すメソッドを作成します
また、画面を表示してから毎秒行うため、ロードイベントを作成します
ロードイベントの作成方法は下記です
.onAppear

下記にbodyへ追加するメソッドを記載します

// 画面が表示されたときに実行される処理(ロードイベント)
        .onAppear {
            // タイマーを起動して1秒ごとにcurrentTimeを更新
            let _ = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { _ in
                currentTime = Date()
            }
        }’’’

問題が再度発生
謎のコンパイルエラーが、、、
「Cannot assign to property:'self' is immutable」

原因を調べていたらcurrentTimeに@Stateを使用しておらず、毎秒変数更新しても値が変わらないぞというエラーっぽい?
のでcurrentTimeを下記に変更
@State var currentTime = Date()

表示した結果は下記
qiita02.jpg

仕様通り毎秒時間が更新されました、、、
今回はここまで

8
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
0