김니은 
KimN's Blog
김니은 
  • 분류 전체보기
    • Algorithm
      • Programmers
    • Develop
      • Swift
      • Flask
      • RubyonRails
      • AWS
      • Ardunio
      • Vue
      • Node.js
      • Infra
      • CS
    • IT Story
      • Hackintosh
      • GitHub
      • IT Review

블로그 메뉴

  • 홈
  • 태그
  • 방명록

인기 글

태그

  • Code Snippet
  • TOAST
  • 항상 맨 위
  • SWIFT
  • Ruby on Rails
  • Ruby
  • 카카오 챗봇
  • SWIFTUI

최근 댓글

최근 글

티스토리

반응형
hELLO
김니은 

KimN's Blog

Develop/Swift

[SwiftUI] ViewModifier 사용해보기

2022. 5. 3. 13:51
반응형

ViewModifier?

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

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

 

Apple Developer Documentation

 

developer.apple.com

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

 

저는 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 파일의 가독성이 증가하며 관리도 쉬워집니다.

 

반응형
저작자표시 (새창열림)

'Develop > Swift' 카테고리의 다른 글

[Swift] 토스트(Toast) Message WindowScene 연구  (0) 2022.05.07
[SwiftUI] TabView PageStyle 회전 연구 (iPad 기준)  (0) 2022.05.03
[SwiftUI] fullScreenCover 고찰  (0) 2022.05.02
[iOS] 무음모드 상태에서 WebView 음원 출력하기  (0) 2022.05.02
[iOS] 코드 문서화 도와주는 Jazzy 도전기  (0) 2022.05.02
    'Develop/Swift' 카테고리의 다른 글
    • [Swift] 토스트(Toast) Message WindowScene 연구
    • [SwiftUI] TabView PageStyle 회전 연구 (iPad 기준)
    • [SwiftUI] fullScreenCover 고찰
    • [iOS] 무음모드 상태에서 WebView 음원 출력하기
    김니은 
    김니은 

    티스토리툴바