SwiftUI
-
lottie-ios 프레임워크와 UIViewRepresentable 을 이용한 LoadingView 구현SwiftUI/MVVM 알아보기 2020. 8. 27. 20:44
로띠(lottie) 는 json 형식의 움직이는 이미지 포맷으로 aribnb에서 개발되었고 많은 웹이나 앱에서 사용되고 있다. UIKit과 SwiftUI에서는 직접 이를 지원하지 않으므로 lottie-ios 프레임워크를 Pod을 통해 설치하고 이를 통해서 LottieView를 구현할 수 있다. SwiftUI는 지원하지 않는 UIKit의 WebView 나 MapView등 사용하기 위해 UIViewRepresentable 프로토콜을 정의하고 있고 이를 구현함으로 써 쉽게 이를 SwiftUI로 전환 할 수 있다. 여기서는 lottie-ios 프레임워크와 UIViewRepresentable 프로토콜 구현을 통해 LottieView를 구현하고 이를 통해 날씨 정보를 로딩 하는 중 이를 화면에 표시하는 Loding..
-
SwiftUI 에서 CoreLocation 사용SwiftUI/MVVM 알아보기 2020. 8. 27. 15:49
이 전 블러그에서 텍스트 필드에서 입력받은 도시의 날씨를 표현하는 앱을 구현하였다. 이미지 location.fill 위치에 버튼을 추가하고 CoreLocation을 이용해 현재 좌표에 대한 날씨를 조회하도록 기능을 추가해 보자. 이 보다 먼저 ContentView의 body에서 상단 바와 날씨 정보를 보여주는 위젯을 Extract Subview를 이용해 두 영역을 하위 뷰로 분리한다. 위의 그림처럼 분리하고자 하는 VStack에 커서를 두고 ⌘ 누르고 마우스의 왼쪽키를 클릭하면 메뉴바가 나오는데 여기서 Extract Subview를 통해서 쉽게 분리할 수 있다. 뷰는 아래와 같은 구조를 가진다. struct ContentView: View { ... var body: some View { ZStack {..
-
SwiftUI MVVM 모델SwiftUI/MVVM 알아보기 2020. 8. 27. 04:45
이전 블러그에서 스트리보드를 이용한 MVC 모델에 대해서 살펴 보았다. MVC 모델은 ViewController 에 대부분의 코드가 위치하게 되고 UI 에 대한 액션도 ViewController에서 처리하고 데이터 모델을 직접 뷰에 설정해야 했다. SwiftUI 에서는 뷰 모델은 모델 데이터가 변경된 경우 이를 뷰에 통지한다. 뷰는 변경사항에 대한 통지를 받은 경우 뷰를 다시 그리게 된다. 이는 Obsever 패턴과 바인딩을 이용해 구현되어 있다. 이제 실제 어떻게 MVVM을 이용해 날씨 앱을 변경할 수 있는지를 살펴 보자 . ContentView.swift import SwiftUI struct ContentView: View { // ViewModel의 통지를 받을 수 있도록 @ObservedObje..
-
SwiftUI LongPressGesture 를 사용한 Fingerprint ButtonSwiftUI 2020. 8. 25. 05:27
struct FingerprintButton: View { //롱프레스 제스처 상태 @GestureState var press = false //롱프레스 제스쳐 완료 상태 체크 @State var completed = false var body: some View { //3개의 이미지 와 원형 상태바 레이어용 ZStack ZStack { //1. 기본 배경 - 완료시 사라짐 Image("fingerprint1") .opacity(completed ? 0 : 1) .scaleEffect(completed ? 0 : 1) //2. 진행 중에 위로 이동하면서 애니메이션 Image("fingerprint2") .clipShape( Circle() .offset(y: press ? 0 : 50) ) .animat..
-
SwiftUI를 이용해 Circle Progress Bar 그리기SwiftUI 2020. 8. 25. 03:15
import SwiftUI struct RoundProgressView : View { var width: CGFloat var height: CGFloat var color1: Color var color2: Color @Binding var percent: Int; var body: some View { // width의 비율에 따라 선의 두께를 지정하기 위해 multiplier 설정 let multiplier = width / 40 //트림하고 남은 영역이 진행 상태를 나타내는 부분으로 이를 역으로 계산 //에를 들어 0.1 에서 1.0 까지 트림하는 경우 원의 10% 부분이 잘리고 남아있는 부분은 90%가 됨 let progress = 1 - (CGFloat(percent) / 100) retur..