[SwiftUI Project] CoinRowView와 Double Formatter

HomeView에서 보여지게 될 코인리스트의 RowView 입니다. 

바이낸스를 참고하며 제작..!

CoinRowView 프리뷰 예시

CoinRowView.swift

import SwiftUI

struct CoinRowView: View {
    
    let coin: CoinModel
    
    var body: some View {
        HStack(alignment: .top, spacing: 0) {
            leftColumn
            Spacer()
            rightColmn
        }
        .padding(.horizontal)
    }
}

struct CoinRowView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            CoinRowView(coin: dev.coin)
                .preferredColorScheme(.light)
                .previewLayout(.sizeThatFits)
            CoinRowView(coin: dev.coin)
                .preferredColorScheme(.dark)
                .previewLayout(.sizeThatFits)
        }
    }
}

extension CoinRowView {
    
    private var leftColumn: some View {
        HStack(alignment: .top, spacing: 0) {
            Circle()
                .frame(width: 30, height: 30)
                .padding(.top, 4)
                
            VStack(alignment: .leading, spacing: 4) {
                Text(coin.symbol.uppercased())
                                .font(.headline)
                Text(coin.name)
                    .foregroundColor(Color.theme.accent)
                    .font(.subheadline)
            }
            .padding(.leading, 12)
        }
    }
    
    private var rightColmn: some View {
        VStack(alignment: .trailing, spacing: 10) {
            Text(coin.currentPrice.asCurrencyWith6Decimals())
                .bold()
                .font(.headline)
            Text(coin.priceChangePercentage24H?.asPercentString() ?? "")
                .foregroundColor((coin.priceChangePercentage24H ?? 0) >= 0 ? Color.theme.green : Color.theme.red)
                .font(.subheadline)
        }
    }
}

 

처음에는 가격과 변동률 퍼센트가 소수점 뒤로 0.00000 나왔기 때문에 익스텐션에 Double Formatter를 추가합니다.

 

Double.swift

import Foundation

extension Double {
    
    /// Converts a Double into a Currency with 2-6 decimal places
    /// ```
    /// Convert 1234.56 to $1,234.56
    /// Convert 12.3456 to $12.3456
    /// Convert 0.123456 to $0.123456
    /// ```
    private var currencyFormatter6: NumberFormatter {
        let formatter = NumberFormatter()
        formatter.usesGroupingSeparator = true
        formatter.numberStyle = .currency
//        formatter.locale = .current // <- default value
//        formatter.currencyCode = "usd"  // <- change currency
//        formatter.currencySymbol = "$" // <- change currency symbol
        formatter.minimumFractionDigits = 2 // 소수점 뒤로 최소 2자리
        formatter.maximumFractionDigits = 6 // 소수점 뒤로 최대 6자리
        return formatter
    }
    
    /// Converts a Double into a Currency as a String with 2-6 decimal places
    /// ```
    /// Convert 1234.56 to "$1,234.56"
    /// Convert 12.3456 to "$12.3456"
    /// Convert 0.123456 to "$0.123456"
    /// ```
    func asCurrencyWith6Decimals() -> String {
        let number = NSNumber(value: self)
        return currencyFormatter6.string(from: number) ?? "$0.00"
    }
    
    /// Converts a Double into string repesentation
    /// ```
    /// Convert 1.2345 to "1.23"
    /// ```
    func asNumberString() -> String {
        return String(format: "%.2f", self) // %.2f 의미, 소수점 뒤로 2자리
    }
    
    /// Converts a Double into string repesentation with percent symbol
    /// ```
    /// Convert 1.2345 to "1.23%"
    /// ```
    func asPercentString() -> String {
        return asNumberString() + "%"
    }
}

함수에 설명을 추가하는 방법도 배웠네요..!