학습 노트 (182) 썸네일형 리스트형 26. List #1 List #1 List는 여러 데이터를 각각의 열로써 수직으로 배치하는 View다. 애플의 모든 플랫폼을 지원하며, 각각에 알맞게 표시한다. SwiftUI의 List는 UIKit의 TableView와 같은 기능을 한다. StaticList struct StaticList: View { var body: some View { List { HStack { Text("Hello, World!") Text("Hello, World!") } Text("Hello, World!") Image(systemName: "star") Toggle(isOn: .constant(true)) { Text("On") } } } } List에 Embed 된 View를 각각의 개별 Cell로 구성한다. DynamicList stru.. 25. StateObject @StateObject Apple Developer Documentation developer.apple.com struct StateObject_Tutorials: View { @State private var color: Color = Color.gray var body: some View { VStack { NumberView() .frame(width: 200, height: 200) .background(color) .clipShape(Circle()) Button { color = Color(white: Double.random(in: 0.5 ... 1.0), opacity: 1.0) } label: { Text("Change Color") } .padding() } } } 코드는 'Chang.. 24. Observable Object & Environment Object Observable Object Apple Developer Documentation developer.apple.com ObservableObject는 ObservableObject, ObservedObject, Published 셋으로 이루어져 동작한다. Observable Object Class 프로토콜로 View에서 인스턴스의 변화를 감시 가능하다. 값이 바뀌면 View의 업데이트가 가능해진다. 주로 View 모델, 공유 데이터를 구성한다. Observed Object Property Wrapper이다. ObservableObject를 감시한다. Published Property Wrapper이다. ObservableObject에서 사용한다. 다른 View에서 해당 속성을 감시할 수 있다. cla.. 23. State & Binding UIKit SwiftUI UIKit과 SwiftUI의 가장 큰 차이점은 View(UI)를 직접 업데이트하지 않는다는 점이다. SwiftUI에서 View는 상태(State)에 자동으로 반응한다. 이러한 상태를 나타내는 변수를 Property Wrapper 라고 부르며 자주 사용되는 것들은 다음과 같다. State Binding Environment ObservedObject EnvironmentObject StateObject All SwiftUI property wrappers explained and compared - a free SwiftUI by Example tutorial Was this page useful? Let us know! 1 2 3 4 5 www.hackingwithswift.co.. 22. NavigationView & TabView NavigationView Apple Developer Documentation developer.apple.com 정리하는 시점에는 이미 사용이 중단돼 NavigationStack으로 대체됐다. NavigationStack Apple Developer Documentation developer.apple.com 대부분의 modifier는 그대로 사용할 수 있으니 글은 NavigationView를 기준으로 정리하고, 변경된 부분에 대한 설명이 필요할 경우 추가 언급하도록 한다. 앱을 사용하다 보면 아래에서 올라오는 게 아닌, 옆으로 넘어가는 전환 효과와 함께 새로운 화면을 표시하는 경우가 있다. 새로운 화면을 표시하는 과정(왼쪽)을 'Push'라고 부르고, 이전의 화면으로 돌아가는 과정(오른쪽)을 'Po.. SwiftUI에서 키보드 숨기기 SwiftUI가 버전업 되면서 여러 기능이 추가되는 가운데 여전히 지원하지 않는 기능은 Responder에 관한 제어 권한이다. 별도의 변수를 생성해 이를 이용해 제어하는 경우가 많은데, 그런 거창한 거 필요 없이 해제를 하고자 하는 경우가 있다. #if canImport(UIKit) extension View { func hideKeyboard() { UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil) } } #endif 간단하게 UIKit에 정의된 Responder 메서드를 불러와 파라미터를 전부 비워주면 responder가 해제된다. 위와 같이 별도의 함수로 선.. 21. Animation Animation Apple Developer Documentation developer.apple.com struct AnimationView: View { @State private var position = CGPoint.zero var body: some View { VStack { Circle() .foregroundColor(.blue) .frame(width: 50, height: 50) .position(position) .offset(x: 50, y: 50) .animation(.easeIn) Spacer() Button(action: { self.position = self.position == .zero ? CGPoint(x: 300, y: 300) : .zero }, label: {.. 20. Image & SFSymbol & AsyncImage Image Apple Developer Documentation developer.apple.com struct ColorImageView: View { var body: some View { Image("sampleBG") } } Image View는 말 그대로 이미지를 표시하는 View다. 정확히는 Labeled Image와 Unlabeled Image가 존재하며, 같은 View를 생성하지만 전달하는 파라미터가 다르다. 보통은 생성자에 Asset에 추가한 이미지의 이름을 전달해 사용한다. 이미지는 실제 크기를 사용하지만 modifier를 사용해 자유롭게 변경할 수 있다. struct ColorImageView: View { var body: some View { Image("sampleBG") .re.. 19. Color & Material Color Apple Developer Documentation developer.apple.com struct ColorImageView: View { var body: some View { VStack { Text("This") .foregroundColor(Color(uiColor: .systemOrange)) .fontWeight(.black) Text("is") .foregroundColor(.cyan) .fontWeight(.black) Text("Color") .foregroundColor(Color(red: 0.4, green: 0.2, blue: 0.7)) .fontWeight(.black) } } } Color 그 자체로도 하나의 View의 역할을 하지만, 보통은 다른 View의 Mod.. 18. Stepper & Picker & Date Picker & Color Picker Stepper Apple Developer Documentation developer.apple.com struct ControlsView: View { @State private var stepperVal = 0 var body: some View { VStack { Spacer() Image(systemName: "gear") .resizable() .frame(width: CGFloat(stepperVal) * 5, height: CGFloat(stepperVal) * 5, alignment: .center) .scaledToFit() Spacer() Stepper() { Label { Text("value is \(stepperVal) and real gear change to \(stepperV.. 이전 1 2 3 4 5 6 7 ··· 19 다음
