[SwiftUI Mater] #4 MatchedGeometryEffect

Woozoo·2023년 3월 23일
0

[SwiftUI Review]

목록 보기
19/41
post-custom-banner

요런 뷰가 있다고 가정해보자
저 Rectangle을 화면 아래로 이동하고 싶다고 생각해보셈
그러면 .offset같은 걸로 하면 되겠다! 생각하게 될 텐데

다른 방법으로도 가능함

같은거 두개를 만들어놓고 isClicked로 하나만 보이게 해둠
그리고 .matchedGeometryEffect를 적용해주면 된다!
이 때 @NameSpace로 namespace를 선언하고 넣어줘야함

앗!
하나 실수 한건 .frame 전에 .matchedGeometryEffect가 와야합니다


struct MatchedGeometryEffectExample2: View {
    
    let categories: [String] = ["Home", "Popular", "Saved"]
    @State private var selected: String = ""
    @Namespace private var namespace2
    
    var body: some View {
        HStack {
            ForEach(categories, id: \.self) { category in
                ZStack {
                    if selected == category {
                        RoundedRectangle(cornerRadius: 10)
                            .fill(Color.red.opacity(0.5))
                            .matchedGeometryEffect(id: "category_background", in: namespace2)
                    }
                    Text(category)
                }
                .frame(maxWidth: .infinity)
                .frame(height: 55)
                .onTapGesture {
                    withAnimation(.spring()) {
                        selected = category
                    }
                }
            }
        }
    }
}

요렇게 쓰는 것두 가능함!!

오케이~!~!

커스텀하면 요렇게도!!

profile
우주형
post-custom-banner

0개의 댓글