SwiftUI에서 ProgressView를 표시하는 방법

WWDC 2020에서 Apple은 SwiftUI에 ProgressView's을 도입했습니다. AProgressView를 사용하면 앱에서 작업이 로드될 때 원형 진행률 보기 또는 선형 진행률 보기를 표시할 수 있습니다.

우리가 살펴볼 첫 번째 유형의 진행률 보기는 불확정 진행률 보기입니다. 불확실한 진행률 보기는 회전하는 로딩 보기를 만듭니다. 아래 예제는 이것을 코드에 쉽게 추가하는 방법을 보여줍니다.

ProgressView()

괄호 안에 문자열을 추가하여 진행률 보기에 텍스트를 추가할 수도 있습니다.

ProgressView("Loading...")

우리가 살펴볼 두 번째 유형의 진행률 보기는 선형 진행률 보기입니다. 선형 진행률 보기는 무언가를 로드하고 사용자에게 진행률을 보여주고 싶을 때 유용합니다.

선형 진행률 보기를 만들려면 현재 값과 진행률 보기의 총 값이라는 두 매개 변수를 지정해야 합니다.

ProgressView("Downloading…", value: 25, total: 100)  
    .padding()

위의 예에서 볼 수 있듯이 현재 값 25와 총 값 100을 추가한 것이 전부입니다. 이는 총 값 100%의 25%에서 파란색 선으로 현재 진행 상황을 보여줍니다.

총 값에 도달할 때까지 시간이 지남에 따라 현재 값을 변경하는 간단한 타이머를 추가하여 선형 진행 보기가 어떻게 작동하는지 확인할 수 있습니다.

struct LinearProgressView: View {
    @State private var currentValue = 0.0
    let timer = Timer.publish(every: 0.09, on: .main, in: .common).autoconnect()
    
    var body: some View {
        ProgressView("Downloading…", value: currentValue, total: 100)
            .padding()
            .onReceive(timer) { _ in
                if currentValue < 100 {
                    currentValue += 1
                }
            }
    }
}

위의 예에서 currentValue라는 @State 속성을 추가했습니다. 이렇게 하면 선형 진행률 보기의 현재 진행률이 업데이트됩니다. 그런 다음 타이머를 생성하고 .onReceive 수정자에 추가했습니다. 이는 타이머가 0.09초에 도달할 때마다 currentValue 변수를 업데이트합니다. 우리는 또한 currentValue가 진행률 보기의 총 값을 초과하지 않는지 확인합니다. 이는 코드에 문제를 일으킬 수 있고 Xcode가 우리에게 소리칠 것이기 때문입니다.

마지막으로 .accentColor 수정자를 사용하여 진행률 표시줄의 강조 색상을 변경하고 .foregroundColor 수정자를 사용하여 텍스트 색상을 변경하여 선형 진행률 보기를 사용자 지정할 수 있습니다.

struct LinearProgressView: View {
    @State private var currentValue = 0.0
    let timer = Timer.publish(every: 0.09, on: .main, in: .common).autoconnect()
    
    var body: some View {
        ProgressView("Downloading…", value: currentValue, total: 100)
            .padding()
            .onReceive(timer) { _ in
                if currentValue < 100 {
                    currentValue += 1
                }
            }
            .accentColor(.purple)
            .foregroundColor(.red)
    }
}

이러한 진행 보기 예제를 가지고 놀고 싶다면 myGithub에서 이 블로그의 코드를 확인하십시오.

이것이 SwiftUI에서 프로그레스 뷰를 사용하는 방법을 밝히는 데 도움이 되기를 바랍니다!

💻 ꩜ 행복한 프로그래밍! ꩜💻