lottie-ios 프레임워크와 UIViewRepresentable 을 이용한 LoadingView 구현
로띠(lottie) 는 json 형식의 움직이는 이미지 포맷으로 aribnb에서 개발되었고 많은 웹이나 앱에서 사용되고 있다. UIKit과 SwiftUI에서는 직접 이를 지원하지 않으므로 lottie-ios 프레임워크를 Pod을 통해 설치하고 이를 통해서 LottieView를 구현할 수 있다.
SwiftUI는 지원하지 않는 UIKit의 WebView 나 MapView등 사용하기 위해 UIViewRepresentable 프로토콜을 정의하고 있고 이를 구현함으로 써 쉽게 이를 SwiftUI로 전환 할 수 있다. 여기서는 lottie-ios 프레임워크와 UIViewRepresentable 프로토콜 구현을 통해 LottieView를 구현하고 이를 통해 날씨 정보를 로딩 하는 중 이를 화면에 표시하는 LodingView를 구현하는 것으로 날씨 앱 구현을 마무리한다.
lottie-ios는 terminal 에서 아래와 같이 설치할 수 있다. 이미 Cocoa Pods 이 설치되어 있으면 첫번째 과정은 수행하지 않는다.
Cocoa Pods 설치
$ sudo gem install cocoapods
$ pod setup —verboseCocoa Pods 에서 lottie-ios 설치
현재 Project 폴더로 이동한 후 현재 프로젝트에서 아래와 같이 수행
$ pod init
$ open Podfile
Podfile에 pod 'lottie-ios' 추가
Podfile 내용
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target 'ClimaForSwiftUI' do
# Comment the next line if you don't want to use dynamic frameworks
use_frameworks!
# Pods for ClimaForSwiftUI
pod 'lottie-ios'
target 'ClimaForSwiftUITests' do
inherit! :search_paths
# Pods for testing
end
target 'ClimaForSwiftUIUITests' do
# Pods for testing
end
end
수정 완료후 프레임워크 설치를 위해 아래와 같이 입력
$ pod install
$ open .
이후 프로젝트파일(.xcodeproj) 파일이 아닌 워크스페이스(.wcworkspace) 파일을 클릭해 XCode를 재 실행한다. LottieView 구현
LottieView는 lottie-ios 프레임워크의 AnimationView를 생성하고 이를 UIView의 하위뷰로 설정한 후 이를 반환하는 팩토리 함수와 해당
뷰를 업데이트하는 함수를 가지는 UIViewRepresentable 프로토콜을 구현해야 한다. 이를 구현한 LottieView는 아래와 같다.
LottieView.swift
import SwiftUI
import Lottie
struct LottieView: UIViewRepresentable {
var filename: String
//UIViewRepresentable 프로토콜의 UIView 팩토리 메서드 구현
func makeUIView(context: Context) -> UIView {
let view = UIView(frame: .zero)
//로디 애니메이션 뷰 생성
let animationView = AnimationView()
//애니메이션 파일 설정
animationView.animation = Animation.named(filename)
//에니메이션 스케일 설정
animationView.contentMode = .scaleAspectFit
//애니메이션 시작
animationView.play()
animationView.translatesAutoresizingMaskIntoConstraints = false
//해당 에니메이션 뷰를 생성할 View의 하위뷰로 설정
view.addSubview(animationView)
//상위뷰의 크기로 애니메이션 뷰의 크기 설정
NSLayoutConstraint.activate([
animationView.widthAnchor.constraint(equalTo: view.widthAnchor),
animationView.heightAnchor.constraint(equalTo: view.heightAnchor)
])
return view
}
//UIViewRepresentable 프로토콜의 UIView 업데이트 메서드 구현
func updateUIView(_ uiView: UIView, context: Context) {
}
}
이제 LottieView를 통해 LodingView를 아래와 같이 구현한다.
LoadingView.swift
import SwiftUI
struct LoadingView: View {
var body: some View {
VStack(alignment: .center) {
Spacer()
LottieView(filename: "data")
Text("Loading...").font(.title)
.foregroundColor(.gray)
Spacer()
}.frame(width: 200, height: 200)
.background(Color(red: 0.965, green: 0.969, blue: 0.972))
.cornerRadius(20)
.shadow(color: /*@START_MENU_TOKEN@*/.black/*@END_MENU_TOKEN@*/, radius: /*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/, x: 20, y: 20)
}
}
struct LoadingView_Previews: PreviewProvider {
static var previews: some View {
LoadingView()
}
}이제 WeatherViewModel은 날씨 정보를 가져올 때 로딩 뷰를 화면에 보여주고 완료시 로딩뷰를 화면에서 없애고 날씨 정보가 보이도록 isLoading 플래그를 추가하고 private func load(resource:) 함수 시작과 종료시 플래그를 변경하도록 한다.
WeatherViewModel.swift
class WeatherViewModel : ObservableObject {
...
@Published var isLoading : Bool = false
}
extension WeatherViewModel {
...
private func load(resource: Resource<WeatherData>) {
isLoading = true
URLRequest.load(resource: resource) { (result) in
switch result {
case .success(let weatherData) :
self.model = weatherData
case .failure(let error) :
print(error)
}
self.isLoading = false
}
}
}
이제 해당 뷰 모델을 관찰하고 있는 뷰는 isLoading 의 변경을 통지 받을 수 있고 이를 통해서 true일 때 로딩화면을 표시하고 false일 때 로딩화면을 제거할 수 있게 된다.
ContentView.swift
struct ContentView: View {
...
var body: some View {
ZStack {
...
if viewModel.isLoading {
LoadingView()
}
}
}
}지금 까지 SwitUI를 이용해 날씨 앱을 구현한 전체 프로젝트는 아래에 추가한다.