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

앞두고

전회 투고한 Part3의 계속입니다.
이번 목표로는
설정 화면을 만들어 스피너로 측정 시간(초)을 설정 후
타이머 화면으로 천이해 계측이 가능한 곳까지를 합니다.
다음 번은 측정이 끝나면 소리가 울릴 수 있습니다. 입니다.

개발 환경

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

이번 작업

설정 화면 만들기

1. 선택기와 라벨 만들기

SettignView.swift

    @State private var selection = 0
    var body: some View {
        VStack(alignment: .center){

            Text("時間の設定(秒)")
                    .font(.title3)

            Picker(selection: $selection, label: Text("秒選択")) {
                ForEach(1 ..< 60){ num in
                    Text(String(num))
                }
            }
            .background(Color.red)

        }
   }

・피커 생성 부분

      Picker(selection: $selection, label: Text("秒選択")) {
          ForEach(1 ..< 60){ num in
              Text(String(num))
          }
      }

Picker 인수의 선택은 Picker의 선택 ID를 저장합니다.
그래서 State 태그를 붙인 변수를 사용하는 것으로 Picker의 선택을 변경해도 변수의 내용도 자동적으로 갱신되게 된다.
그리고 ForEach를 사용하여 1에서 59까지의 Text가 옵션으로 Picker에 나오도록합니다.
* 버그인지 작업중인 환경이라면 .labelsHidden()을 호출하지 않아도 Label이 표시되지 않기 때문에, 자작으로 Label를 작성할 필요가 있었습니다.

화면 천이 처리의 구현

SwiftUI에서 화면을 전환하는 방법을 쉽게 살펴보면
· NavigationView -> Text 또는 버튼을 통해 화면 이동
· sheet -> 화면 아래에서 모달 화면이 표시됩니다.
· TabView -> 화면 하단에 탭이 표시되므로 거기에서 아이콘을 탭하여 화면 전환
＊그 밖에도 더 있을지도

이번에는 사용자에게 타이머 화면으로 이동하면 Picker에서 선택한 시간부터 카운트 다운이 자동으로 시작되면
인식하고 싶은 의도가 있었기 때문에 발화용 View를 자유롭게 배치할 수 있는 NavigationView를 사용했습니다.

SettingView.swift

    var body: some View {
        NavigationView{
            VStack(alignment: .center){

                Text("時間の設定(秒)")
                    .font(.title3)
                    .foregroundColor(.white)
                Picker(selection: $selection, label: Text("秒選択")) {
                    ForEach(1 ..< 60){ num in
                        Text(String(num))
                    }
                }
                .labelsHidden()
                .background(Color.red)

                // 遷移処理
                NavigationLink(destination: TimerView(countDwon:Double(selection+1))){
                    Text("Start Timer")
                        .background(Color.white)
                }

            }
            // 画面一杯に広げる
            .frame(minWidth: 0 ,maxWidth: .infinity,
                   minHeight: 0, maxHeight: .infinity,
                   alignment: .center)
            .background(Color.blue)
            .navigationTitle("Setting")
            // バーのサイズを最小限に設定(Settingと表示される部分)
            .navigationBarTitleDisplayMode(.inline)
        }

    }

· 천이 처리

                // 遷移処理
                NavigationLink(destination: TimerView(countDwon:Double(selection+1))){
                    Text("Start Timer")
                        .background(Color.white)
                }

NavigaionLink(destination){View}는 View를 탭하면 destination에서 지정한 View로 전환할 수 있다
또한 NavigaionLink는 NavigationView 내에서 사용해야 합니다.

TimerView(countDwon:Double(selection+1)

이것은 선택의 내용이 Picker의 선택 위치의 값이 저장되어 있습니다만, Picker는 선택 위치가 0으로부터 시작되기 (위해)때문에
1로 표시된 항목을 선택하면 selection의 내용이 0이 되어버리기 때문에
보정치로서 selection+1한 값을 계측 시간으로서 TimerView에 건네주고 있다.

타이머 화면 개수

TimerView.swift

                      略
            VStack(alignment: .center){
                      略
            }.onAppear(){
                timerContorller.displayTime = countDwon
                timerContorller.maxValue = countDwon
                timerContorller.finish()
                timerContorller.start()
            }
                      略

onApper

이것은 View가 처음 그려질 때 불리는 함수로 여기에서 Timer의 초기화와 시작을 ​​읽고 하고 있다.
이렇게하면 SettingView에서 TimerView로 전환하면 자동으로 타이머가 시작됩니다.

*View가 화려한 것은 각각의 View의 묘화 범위가 알고 싶기 때문에 디버그로서 색을 붙이고 있습니다. (SettingView)

인용·참고원

카피 통신
· 【SwiftUI】Picker의 사용법
· 【SwiftUI】NavigationView 사용법

시리즈: "SwiftUI 학습으로 타이머 앱을 만들어 보자" 링크

part1: 프로젝트 생성 및 GitHub에 등록
part2: Timer를 이용한 카운트 처리 구현
part3: 측정 화면에서 진행률 막대 구현
[part4:스피너 실장]← 지금 여기
part5: 라이브러리에서 음악을 선택하고 재생
part6:타이머 처리의 백그라운드 대응
part7:음악의 배경 재생 대응
part8:PageView 만들기
part9:PageView 인디게이터 만들기