[SwiftUI] ViewModifier 사용해보기

ViewModifier?

• 기존에 생성한 뷰 또는 modifier에 추가적으로 꾸며줄 때 사용합니다.

https://developer.apple.com/documentation/swiftui/viewmodifier

Apple Developer Documentation

애플 개발자 사이트에서 자세한 내용을 확인하실 수 있습니다.

 

저는 iOS 버전에 따라 분기처리, 그리고 원하는 뷰를 커스텀할 때 이용하고 있습니다.

 

 

1. iOS 버전 분기처리

13.0 이상의 SwiftUI 프로젝트를 하게 되면 13, 14, 15 버전마다 분기처리를 해야하는 경우가 있습니다.

예로 들면  overlay, navigationTitle, ignoresSafeArea  등 버전이 추가되면서 각 버전에 맞춰 if #available 분기를 나눠서 개발을 하게되는데, 이는 중복된 코드가 생기는 등 코드 가독성이 떨어지는 문제가 발생합니다.

 

이러한 문제들을 ViewModifier를 통해 해결할 수 있습니다.

 

 

import SwiftUI

extension View {
    func viewOverlay<Content: View>(alignment: Alignment, content: @escaping () -> Content) -> some View {
        self.modifier(ViewOverlay(alignment: alignment, content: content))
    }
}

struct ViewOverlay<CoverContent: View>: ViewModifier {
    var alignment: Alignment
    let content: () -> CoverContent
    
    func body(content: Content) -> some View {
        if #available(iOS 15.0, *) {
            content.overlay(alignment: alignment) {
                self.content()
            }
        } else {
            content.overlay(
                self.content()
                ,alignment: alignment
            )
        }
    }
}

 

 

overlay를 예로 들면 15.0 이상 버전에서 분기처리를 해야하는 문제가 있습니다.

하지만 위와 같은 형태로 ViewModifier를 만들게 되면 원하는 content에 .viewOverlay(alignment: [], content: {})를 선언하여 View 파일의 코드를 줄여줄 수 있습니다.

 

 

2. Custom View Modifier

저는 원하는 State에서 visibilty, 디바이스 회전 상태 등 View의 상태를 확인하여 반영하는 경우와 원하는 부분의 cornerRadius, ToastView, View Style 등 View의 형태를 반영하는 경우 등 다양한 경우에서 Custom View Modifier를 만들고 있습니다.

 

import SwiftUI

struct CornerRadiusStyle: ViewModifier {
    var radius: CGFloat
    var corners: UIRectCorner
    
    struct CornerRadiusShape: Shape {

        var radius = CGFloat.infinity
        var corners = UIRectCorner.allCorners

        func path(in rect: CGRect) -> Path {
            let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners,
            cornerRadii: CGSize(width: radius, height: radius))
            return Path(path.cgPath)
        }
    }

    func body(content: Content) -> some View {
        content
            .clipShape(CornerRadiusShape(radius: radius, corners: corners))
    }
}

extension View {
    func cornerRadius(_ radius: CGFloat, corners: UIRectCorner) -> some View {
        ModifiedContent(content: self, modifier: CornerRadiusStyle(radius: radius, corners: corners))
    }
}

Rectangle().fill(Color(.gray)
                .cornerRadius(4, corners: [.bottomLeft, .bottomRight])

 

위는 cornerRadius의 예제입니다. 원하는 부분만 cornerRadius를 주는 style를 viewModifier로 만들어 적용시켜주면 View 파일의 가독성이 증가하며 관리도 쉬워집니다.