[SwiftUI] 가로모드, 세로모드 지원하기 with @ViewBuilder

동일한 UI 구성을 가지지만 가로모드에서 세로모드로 변경될때 화면의 넓이가 달라지게 됩니다. 특정 UI에서는 화면이 깨질 수 있어서 이에 대응해야 해요. ViewBuilder를 사용하면 여러 화면에서 대응 가능한 View를 생성할 수 있습니다!

혹시 ViewBuilder가 무엇인지 잘 모르겠다면 아래 포스팅을 참고하세요!

 

[SwiftUI] ViewBuilder 알아보기

 

혹시 카카오톡 잠금화면을 보신적 있으신가요? 

잠금 화면에서 세로 모드로 변경하면 이에 대응해서 UI가 재배치 되요. 그러나 SwiftUI로 단순히 View를 그리게 되면 아래와 같이 됩니다

 

세로 모드에서는 잘 나오던 뷰가 가로 모드에서는 위 아래 공간이 부족해서 짤리게 되고, 넓이가 커져서 UI가 옆으로 늘어나게 됩니다. 

이를 대응하기 위해 GeometryReader와 @ViewBuilder를 사용해 줄 게요!

 

완성된 코드는 아래 레포지토리에서 다운로드 받으시면 됩니다.

GitHub - youabledev/landscape_password_swiftui: 비밀번호 입력화면 가로모드 세로모드 지원하기

 

기본 View 그리기

크게 두 부분으로 쪼개어 View를 그려 줍니다. 암호 입력과 설명 글, 버튼을 눌렀을 때 채워지는 원은 세로 모드에서 왼쪽에 위치하게 되고 비밀번호를 입력하는 키패드는 오른쪽으로 위치하게 됩니다. 그래서 키패드를 하나의 View로 다른 컴포넌트를 다른 View로 쪼개어 코딩해 줄게요

struct InfoView: View {
    var body: some View {
        VStack(spacing: 0) {
            Text("암호 입력")
                .font(.title)
                .fontWeight(.bold)
                .padding(.bottom, 10)
            
            Text("카카오톡 암호를 입력해 주세요.")
                .foregroundStyle(.gray)
                .font(.system(size: 14))
                .padding(.bottom, 18)
            
            HStack(spacing: 20) {
                ForEach(0..<4) { index in
                    Image(systemName: "circle")
                }
            }
        }
    }
}

비즈니스 로직은 제외하고 UI에 관련된 코드만 간단히 작성했어요. 이제 키패드 코드를 작성할게요

struct KeypadView: View {
    let numbers = [
        ["1", "2", "3"],
        ["4", "5", "6"],
        ["7", "8", "9"],
        [" ", "0", " "]
    ]
    
    var body: some View {
        VStack(spacing: 0) {
            ForEach(0..<numbers.count, id: \.self) { rowIndex in
                HStack(spacing: 0) {
                    ForEach(0..<numbers[rowIndex].count, id: \.self) { columnIndex in
                        Button {
                            print(numbers[rowIndex][columnIndex])
                        } label: {
                            if rowIndex == numbers.count - 1 && columnIndex == numbers[rowIndex].count - 1 {
                                Image(systemName: "eraser")
                                    .keypadButtonStyle()
                                    
                            } else {
                                Text("\(numbers[rowIndex][columnIndex])")
                                    .keypadButtonStyle()
                            }
                        } //: Button
                    }
                }
            } //: ForEach
        } //: VStack
    }
}

struct KeypadButtonStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.title)
            .foregroundStyle(.black)
            .padding(.vertical, 20)
            .frame(maxWidth: .infinity)
    }
}

extension View {
    func keypadButtonStyle() -> some View {
        self.modifier(KeypadButtonStyle())
    }
}

중복되는 modifier는 custom ViewModifier를 만들어 주었어요. 

 

@ViewBuilder와 GeometryReader 사용하기

@ViewBuilder를 사용하면 클로저로 단일 뷰들을 받을 수 있고 이 단일 뷰를 조합해서 복합 뷰를 만들게 되요. VStack과 ScrollView와 같은 컨테이너 역활을 하는 Custom View를 생성할 수 있어요. 

struct LandscapeManageView<Content: View>: View {
    
    let content: Content
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    var body: some View {
        GeometryReader { geometry in
            if geometry.size.height > geometry.size.width {
                VStack {
                    content
                } //: VStack
            } else {
                HStack(alignment: .center) {
                    content
                } //: HStack
                .frame(maxHeight: .infinity)
            }
        } //: GeometryReader
    }
}

처음에는 @Environment(.\horizontalSizeClass)를 이용하면 되는 줄 알았는데 iPad 대응을 위해 준비된 값이더라구요! GeometryReader를 사용해서 간단하게 높이가 넓이보다 더 큰 경우 세로모드로, 아니라면 가로 모드로 지정해 주면 됩니다. 클로저로 전달받은 View는 content라는 값으로 받아서 body에 포함 시켜줘요.

HStack 의 경우 컨텐츠의 크기에 맞게 감싸지기 때문에 maxHeight를 infinity로 준 뒤 alignment를 center로 지정해 주면 됩니다.

 

실제 사용하기

struct ContentView: View {
    
    var body: some View {
        LandscapeManageView {
            Spacer()
            InfoView()
            Spacer()
            KeypadView()
        }
    }
}

가로모드와 세로모드를 지원하고 싶은 화면에서 작성한 LandscapeManageView를 적용해 주면 됩니다. 각각의 화면에서 GeometryReader를 사용해 판별하는 조건식과 각 조건에 해당하는 리턴을 작성할 필요가 없기 때문에 유연하고 재사용성이 높게 코드를 작성해서 대응할 수 있어요

 

완성 화면

참고 사이트

카카오톡 잠금화면

ViewBuilder에 대한 설명 https://www.avanderlee.com/swiftui/viewbuilder/