[SwiftUI] ProgressView 생성하기

안녕하세요! 피피아노입니다 🎵

 

 

이번 포스팅에서는 SwiftUI에서 작업 완료까지의 진행률을 보여줄 수 있는 ProgressView를 만드는 방법에 대해서 정리를 해보려고 합니다.

 

그럼 바로 시작하겠습니다!

 

ProgressView란?

먼저 개념부터 짚고 넘어가겠습니다. 

 

ProgressView는 이름에서 유추할 수 있듯이 앱 내에서 작업이 진행되고 있는 정도를 시각적으로 표시하는 View입니다.

 

이러한 ProgressView가 필요한 순간은 여러가지가 있겠지만 대표적인 예시로는 파일 다운로드 진행 상태를 앱에 표시하거나, 작업이 진행 중이지만 얼마나 오래 걸릴지 알 수 없을 때 등 다양한 상황에서 사용됩니다.

 

ProgressView 스타일

SwiftUI에서 ProgressView 스타일은 선형 스타일, 원형 스타일, 불확정적 스타일 이렇게 3가지로 나누어서 나타낼 수 있습니다.

선형 스타일

원형 스타일

불확정적 스타일

선형 스타일은 주로 파일 다운로드나 업로드의 진행 상태를 표시할 때나 긴 작업의 진행률을 시각적으로 표현할 때 사용합니다.

 

원형 스타일은 제한된 공간에서 진행률을 표시해야 할 때 사용하거나 목표 달성률이나 완료율을 시각적으로 표현할 때 주로 사용하는데 일일 운동 목표가 이러한 스타일로 사용됩니다.

 

그리고 불확정적 스타일은 데이터를 불러오는 중임을 나타내거나 API 요청의 로딩 상태를 표시할 때, 혹은 작업 완료 시간을 예측할 수 없는 경우에 주로 사용되는 스타일입니다.

 

ProgressView 제작하기

먼저 선형 스타일 ProgressView를 만들어보겠습니다.

struct ContentView: View {
    @State private var progress = 0.0
    
    var body: some View {
        VStack {
            Text("선형 프로그레스")
            ProgressView(value: progress, total: 100)
                .progressViewStyle(.linear)
                .padding()
        }
        .onAppear {
            Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { timer in
                if progress < 100 {
                    progress += 1
                } else {
                    timer.invalidate()
                }
            }
        }
    }
}

코드를 살펴보자면 먼저 @State 프로퍼티 래퍼를 사용해서 진행률을 추적하도록 해주었습니다.

 

그리고 value와 total 파라미터로 현재 진행률을 백분율로 표시해주었고 .linear 스타일로 가로 막대 형태로 진행률을 보여줄 수 있도록 설정하였습니다.

 

그리고 Timer를 사용해서 0.1초마다 진행률이 1씩 증가하도록 구현해주었습니다.

 

 

 

이제 원형 스타일로도 만들어보겠습니다.

struct ContentView: View {
    @State private var progress = 0.0
    
    var body: some View {
        VStack {
            ProgressView(value: progress, total: 100)
                .progressViewStyle(CircularProgressViewStyle())
                .padding()
        }
    }
}

원형 스타일은 이렇게 만들 수 있는데 아마 여러분들이 프리뷰나 시뮬레이터로 확인해보시면 불확정적 스타일로 나타나는 걸 확인할 수 있는데 잘못 하신 건 아니고 이 스타일은 macOS에서만 확인할 수 있는 스타일이라서 그런 거니까 macOS를 타깃으로 테스트를 해보시면 될 것 같습니다!

 

다음은 마지막 스타일인 불확정적 스타일입니다.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("불확정적 프로그레스")
            ProgressView()
                .progressViewStyle(.circular)
                .padding()
        }
    }
}

불확정적 스타일은 이런 식으로 만들 수 있는데 스피닝 인디케이터(spinning indicator)를 표시하고 진행률을 나타내는 값 바인딩을 포함하지 않고 ProgressView를 사용하여 선언됩니다.

 

간단하죠?

 

 

 

ProgressView는 단순히 UI를 나타내는 부분이라 크게 어려운 부분 없이 구현할 수 있습니다. 나중에 ProgressView를 활용해서 데이터 처리 진행률과 연동하는 법도 공부해서 포스팅할 수 있도록 하겠습니다!

---

감사합니다.

 

잘못된 내용이 있거나 더 좋은 내용 피드백은 언제나 환영합니다!

궁금하신 부분은 댓글로 질문 부탁드립니다!