SwiftUI

[SwiftUI] Tutorials5. Animating View and Transitions

SwiftUI를 사용하면 애니메이션 효과가 어디에 적용되는지에 상관없이 뷰나 뷰의 상태를 변경하는 개별적인 애니메이션을 적용할 수 있다. SwiftUI는 이런 오버랩 및 인터럽트 가능한 애니메이션 등의 모든 복잡한 결합을 당신을 위해 처리한다. 이번 튜토리얼에서는 Landmark앱을 사용하는 사용자의 하이킹을 추적하는 그래프 애니메이션을 적용한다. animation(_ :)를 사용하면 뷰에 애니메이션을 적용하는 것이 얼마나 쉬운지 알 수 있다. Add Hiking Data to the App 프로젝트 파일의 리소스 파일(hikeData.json)을 프로젝트에 추가한다. Hike.swft를 추가해준다. Landmark구조체와 마찬가지로 Hike구조는 Codable을 준수해야 한다. import Founda..

[SwiftUI] Tutorials4. Drawing Paths and Shape

사용자는 목록에서 랜드마크를 방문 할 때마다 배지를 받는다. 물론 사용자가 배지를 받으려면 배지를 만들어야 한다. 이 튜토리얼에서는 paths와 shapes을 결합하여 배지를 만드는 과정을 안내하며, 그런 다음 위치를 나타내는 모양으로 오버레이한다. 여러 종류의 랜드마크에 대해 여러개의 배지를 만들려면 중첩된 기호로 실험하거나 반복 횟수를 변경하거나 다양한 각도와 배율을 변경해 보라. 그리기 전에 HexagonParameters.swift를 추가하고 입력한다. import CoreGraphics struct HexagonParameters { struct Segment { let line: CGPoint let curve: CGPoint let control: CGPoint } static let adj..

[SwiftUI] Tutorials3. Handling User Input

Landmarks앱에서 사용자는 즐겨찾는 장소를 즐겨찾기하고, 즐겨찾기만 표시하도록 목록을 필터링할 수 있다. 이 기능을 만들려면 먼저 스위치를 목록에 추가하여 사용자가 즐겨찾기 한 항목들만 볼 수 있게 한 다음 사용자가 탭 하여 랜드마크를 즐겨찾기로 표시하는 별 모양의 버튼을 추가한다. 즐겨찾기 표시하기 사용자에게 즐겨찾기를 한눈에 보여줄 수 있도록 목록을 향상시키는 것 부터 시작한다. 각 LandmarkRow에 즐겨찾는 랜드마크를 표시하는 별표를 추가한다. LandmarkRow.swift파일을 수정한다. 현재 랜드마크가 즐겨찾기 항목인지 확인하기 위해 spacer뒤 if문 안에 별 이미지를 추가한다. SwiftUI는 if문을 사용하여 조건부로 뷰를 포함시킨다. struct LandmarkRow: Vi..

[SwiftUI] Tutorials 2. Building List and Navigation

첫 튜토리얼에서는 사용자에게 보여줄 정보를 하드코딩 했다. 이번 튜토리얼에서는 데이터를 저장하는 모델을 만들어서 사용한다. https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation Apple Developer Documentation developer.apple.com 우선 프로젝트 파일을 다운받아 리소스폴더의 landmarkData.json을 프로젝트에 드래그 앤 드랍한다. 그리고 Landmark라는 이름의 Swift파일을 생성하고 구조체를 만들어 준다. struct Landmark: Hashable, Codable{ var id: Int var name: String var park: String var state: Str..

[SwiftUI] Tutorials 1. Creating and Combining View

XCode에서 App을 선택하고 Product Name: Landmarks Interface: Swiftui Language: Swift를 선택한다. 기본적으로 SwiftUI는 두 개의 구조체를 선언합니다. 첫 번째 구조체는 View프로토콜을 따르며 View의 콘텐츠 및 레이아웃을 정의합니다. 두 번째 구조체는 첫 번째 구조체에 대한 Preview를 선언합니다. Preview에서 Hello, World를 Command-클릭하면 구조화된 편집 팝오버를 띄우고 Show SwiftUI Inspector를 선택합니다. Inspector에서 텍스트를 Turttle Rock를 변경하고, font를 title로 변경합니다. foregroundColor를 변경하려면 텍스트 상에서 .foregroundColor(.gre..

[SwiftUI] DatePicker

SwiftUI의 DatePickerView는 UIKit의 DatePicker와 유사하며, 모양과 작동 방식을 제어하기 위한 다양한 옵션과 함께 제공된다. 값을 저장하는 모든 컨트롤과 마찬가지로 앱의 특정 @State에 바인딩되어야 한다. struct ContentView: View { @State private var wakeUp = Date() var body: some View { //텍스트를 "" = empty로 지정할 수 있다. DatePicker("날짜를 선택하세요", selection: $wakeUp) //여기까지가 기본 code //Mark: 피커 스타일 (wheel) .datePickerStyle(WheelDatePickerStyle()) } } DatePicker의 레이블 텍스트를 안보이..

[SwiftUI] @State와 @Binding

SwiftUI는 구조체에서 View프로토콜을 구현하여 View(사용자화면)을 다룬다. Xcode에서 프로젝트를 만들 때 SwiftUI를 선택하면 ContentView구조체가 생성되고 여기서 뷰를 다룬다. 이 ContentView에서 var키워드로 선언한 프로퍼티의 값을 body프로퍼티 내에서 변경하려고 하면 에러가 뜬다. Swift의 구조체에서 mutating으로 선언되지 않은 연산프로퍼티는 구조체 내부에서 그 값의 변경이 불가능하다. 그러면 연산 프로퍼티인 body를 mutating으로 선언해주면 되는가? 아니다. View프로토콜의 body프로퍼티는 { get } 으로 되어있으며, 이는 nomutating으로 구현을 요구한다. 이 때 변수변경은 @State라는 속성을 이용하면 된다. 프로퍼티에 @Sta..

[SwiftUI] TextEditor

여러줄의 텍스트를 입력받기 위해서는 TextEditor를 사용하면 된다. struct ContentView: View{ @State var text: String = "" var body: some View{ VStack{ TextEditor("Enter name", text: $text) .pdding() .backgrount(Color(uiColor: .secondarySystemBackgrount)) Text("\(text)") } } }

[SwiftUI] TextField

TextField는 Text의 입력을 읽어오기 위한 component이다. TextField의 인자값으로 @State로 선언된 변수를 넣어주면, 변수에 텍스트가 입력된다. struct ContentView: View{ @State var name: String = "" var body: some View{ VStack{ TextField("Enter name", text: $name) .pdding() .backgrount(Color(uiColor: .secondarySystemBackgrount)) Text("Hello \(name)") } } } Secure TextField 사용하기 Secure Textfield는 입력되는 텍스트의 값을 보호해주기 때문에 암호와 같은 텍스트를 입력 받을 때 사용된다..

[SwiftUI] NavigationView

NavigationView는 UIKit의 UINavigationController역할을 한다. 보여주고싶은 View를 NavigationView로 감싸주기만 하면 된다. struct navigationTest: View{ var body: some View{ NavigationView{ Text("Hello") } } } 추가를 하면 NavigationBarTitle이나 NavigationItem을 추가해줘야 GNB영역이 나오게 된다. NavigationBarTitle을 보여주는 방법 struct navigationTest: View{ var body: some View{ NavigationView{ Text("Hello") .navigationBarTitle("clamp", displayMode: .i..