[iOS/Swift] 조건부로 보이게 만들기

 

동일한 디자인이지만 들어가는 요소가 다른 컴포넌트를 만들어야 한다.

 

 

 

컴포넌트에 들어가는 요소 3가지

1. 이미지
2. 텍스트
3. 이동할 페이지

 

그렇다면 3가지를 매개변수로 입력받고 재사용을 하면 될 것이다.

 

다른건 동일하지만 유일하게 텍스트만 없다.

 

해결하려면 아래와 같은 처리를 해주어야한다.

1. 텍스트 매개변수 옵셔널 처리
2. 텍스트가 담긴 Stack 조건부 처리

 

코드 예시다

HStack{
         BottomButtonView(imageName: "Calander", buttonText: "달력", destination: AnyView(ContentVieww()))
         BottomButtonView(imageName: "Harubang", buttonText: "하루방", destination: AnyView(LoginView()))
         BottomButtonView(imageName: "Home", destination: AnyView(LoginView()))
         BottomButtonView(imageName: "Park", buttonText: "공원", destination: AnyView(LoginView()))
         BottomButtonView(imageName: "Mypage", buttonText: "마이페이지", destination: AnyView(LoginView()))
 }

struct BottomButtonView: View {
    var imageName: String
    // 홈버튼을 위해 옵셔널 처리
    var buttonText: String?
    var destination: AnyView

    var body: some View {
            HStack {
                NavigationLink(destination: destination) {
                    ZStack {
                        VStack(spacing: 0){
                            HStack {
                                Spacer()
                                Image(imageName)
                                Spacer()
                            }
                            // if let을 통한 옵셔널 언래핑
                            if let buttonText = buttonText {
                                HStack {
                                    Spacer()
                                    Text(buttonText)
                                        .font(.system(size: 10))
                                        .fontWeight(.bold)
                                        .foregroundColor(.white)
                                    Spacer()
                                }
                            }
                        }
                    }
                    .frame(width: 64, height: 64)
                    .background(Color.mainBrown)
                    .cornerRadius(15)
                    .padding(.bottom, 23)
                }
            }
        
    }
}

 

 

이렇게 가독성과 재사용성 모두 챙긴 코드를 완성시켰다.