[SwiftUI Masterclass 2023] Section 7 정리

Lee Youjin·2023년 7월 5일

SwiftUI 공부하기

목록 보기

3/4

Gesture

OnTapGesture

.onTapGesture(count: 2, perform: {
                        if imageScale == 1 { // 확대되지 않은 상태면
                            withAnimation(.spring()) {
                                imageScale = 5 // Scale up
                            }
                        } else { // 확대된 상태면
                            resetImageState() // 위치와 크기 원래 상태로 되돌림
                        }
                    })

UIKit에서도 터치 이벤트를 다루는 메소드가 있었는데 SwiftUI에서는 .onTapGesture 가 그 역할을 한다. 파라미터로는 count 와 perform 이 있는데, count 는 view 를 몇 번 터치했는지, perform 은 그 경우 발생하는 action 을 정의한다. 위 코드에서는 사용자가 view 를 더블 클릭하면 perform에 정의된 구문이 실행된다.

MagnificationGesture

.gesture(
                        MagnificationGesture()
                            .onChanged { value in
                                withAnimation(.linear(duration: 1)) {
                                    if imageScale >= 1 && imageScale <= 5 {
                                        imageScale = value
                                    } else if imageScale > 5 {
                                        imageScale = 5
                                    }
                                }
                            }
                            .onEnded { _ in
                                if imageScale > 5 {
                                    imageScale = 5
                                } else if imageScale <= 1 {
                                    resetImageState()
                                }
                            }
                    )

이미지를 손가락으로 확대하거나 축소할 때 사용한다. 사용자가 화면과의 상호작용을 하게 되면 .onChange() 안에 있는 구문이 실행된다.

previewLayout()

SwiftUI에서 파일을 생성하면 뷰를 구성하는 구조체와 프리뷰를 생성하는 구조체 각각 하나씩이 생성된다. 이 때 프리뷰는 보통 Xcode의 코드 작성 파트 오른쪽에 이렇게 표시된다.

그런데 위 사진처럼 element 하나를 위해 만들어진 뷰가 있을 수 있다. 그런 뷰에서 조금 더 작업을 쉽게 하기 위해 SwiftUI에서는 previewLayout() 을 지원하는데, .previewLayout(.sizeThatFits) 이렇게 코드를 작성하면 ... 놀랍게도 아무 일도 일어나지 않는다. 강의에서는 휴대폰 화면이 사라지고 돋보기만 남았는데, 버전이 달라서 그런가? 라는 생각을 하다가 해결책을 찾았다.

왼쪽 아래에 있는 버튼 중 왼쪽에서 두번째 버튼을 누르면 된다.

그러면 이렇게 화면이 바뀐다.

Group

Group {
                    HStack {
                        // SCALE DOWN
                        Button {
                            withAnimation(.spring()) {
                                if imageScale > 1 {
                                    imageScale -= 1
                                    
                                    if imageScale <= 1 { // defensive coding
                                        resetImageState()
                                    }
                                }
                            }
                        } label: {
                            ControlImageView(icon: "minus.magnifyingglass")
                        }
                        
                        // RESET
                        Button {
                            resetImageState()
                        } label: {
                            ControlImageView(icon: "arrow.up.left.and.down.right.magnifyingglass")
                        }
                        
                        // SCALE UP
                        Button {
                            withAnimation(.spring()) {
                                if imageScale < 5 {
                                    imageScale += 1
                                    
                                    if imageScale > 5 { // defensive coding
                                        imageScale = 5
                                    }
                                }
                            }
                        } label: {
                            ControlImageView(icon: "plus.magnifyingglass")
                        }
                    
                    } //: CONTROLS
                    .padding(EdgeInsets(top: 12, leading: 20, bottom: 12, trailing: 20))
                    .background(.ultraThinMaterial)
                    .cornerRadius(12)
                    .opacity(isAnimating ? 1 : 0)
                }
                    .padding(.bottom, 30)
                , alignment: .bottom