SwiftUI를 사용하여 학습이 끝난 타이머 앱을 만들어 보자 Part3

앞두고

전회 투고한 Part2의 계속입니다.
이번 목표로는
적당하게 설정한 초수가 표시되는 Text와 버튼이 표시되어 있는 화면을 작성
버튼을 누르면 한 번만 카운트다운을 할 수 있게 한다
또, 카운트다운에 맞추어 뭔가 움직임이 있는 곳까지 하려고 합니다.
다음에 간단한 설정 화면 작성 및 설정 화면에서 타이머 화면으로 카운트 다운 시간을 전달하여 화면 전환을하는 곳 를 구현합니다.

개발 환경

Mac (OS Big Sur version:11.3.1)
Xcode (version:12.5)
Swift (버전: 5.4)

Timer용 진행률 표시줄 만들기

조사하고 있으면 간단하게 테두리만의 진원하고 표시 면적을 꼬인 View의 사용법을 소개하고 있다 기사 가 있었으므로 그것을 참고로 작성을 했습니다.

· 배경 만들기

    var body: some View {
            Circle()
                .stroke(Color.green, style: StrokeStyle(lineWidth:10))
                .padding(10)
    }

Circle()

진원을 그려준다

.stroke(Color.green, style: StrokeStyle(lineWidth:10))

진원을 둥글게 해준다
제1 인수로 색을 제2 인수로 스타일(폭등)을 지정하고 있다.

그렇다면 ↓의 느낌으로 그릴 수 있기 때문에

나중에 ZStack을 사용하여 같은 느낌에 겹쳐 주면 OK

var body: some View {
    ZStack(alignment: .center){
        Circle()
            .stroke(Color.green, style: StrokeStyle(lineWidth:10))
            .scaledToFit()
            .padding(10)

        Circle()
            .trim(from: 0.0, to: 0.5)
            .stroke(Color.yellow, style: StrokeStyle(lineWidth:10, lineCap: .round))
            .scaledToFit()
            .padding(10)
            .rotationEffect(.degrees(-90))

    }
}

StrokeStyle에서 lineCap을 설정하면 프레임의 단면? 반올림 수 있습니다.

trim(from: 0.0, to: 0.5)
from:자르기 시작 위치
to : 트리밍 종료 위치 0.0 ~ 1.0

이 함수를 사용하여 지정한 범위에서 트리밍을 할 수 있다

rotationEffect(.degrees(-90))

바 부분의 원을 트리밍할 때에 초기의 지점(0도)이 아무래도 방위 동(사진으로 말하면 중심점으로부터 바로 오른쪽)과 같이 회전시켜 시작 위치를 방위 북으로 변경해 준다
그러면 아래의 스쿠쇼와 같이 되므로 이후에는 카운트다운과 함께 trim 함수의 인수 to를 바꾸어 주면 프리 인스톨 되고 있는 타이머 어플리와 같은 프로그레스 바를 사용할 수 있다.

카운트다운 기능 생성 및 View 리노베이션

이전에 작성한 TimerView에서 ZStack을 사용하여 작성한 진행률 막대를 겹쳐 표시시킨다.

TimerView.swift

    var body: some View {
        ZStack(){
            TimerProgressBar(trimValue: $timerContorller.duration)

            VStack(alignment: .center){
　　　
　            以下略

            }.onAppear(){
                timerContorller.displayTime = countDwon
                timerContorller.maxValue = countDwon
            }

        }
    }

TimerProgressBar(trimValue: $timerContorller.duration)
TimerModel의 Published 태그를 붙이고 있는 변수를 참조 건네주고 있다.
건네주고 있는 변수의 값이 trim()의 트리밍 위치를 조정하는 값이 된다.
Timer 처리 중 duration의 값이 변경되면 자동으로 View측의 표시가 갱신된다.

onAppler{}
onAppler는 View가 처음 그려지는 한 번만 호출되는 함수입니다.
표시 시간과 측정 시간을 초기화하고 있습니다.

TimerModel.swift

    @Published var displayTime: Double = 0.0 // 表示時間
    @Published var duration: CGFloat = 1.0 // プログレスバー位置
    @Published var timer: AnyCancellable!

    var maxValue  = 0.0 // 開始時間
    var remainingTime = 0.0 // 残り時間

    // タイマー処理の開始
    func start(_ interval: Double = 0.05){

                 略

        // TimerPublisherが存在しているときは念の為処理をキャンセル
        if let _timer = timer{
            _timer.cancel()
        }else{
　　　　　　　　　　　　　　　　　　　　　　　　　// タイマーの実態を取得する場合は経過時間の初期化をする
            self.remainingTime = self.displayTime
        }

        // in: -> .defalut:操作系の入力と同様に処理をする : .common それ以外
        timer = Timer.publish(every: interval, on: .main, in: .common)
            // 繰り返し処理の実行
            .autoconnect()
            //　レシーバーが動くスレッドを指定 .main -> メインスレッド(UI)　, .global() -> 別スレッド
            .receive(on: DispatchQueue.main)
            .sink(receiveValue: ({_ in
                    // 設定した時間ごとに呼ばれる
                    self.remainingTime -= interval
                    // 切り捨て位置変更
                    let floorOption: Double = 10.0
                    self.displayTime = floor((self.remainingTime * floorOption)) / floorOption

                    self.duration = CGFloat((self.remainingTime / self.maxValue))
                    if self.displayTime <= 0.00 {
                        // countが0以下になったらタイマーを終了
                        self.duration = 0
                        self.stop()
                    }

                })
            )


    }

                 略
}

하고 있는 일은 단순히
타이머에 설정한 반복 시간마다
측정 시간 - 인터벌 시간을 실시해, 표시용 변수에 소수점 제2위로 잘라 버린 값을 세트하고, 그 후에 프로그레스 바의 표시 갱신용 변수에 (경과 시간/계측 시간)으로 0.0 ~ 1.0이 되도록 로 업데이트하고 있습니다.