목차
소개
네트워크 요청이 진행 중인 경우 사용자에게 표시해주는 활동 표시기는 애플리케이션에서 중요한 역할을 합니다. 이번 튜토리얼에서는 Swift의 CircularProgress 애니메이션을 사용하여 네트워크 활동 표시기를 구현하는 방법을 안내하겠습니다.
이번 튜토리얼에서 사용된 도구
- 언어: Swift 5.0
- 플랫폼: iOS 13.0 이상
- 개발 도구: Xcode 11 이상
주요 내용
- CircularProgressView 클래스 생성
- CircularProgress 애니메이션 구현
- 네트워크 요청 시 CircularProgressView 사용
코드 예제
먼저 CircularProgressView 클래스를 생성해야 합니다. CircularProgressView는 UIActivityIndicatorView를 상속받고, 원형의 프로그레스 바를 그리는 역할을 합니다.
import UIKit
class CircularProgressView: UIActivityIndicatorView {
override init(style: UIActivityIndicatorView.Style) {
super.init(style: style)
setupCircularProgress()
}
required init(coder: NSCoder) {
super.init(coder: coder)
setupCircularProgress()
}
private func setupCircularProgress() {
self.style = .medium
self.startAnimating()
}
override func layoutSubviews() {
super.layoutSubviews()
self.layer.cornerRadius = self.frame.width / 2
self.layer.masksToBounds = true
}
}
다음으로 CircularProgress 애니메이션을 구현해야 합니다. CircularProgressView는 UIActivityIndicatorView를 상속받았으므로, 이미 Circular Progress 애니메이션이 구현되어 있습니다.
import UIKit
class ViewController: UIViewController {
var progressView: CircularProgressView!
override func viewDidLoad() {
super.viewDidLoad()
setupProgressView()
}
private func setupProgressView() {
progressView = CircularProgressView(style: .medium)
progressView.center = view.center
view.addSubview(progressView)
}
// 네트워크 요청이 완료되면 CircularProgressView를 숨깁니다.
private func hideProgressView() {
progressView.stopAnimating()
progressView.removeFromSuperview()
}
// 네트워크 요청 시 CircularProgressView를 표시합니다.
private func showProgressView() {
progressView.startAnimating()
view.addSubview(progressView)
}
}
이제 네트워크 요청 시 CircularProgressView를 사용할 수 있습니다. 네트워크 요청이 시작되면 showProgressView() 메서드를 호출하여 CircularProgressView를 표시하고, 네트워크 요청이 완료되면 hideProgressView() 메서드를 호출하여 CircularProgressView를 숨겨줍니다.
마무리
이번 튜토리얼에서는 Swift의 CircularProgress 애니메이션을 사용하여 네트워크 활동 표시기를 구현하는 방법을 배웠습니다. CircularProgressView 클래스를 생성하여 원형의 프로그레스 바를 그리고, 네트워크 요청 시 CircularProgressView를 표시해주는 기능을 추가할 수 있습니다. 이를 통해 사용자에게 시각적인 피드백을 제공하여 사용자 경험을 향상시킬 수 있습니다.
이외에도 다양한 효과와 디자인을 추가하여 애플리케이션의 네트워크 활동 표시기를 더욱 향상시킬 수 있습니다.