【SwiftUI】 ○초 후에 View 전환

7987 단어 iOSSwiftSwiftUI

1. 소개



SwiftUI에서 앱을 만들 때, 예를 들어 게임 화면에서 결과 화면으로의 전환 등 ○ 초 후에 View를 전환하거나 메시지를 표시하고 싶습니다. 라고 하는 케이스가 있을까 생각합니다.
이번은 그러한 경우의 SwiftUI에서의 구현에 대해 비망록의 의미도 담아 간단한 예로 소개해 가고 싶습니다.

2. 만드는 것



이번 최종적으로 만드는 화면은 이쪽입니다.
5초 카운트다운 후 Hello, world가 표시되는 간단한 앱입니다.



3. 프로그램



그럼 코드 해설에 우울합니다. 우선은 전문입니다.

ContentView.swift

struct ContentView: View {
    // カウントダウンする秒数
    @State private var count = 5
    // true:カウントダウン中 false:カウントダウン終了
    @State private var isCountDown = true

    var body: some View {
        VStack {
            Text("\(self.count)秒後にHello, worldと表示されます")
            if !self.isCountDown {
                Text("Hello, world!")
            }
        }
        .onAppear() {
            // 1.0秒おきに{}内を繰り返す
            Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) {timer in
                self.count -= 1
                if self.count == 0 {
                    // 現在のカウントが0になったらtimerを終了させ、カントダウン終了状態に更新
                    timer.invalidate()
                    self.isCountDown = false
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


3.1. 상태 변수 선언


    // カウントダウンする秒数
    @State private var count = 5
    // true:カウントダウン中 false:カウントダウン終了
    @State private var isCountDown = true

이쪽은 코멘트문과 같습니다. 상태 변수로서 카운트 초수(이번은 5초), 칸트다운 상태를 보관 유지하는 변수(true의 사이 카운트다운 계속한다)를 선언하고 있습니다.
@State이므로 이 변수가 업데이트된 시점에서 View도 다시 그려집니다.

3.2. View 만들기



메인 View를 만들어 갑니다.
Text의 View를 VStack으로 세로로 정렬합니다. 다만, Hello, world는 카운트다운이 종료한 타이밍으로 표시하고 싶기 때문에 if문으로 isCountDown가 false일 때 표시하도록 하고 있습니다.
VStack {
            Text("\(self.count)秒後にHello, worldと表示されます")
            if !self.isCountDown {
                Text("Hello, world!")
            }
        }

3.3. 타이머 도입


.onAppear() {
...
}

onAppear() 메소드를 사용하고 있으므로, 앱 기동시에 View가 draw 된 타이밍으로 메소드내의 코드가 실행됩니다.
이번에는 이 안에 카운트다운하는 처리를 기재합니다.
Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) {timer in
 //withTimeIntervalの秒数ごとに繰り返される
}

이쪽이 카운트다운하는 처리가 됩니다. Timer의 scheduledTimer 메서드를 사용합니다.
withTimeInterval에 지정한 초 수가 카운트되고 repeats가 true는 반복, false의 경우 1회만 카운트되므로
위의 경우 1초의 카운트가 영원히 실행되게 됩니다.
하고 싶은 것은 5초의 카운트다운이므로 상태 변수로 선언한 count를 감소시켜 가 0이 된 타이밍으로 timer.invalidate()를 호출 타이머의 카운트를 종료시킵니다.
또, 카운트다운이 종료했으므로 상태 변수 isCountDown 도 false 로 해 줍니다.
self.count -= 1
   if self.count == 0 {
   // 現在のカウントが0になったらtimerを終了させ、カントダウン終了状態に更新
        timer.invalidate()
        self.isCountDown = false
    }

이상으로 종료입니다.
그 밖에도 초수나 Timer내의 처리를 어레인지해 여러가지 처리가 걸릴까 생각합니다.
나는 Navigationlink에서 화면 전환에 채택하기도했다.

4. 결론



SwiftUI에서 들어온 ios 앱 개발을 배우기 시작한 지 1개월 정도입니다만, 아직도 정보가 적고 괴로운 상황이었습니다. .
이번 Timer 처리도 조사해도 SWiftUI에서의 구현이 별로 발견되지 않고 기사로 한 대로입니다. (아니면 너무 당연해서 아무도 기사로 하고 있지 않을까..)
역시 UIKit의 공부도 하지 않으면 안 되나요.

좀 더 이러한 편이 좋은 등 있으면 댓글 주시면 다행입니다.

좋은 웹페이지 즐겨찾기