SwiftUI) 내맘대로 정리#2 (feat : onTapGesture , MagnificationGesture , Group)

3월 어디선가

 

안녕하세요. 후르륵짭짭입니다.

어김없이 SwiftUI 공부한 것에 대해서 무의식의 흐름으로 정리하도록 하겠습니다.

확실히 만 오천원 짜리 SwiftUI 강의를 듣고 있는데, 

SwiftUI를 찾아보게 되는건 기본이고 디자인에 무식한 제가 어느 정도 디자인적으로도 

배우는 것이 있게 됐습니다.

 

** OnTapGesture ** 

두번 클릭 했을 때 확대 및 축소 

.onTapGesture(count: 2, perform: {
    if imageScale == 1 {
        withAnimation(.spring(response: 1), {
            imageScale = 5
        })
    }
    else{
//   withAnimation(.spring(response: 2, dampingFraction: 0.8), {
//      imageScale = 1
//     })//dampingFraction이 클 수록 y 축으로 커지는 양도 줄어든다.
        resetImageState()
    }
})//gesture가 두번 눌러야 작동하도록 count에 설정값을 줄 수 있다. 그리고 내부에 Animation을 줘서 좀 더 동적인 효과를 줄 수 있다.

OnTagGesture는 Button과 같은 역할을 하는 것인데, 그 대상이 버튼이 아니라 화면이 되는 것이고

다음 처럼 count를 줘서 터치 횟수에 따라 분기가 가능해 집니다.

그리고 perform 부분에 좀더 자세한 자신만의 기능을 구현할 수 있습니다.

 

** gesture ** 

Gesture는 이전에도 설명한 적이 있는데,  OnTap과 다르게 화면에 대한 특정 행동을 넣어주는 것 입니다.

- DragGesture - 

 

.gesture(DragGesture()
    .onChanged({ value in
        withAnimation(.linear(duration: 1), {
            imageOffset = value.translation //onChange에서 현재 위치에 대한 값을 가져올 수 있다.
            								//onChange Value에 현재 위치의 offset을 가지고 있다.
        })
    })
    .onEnded({ _ in
        if imageScale <= 1 {
            resetImageState()
        }
    })//Drage를 마쳤을 때 원래 대로 돌아 갈 수 있도록 한다.
)//gesture를 통해서 DragGesture를 넣을 수 있다.

 

- 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()
        }
    })
)

 

** Group ** 

여러개의 View를 하나로 묶어서 동일한 속성을 주고 싶을 때 사용한다.

Group(content: {
    HStack(content: {
        //Scale Down
        Button(action: {
            //Some Action
            withAnimation(.spring(), {
                if imageScale > 1 {
                    imageScale -= 1

                    if imageScale <= 1 {
                        resetImageState()
                    }
                }
            })
        }, label: {
            ControlImageView(icon: "minus.magnifyingglass")
        })
        //Reset
        Button(action: {
            //Some Action
            resetImageState()
        }, label: {
            ControlImageView(icon: "arrow.up.left.and.down.right.magnifyingglass")
        })

        //Scale Up
        Button(action: {
            //Some Action
            withAnimation(.spring(), {
                if imageScale < 5 {
                    imageScale += 1

                    if imageScale > 5 {
                        imageScale = 5
                    }
                }
            })
        }, label: {
            ControlImageView(icon: "plus.magnifyingglass")
        })
    })
    .padding(EdgeInsets(top: 12, leading: 20, bottom: 12, trailing: 20))
    //Padding에 EdgeInsets를 통해서 더 구체적인 페딩을 줄 수 있다.
    .background(.ultraThinMaterial)
    .cornerRadius(12)
    .opacity(isAnimating ? 1 : 0 )

})// 여러개의 View 들에 동일한 속성을 부여하고 싶을때 사용하는것이 Group이다.
.padding(.bottom, 30)

 

 

** 참고 사이트 ** 

MagnificationGesture : 

https://velog.io/@j_aion/SwiftUI-MagnificationGesture

[SwiftUI] MagnificationGesture

 

Group

https://ios-development.tistory.com/1097

[iOS - SwiftUI] Group, GroupBox, Section 사용 방법