StudyCustomView

책 : SwiftUI 기반의 iOS 프로그래밍

내용

코드 구조

struct MyView{...}

struct MyStyle{...}

struct ContentView{...}

---

설명

커스텀 수정자와 커스텀 뷰를 같이 사용한 코드

커스텀 수정자 (Custom Modifier)란?

ViewModifier 프로토콜을 따르는 구조체로 선언되며, 반복적인 UI를 묶어서 사용할 수 있다.

해당 구현체를 수정하면 이 수정자를 사용하는 모든 부에 자동으로 적용되어 코드 가독성, 효율성이 높아진다

커스텀 컨테이너 뷰 (Custom Container View)란?

기존 하위 뷰는 컨테이너 뷰의 콘텐트가 정적(static)하다는 점을 보안하기 위해 사용한다. 다시 말해, 하위 뷰가 레이아웃에 포함되는 시점에 하위 뷰에 포함될 뷰를 지정할 수 없는 한계를 보안한다.

ViewVuilder 클로저 속성을 이용해 콘텐트 뷰들을 받아서 동적으로 만들어진 단일 부로 반환한다.

위 두가지를 사용해 코드의 재사용성을 높이는 하나의 예시 코드이다.

---

코드

struct MyView{...}

struct MyView<Content :View>: View  {
    let content: () -> Content
    init(@ViewBuilder content : @escaping () -> Content){
        self.content = content
    }
    
    var body: some View {
        VStack {
            Text("Title")
                .font(.largeTitle)
            Divider()
            content()
        }
        .modifier(MyStyle())
    }
}

struct MySytle{...}

struct MyStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(Color.cyan)
            .foregroundColor(.white)
            .cornerRadius(8)
    }
}

struct ContentView{...}

struct ContentView: View {
    var body: some View {
        VStack{
            MyView {
                Text("2")
                Text("3")
            }
        }
    }
}

---

결과 이미지