728x90

SwiftUI 54

horizontalSizeClass, dynamicTypeSize

안녕하세요. 이번에는 SwiftUI EnvironmentValues 중 horizontalSizeClass 프로퍼티와 dynamicTypeSize 프로퍼티에 대해 알아볼게요. # 1. horizontalSizeClass 끝에 Class라는 이름이 붙긴 했지만, 이 친구는 프로퍼티입니다. Environment property wrapper로 아래처럼 선언해서 사용할 수 있구요 horizontalSizeClass에는 enum 타입인 UserInterfaceSizeClass 값이 설정되며 아래의 값 중 하나를 가집니다. 쉽게 생각해서 compact = 작은 화면, regular = 큰 화면이라고 보면 될 것 같아요ㅎㅎ "그래서 이 값은 어떻게 결정되는데???" "SwiftUI가 알아서!!!" SwiftUI가 ..

SwiftUI 2022.04.17

Gesture

안녕하세요. 이번에는 SwiftUI의 Gesture에 대해 알아볼게요. # 1. 제스처 추가 특정 뷰에 제스처를 추가하려면, Gesture를 생성 및 설정한 뒤에, gesture(_:including:) 수식어를 사용해줍니다. struct ShapeTapView: View { var body: some View { let tap = TapGesture()// 제스처 생성 .onEnded { _ in// 제스처 설정 print("View tapped!") } return Circle() .fill(Color.blue) .frame(width: 100, height: 100, alignment: .center) .gesture(tap)// 제스처 추가 } } 만약 아래처럼 VStack에는 gesture(_:..

SwiftUI 2022.04.01

__printChanges

안녕하세요. 이번에는 SwiftUI의 __printChanges에 대해 알아볼게요. __printChanges는 Xcode 13부터 사용할 수 있는 method인데요, SwiftUI의 body가 다시 그려질 때(상태 값이 변경될 때), 뷰의 프로퍼티가 어떤 값으로 변하는지 콘솔에 출력해주는 method입니다. 사용법은 아주 간단해요ㅎㅎㅎ 뷰 body 안에 아래 코드를 추가해주면 끝입니다. Self._printChanges() 직접 확인해볼까요?? struct ContentView: View { @State private var isShow = false @State private var isOn = true @State private var speed = 50.0 @State private var isE..

SwiftUI 2022.03.23

SceneStorage

안녕하세요. 이번에는 SwiftUI의 SceneStorage에 대해 알아볼게요. # 1. Overview SceneStorage는 Scene 고유 저장소에 읽고 쓰고 할 수 있는 프로퍼티 래퍼입니다. 상태를 복구하고 싶을 때, SceneStorage를 사용합니다. State와 유사하지만, SceneStorage는 동일 Scene에서는 그 값을 공유합니다. 다른 Scene들 간에는 SceneStorage 데이터는 공유되지 않습니다. 주의할 점이 있는데요, SceneStorage를 관리하는 시스템은 언제 어떻게 데이터를 지속시킬 건지 보장해주지 않아요. 그리고 SceneStorage에 저장할 데이터가 무거울 경우(ex. model data) 성능에 안 좋을 수 있으니 가벼운 데이터만 사용해주세요. 또한, S..

SwiftUI 2022.03.20

Canvas 뷰를 통한 성능 향상

안녕하세요. 이번에는 "Canvas 뷰를 썼을 때 정말 성능이 좋아질까??"에 대해 알아볼게요. 전체 프로젝트는 github에 올려두었습니다. SwiftUI에는 Canvas 뷰라는 것이 있어요. Canvas 뷰를 사용하면 복잡한 도형을 그려야 할 경우에 더 좋은 성능을 보여준다고 해요. However, it might provide better performance for a complex drawing that involves dynamic data. Use a canvas to improve performance for a drawing that doesn’t primarily involve text or require interactive elements. 정말 그런지 확인하기 위해 저희는 위 화면..

SwiftUI 2022.03.14

cornerRadius

안녕하세요. 제가 SwiftUI의 cornerRadius에 대해서 잘못 이해하고 있었더라구요..ㅠㅠ 잊지 않기 위해.. 글로 간단하게 정리해보려고 해요. SwiftUI에는 테두리를 둥글게 만들 수 있는 cornerRadius(_:antialiased:) 이란 method가 있습니다. 전 그동안 "cornerRadius method를 사용하면 뷰의 테두리를 둥글게 만들어준다."라고 이해를 하고 있는데, 이게 반쪽짜리 설명이었더라구요. 공식 문서에서는 뭐라고 하는지 볼까요? Clips this view to its bounding frame, with the specified corner radius. Clips the view to its bounding frame, ... 즉, "뷰의 테두리를 둥글게 만..

SwiftUI 2022.03.13

SwiftUI에서 testable 한 코드 만들기

안녕하세요. 이번에는 SwiftUI에서 testable 한 코드를 만들기 위해 신경 써야 할 부분과, 테스트 코드도 작성해보는 시간을 가져보겠습니다. 이번 글은 아래 글을 토대로 작성되었습니다. https://swiftbysundell.com/articles/writing-testable-code-when-using-swiftui/ Writing testable code when using SwiftUI | Swift by Sundell A major part of the challenge of architecting UI-focused code bases tends to come down to deciding where to draw the line between the code that needs t..

SwiftUI 2022.03.05

animatableData

안녕하세요. SwiftUI에서 Shape에 애니메이션이 적용 안 되는 경우가 있더라구요. 그래서 이번 글에서는 animatableData를 사용해서 Shape에 애니메이션을 적용하는 방법에 대해 알아볼게요. 우선 팔각형 형태의 Octagon이라는 Shape를 만들게요. struct Octagon: Shape { var inset: CGFloat func path(in rect: CGRect) -> Path { return Path { path in path.move(to: CGPoint(x: inset, y: 0)) path.addLines([ CGPoint(x: 0, y: inset), CGPoint(x: 0, y: rect.height - inset), CGPoint(x: inset, y: rect...

SwiftUI 2022.03.03

renderingMode(_:)

안녕하세요. 이번에는 SwiftUI의 렌더링 모드에 대해 알아볼게요. # 1. RenderingMode renderingMode에는 총 2가지가 있어요. - Image.TemplateRenderingMode.original - Image.TemplateRenderingMode.template original 모드는 이미지 그 자체를 그대로 화면에 렌더링을 해주는 것이고, template 모드는 이미지의 불투명한 부분을 foregroundColor로 색을 변경한 뒤에 화면에 렌더링 해주는 것이에요. (이미지 마스크를 만들기 위해 사용한답니다.) # 2. SFSymbol multicolor SFSymbol의 multi color를 제외한 부분에 foregroundColor를 적용하기 위해 original 모..

SwiftUI 2022.03.01

AlignmentGuide

안녕하세요. 이번에는 alignmentGuide에 대해 알아볼게요. # 1. alignmentGuide 란? alignmentGuide는 쉽게 말해서, 뷰를 정렬하는데 기준이 되는 가이드라인을 말해요. 이게 뭔 말이냐... 만약에 VStack에서 leading alignment를 준다면, VStack(alignment: .leading) { Text("Hello World").font(.title) Text("My name is Philip.").font(.title) } 이렇게 보이겠죠?? 근데 이게 사실은 alignmentGuide라는 가이드라인이 있고, alignmentGuide를 기준으로 뷰를 배치하는 것이에요. (leading alignment이니 뷰의 왼쪽 부분이 alignmentGuide에 ..

SwiftUI 2022.02.27