[SwiftUI] Custom Toggle

 

아무리 봐도 탭 바가 맞는거 같은데 디자인팀이 토글이라 하니 우선 토글인걸로..!! 뭐 2개면 토글 맞지!

 

서버로 부터 몇 개가 올지 모르고, 해당 영역을 탭했을 때 토글 애니메이션이 실행되야 한다. Namespace를 사용하면 자연스러운 애니메이션을 구현할 수 있다.

물론 animation 을 사용해도 된다! 처음에 GeometryReader로 위치를 계산 한 뒤 하나의 View의 위치를 변경해 주었더니 offset과 padding 으로 뷰 계층을 바꿨을 때 이슈가 있었다. GeometryReader로 계산 한 위치가 달라져서 엉뚱한 곳에서 백그라운드가 시작되고 움직였다. 

 

struct CustomToggle: View {
    let priceList = ["on", "off", "test"]
    /// 토글 애니메이션
    @Namespace private var toggleAnimation
    /// 현재 선택된 위치
    @State private var selectedIndex = 0
    /// on/off 여부
    @Binding var isOn: Bool
    
    var body: some View {
        ZStack {
            HStack(spacing: 0) {
                ForEach(priceList.indices, id: \.self) { index in
                    ToggleAnimationView(selectedIndex == index, content: Text(priceList[index])
                        .font(.system(size: 14))
                        .fontWeight(.bold)
                        .frame(height: 42)
                        .padding(.horizontal, 18)
                        .foregroundColor(selectedIndex == index ? Color.white : .black)
                        .onTapGesture {
                            withAnimation(.easeInOut) {
                                selectedIndex = index
                            }
                            
                        }
                    ) //: ToggleAnimationView
                } //: ForEach
            } //: HStack
        } //: ZStack
        .padding(2)
        .frame(height: 46)
        .background(
            RoundedRectangle(cornerRadius: 23)
                .stroke(.white, lineWidth: 1)
                .shadow(color: Color(white: 0, opacity: 0.5), radius: 3, x: 3, y: 3)
                .background(.gray)
                .clipShape(RoundedRectangle(cornerRadius: 23))
        )
        .frame(maxWidth: .infinity)
    }
    
    @ViewBuilder func ToggleAnimationView<Content: View>(_ isActive: Bool, content: Content) -> some View {
        if isActive {
            content
                .background(
                    RoundedRectangle(cornerRadius: 50)
                        .foregroundColor(.orange)
                        .padding(2)
                        .matchedGeometryEffect(id: "highlightitem", in: toggleAnimation)
                )
        } else {
            content
        }
    }
}

#Preview {
    CustomToggle(isOn: .constant(true))
}

 

핵심은 선택된 아이템의 백그라운드 색상을 지정하게 되는데, 이 백그라운드에 matchedGeometryEffect와 Namespace property wrapper을 사용해서 effect를 지정해 주면 된다

이렇게 하면 다음에 선택되는 아이템의 백그라운드와 애니메이션이 연결된다

 

ForEach는 SwiftUI의 system 에 의해 parent View 의 transition을 따르지 않으니 주의해야 한다. parentView의 transition이 들어가는 경우 각 row에 transition이나 animation을 넣어줘야 자연스럽게 된다.

 

참고 사이트 

https://medium.com/appcoda-tutorials/how-to-build-an-animated-tab-bar-in-swiftui-26e4446f90ef