【SwiftUI】 ○초 후에 View 전환
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의 공부도 하지 않으면 안 되나요.
좀 더 이러한 편이 좋은 등 있으면 댓글 주시면 다행입니다.
Reference
이 문제에 관하여(【SwiftUI】 ○초 후에 View 전환), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/w_kent/items/5fa337b1f22a8d7783b8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이번 최종적으로 만드는 화면은 이쪽입니다.
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의 공부도 하지 않으면 안 되나요.
좀 더 이러한 편이 좋은 등 있으면 댓글 주시면 다행입니다.
Reference
이 문제에 관하여(【SwiftUI】 ○초 후에 View 전환), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/w_kent/items/5fa337b1f22a8d7783b8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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()
}
}
// カウントダウンする秒数
@State private var count = 5
// true:カウントダウン中 false:カウントダウン終了
@State private var isCountDown = true
VStack {
Text("\(self.count)秒後にHello, worldと表示されます")
if !self.isCountDown {
Text("Hello, world!")
}
}
.onAppear() {
...
}
Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) {timer in
//withTimeIntervalの秒数ごとに繰り返される
}
self.count -= 1
if self.count == 0 {
// 現在のカウントが0になったらtimerを終了させ、カントダウン終了状態に更新
timer.invalidate()
self.isCountDown = false
}
SwiftUI에서 들어온 ios 앱 개발을 배우기 시작한 지 1개월 정도입니다만, 아직도 정보가 적고 괴로운 상황이었습니다. .
이번 Timer 처리도 조사해도 SWiftUI에서의 구현이 별로 발견되지 않고 기사로 한 대로입니다. (아니면 너무 당연해서 아무도 기사로 하고 있지 않을까..)
역시 UIKit의 공부도 하지 않으면 안 되나요.
좀 더 이러한 편이 좋은 등 있으면 댓글 주시면 다행입니다.
Reference
이 문제에 관하여(【SwiftUI】 ○초 후에 View 전환), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/w_kent/items/5fa337b1f22a8d7783b8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)