[TIL] Custom Modifier 적용기

오늘은 Custom Modifier를 적용하였던 과정에 대해 게시글을 작성해볼까 합니다.

 

적용 화면

Custom Modifier 적용 전

 

기존 UI화면이 위와 같았는데요 이것을

 

Custom Modifier 적용 후

아래와 같이 전일대비 변동률에 따른 텍스트 색을 변화시키는 Modifier을 커터마아징해보겠습니다.

 

적용과정

 

우선 Custom Modifier 정의를 위해 ViewModifier 프로토콜을 따르는 구조체를 선언해줍니다.

애플 공식문서에 따르면, SwiftUI 프레임워크에 내장되어있는 한 프로토콜이고, 기존의 뷰 또는 다른 View Modifier에 적용시켜 또 다른 버전을 만들 수 있는 Modifier라고 합니다. 즉, 이 프로토콜을 채택하면 Custom Modifier를 구현해줄 수 있는 것이죠

다음은 변동률에 관한 열거형 처리입니다. 

API 테스트 결과 변동률에 대한 상태 정보를 아래와 같이 서버로부터 받을 수 있었습니다.

상승일 때, "RISE"
동일할 때, "EVEN"
하강일 때, "FALL"

 

따라서 응답 모델에 아래와 같이 선언하여 서버로부터 응답을 수신하여 디코딩 시 수신된 변동률 상태 정보에 맞게 모델에 저장되도록 구현하였습니다.

 

아래 코드는 변동률 정보에 따른 텍스트 색 변화를 구현한 코드입니다.

 

마지막으로 Custom Modifier를 외부에 사용하기 위해 추상화하는 코드입니다.

 

아래 코드는 전체 코드입니다.

import SwiftUI

struct BitcoinChangeModifier: ViewModifier {
    
    let change: CurrentPrice.Change
    
    func body(content: Content) -> some View {
        if change == .rise {
            content
                .foregroundStyle(.customRed)
        } else if change == .fall {
            content
                .foregroundStyle(.customBlue)
        } else {
            content
                .foregroundStyle(.customBlack)
        }
    }
}

// Wrapped Custom Modifier
extension View {
    func bitcoinChangeColor(_ change: CurrentPrice.Change = .even) -> some View {
        modifier(BitcoinChangeModifier(change: change))
    }
}

 

마무리

여기까지 게시글 읽어주셔서 감사합니다~

 

참고 사이트

https://developer.apple.com/documentation/swiftui/viewmodifier (애플 공식문서 - ViewModifier)