Ray Wenderlich/SwiftUI
-
Ch14. AnimationsRay Wenderlich/SwiftUI 2021. 2. 14. 18:23
SwiftUI의 애니메이션은 UIKit보다 훨씬 간단하다. Animating state changes 직역해보면 물음표 짓게 만들지만 코드를 보면 이해가 된다. Adding animation Image(systemName: "chevron.up.square") .rotationEffect(.degrees(showDetails ? 0 : 180)) .animation(.default) 1, 2번 라인은 showDetails값에 따라 rotation을 업데이트한다. 즉 3번 라인이 없어도 무방하다. .animation(.default) 한 줄로 이미지가 회전하는 애니메이션이 생겼다. 0과 180을 오가는 애니메이션은 정방향 기준으로 시계방향으로 회전할 것이다. 하지만 180대신 -180을 넣으면 반시계방향으..
-
Ch13. Drawing & Custom GraphicsRay Wenderlich/SwiftUI 2021. 2. 14. 18:18
Creating shapes SwiftUI은 드로잉 Structure를 제공하는데 그 중 가장 간단한 것이 Rectangle이다. Rectangle() 이렇게 하면 검은색으로 화면이 뒤덮일것 .frame(width: 200, height: 200) 이렇게 추가해주면 화면 가운데에 200x200의 검은 사각형이 생긴다. .environment(\.colorScheme, .dark) 컬러 스킴에 따라 다른 색의 사각형이 생기는 것도 확인 가능 .fill(Color.blue) 명시적으로 컬러 선택도 가능 Using gradients .fill( LinearGradient(gradient: .init(colors: [Color.green, Color.blue]), startPoint: .bottomLeading..
-
Ch12. Conditional ViewsRay Wenderlich/SwiftUI 2021. 2. 14. 18:15
Displaying a modal sheet SwiftUI가 @State 프로퍼티를 사용하여 Modal을 띄우는 방식엔 2가지가 있음 Bool을 사용하여 true일 때 띄우기 Optional을 사용하여 not nil일 때 띄우기 @State private var isPresented = false Button(action: { self.isPresented.toggle() }) { HStack { someViews() } .sheet(isPresented: $isPresented, onDismiss: { print("Modal dismissed. State now: \(self.isPresented)") }) { viewToPresent() } } Programmatically dismissing a m..
-
Ch11. Lists & NavigationRay Wenderlich/SwiftUI 2021. 2. 7. 20:32
Ch11. Lists & Navigation Navigating through a SwiftUI app SwiftUI는 2가지 타입의 네비게이션을 제공한다. Flat - TabView를 사용 Hierarchical - NavigationView를 사용 Creating navigation views // 1 TabView { // 2 FlightBoard() // 3 .tabItem({ // 4 Image(systemName: "icloud.and.arrow.down") .resizable() Text("Arrivals") }) FlightBoard() .tabItem({ Image(systemName: "icloud.and.arrow.up") .resizable() Text("Departures") })..
-
Ch9. State & Data FlowRay Wenderlich/SwiftUI 2021. 2. 7. 20:26
Ch9. State & Data Flow SwiftUI는 많은 장점을 가지고 있는데 Declarative: View를 구현하지 않고 선언하는 방식으로 구현한다. Functional: 같은 State에서 항상 같은 UI 결과물을 갖는다. Reactive: State가 변경되면 SwiftUI가 자동으로 UI를 업데이트한다. State 이 책에서 @State라는 문법을 많이 봤다. var numberOfAnswered = 0 var numberOfQuestions = 5 var body: some View { // 1 Button(action: { // 2 self.numberOfAnswered += 1 }) { // 3 HStack { Text("\(numberOfAnswered)/\(numberOfQues..
-
Ch8. Introducint Stacks & ContainersRay Wenderlich/SwiftUI 2021. 2. 7. 20:20
Ch8. Introducint Stacks & Containers Layout for views with a single child struct ChallengeView: View { var body: some View { Text("Hello World!") .background(Color.red) } } Text("A great and warm welcome to Kuchi") .background(Color.red) SwiftUI가 ParentView와 ChildView의 사이즈를 결정하는 방식 Parent view가 생성될 때, 사용 가능한 프레임을 결정한다. Child view에게 이 프레임을 제안한다. Child view는 Parent view가 제안한 사이즈를 고려하여 자신의 사이즈를 결정한..
-
Ch7. Controls & User InputRay Wenderlich/SwiftUI 2021. 2. 7. 20:12
Ch7. Controls & User Input Power to the user: the TextField title과 text binding으로 생성할 수 있다. title: placeholder binding: textfield에 보이는 텍스트와 프로퍼티를 연결 @State var name: String = "" ... TextField("Type your name...", text: $name) Spacer VStack { Spacer() // Self.Body /// The content view type passed to `body()`. typealias Content } struct BorderedViewModifier: ViewModifier { func body(content: Conte..
-
Ch6. Intro to controls: Text & ImageRay Wenderlich/SwiftUI 2021. 2. 7. 20:08
Ch6. Intro to controls: Text & Image Are modifiers efficient? Modifier는 새로운 view를 리턴한다. 정말 이게 최선일까? Modifier는 사용될 때마다 뷰를 전달받아 새로운 뷰를 만든다. Recursive한 동작이 일어나는 것이다. Modifier를 연속적으로 호출하면 뷰 안에 뷰 안에 뷰 안에 뷰가 있는 그런 구조다. 마트료시카 인형처럼 말이다 언뜻보면 자원낭비처럼 보인다. 하지만 SwiftUI는 이 Stack을 효율적인 자료구조를 통해 flatten하여 뷰를 렌더링하고 있다. 그러니까 modifier를 마음껏 써도 된다. Text("Welcome to Kuchi") .background(Color.red) .padding() Text("Wel..