Swift로 쉽게 구현하는 안드로이드 스타일 Circular Loading View

안드로이드 애플리케이션에서는 자주 볼 수 있는 Circular Loading View는 사용자에게 현재 로딩 중임을 시각적으로 알리는 중요한 UI 요소입니다. 이번 글에서는 Swift를 사용하여 iOS 애플리케이션에서도 동일한 스타일의 Circular Loading View를 구현하는 방법을 단계별로 설명하겠습니다.

프로젝트 설정

Circular Loading View를 구현하기 위해 새로운 Xcode 프로젝트를 만듭니다. 아래 단계를 따라주세요.

1. Xcode를 열고 새로운 프로젝트를 만듭니다.
2. App 템플릿을 선택하고 다음 화면에서 프로젝트 이름을 지정합니다.
3. Storyboard를 사용하지 않도록 설정합니다. 이를 위해 SceneDelegate와 AppDelegate 파일을 수정합니다.

swift
// AppDelegate.swift
import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        window = UIWindow(frame: UIScreen.main.bounds)
        window?.rootViewController = ViewController()
        window?.makeKeyAndVisible()
        return true
    }
}

swift
// SceneDelegate.swift
import UIKit

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else { return }
        window = UIWindow(windowScene: windowScene)
        window?.rootViewController = ViewController()
        window?.makeKeyAndVisible()
    }
}

Circular Loading View 작성

코어 애니메이션을 사용하여 Circular Loading View를 작성합니다. 사용자 정의 UIView 클래스를 만들어 볼까요?

swift
// CircularLoadingView.swift
import UIKit

class CircularLoadingView: UIView {

    private let shapeLayer = CAShapeLayer()
    private let trackLayer = CAShapeLayer()

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayers()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setupLayers() {
        let circularPath = UIBezierPath(arcCenter: center, radius: 50, startAngle: -CGFloat.pi / 2, endAngle: 2 * CGFloat.pi, clockwise: true)
        trackLayer.path = circularPath.cgPath
        trackLayer.strokeColor = UIColor.lightGray.cgColor
        trackLayer.lineWidth = 10
        trackLayer.fillColor = UIColor.clear.cgColor
        trackLayer.lineCap = .round
        layer.addSublayer(trackLayer)

        shapeLayer.path = circularPath.cgPath
        shapeLayer.strokeColor = UIColor.blue.cgColor
        shapeLayer.lineWidth = 10
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.lineCap = .round
        shapeLayer.strokeEnd = 0
        layer.addSublayer(shapeLayer)
    }

    func animate() {
        let basicAnimation = CABasicAnimation(keyPath: "strokeEnd")
        basicAnimation.toValue = 1
        basicAnimation.duration = 2
        basicAnimation.fillMode = .forwards
        basicAnimation.isRemovedOnCompletion = false
        shapeLayer.add(basicAnimation, forKey: "loadingAnimation")
    }
}

CircularLoadingView는 UIBezierPath를 사용하여 원형 경로를 정의하고, CAShapeLayer를 이용해 경로를 따라 원을 그리는 방법입니다. trackLayer는 회색의 고정된 경로를 나타내며, shapeLayer는 애니메이션을 통해 업데이트되는 경로입니다.

ViewController에 Circular Loading View 추가

ViewController에 Circular Loading View를 추가하고 이를 실행하도록 설정합니다.

swift
// ViewController.swift
import UIKit

class ViewController: UIViewController {

    private let loadingView = CircularLoadingView()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        setupLoadingView()
    }

    private func setupLoadingView() {
        loadingView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(loadingView)

        NSLayoutConstraint.activate([
            loadingView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            loadingView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            loadingView.widthAnchor.constraint(equalToConstant: 100),
            loadingView.heightAnchor.constraint(equalToConstant: 100)
        ])
        loadingView.animate()
    }
}

ViewController에서 Circular Loading View를 중앙에 배치하고, 애니메이션을 시작하도록 설정합니다. 위 코드에서는 Auto Layout을 사용하여 중앙에 배치되도록 하고, 로딩 뷰가 첫 화면에 나타날 때 애니메이션이 시작됩니다.

결론

이제 Swift를 사용하여 안드로이드 스타일의 Circular Loading View를 iOS 애플리케이션에서 구현하는 방법을 알아보았습니다. UIView, CAShapeLayer 및 코어 애니메이션을 사용하여 간단하지만 강력한 로딩 뷰를 만들 수 있었습니다. 이 글이 사용자 경험 향상을 목적으로 한 다양한 로딩 UI 요소를 구현하는 데 도움이 되기를 바랍니다. 다음에도 유용한 Swift와 iOS 관련 내용을 계속해서 다뤄보겠습니다.