[SwiftUI Project] Statistic 정보 화면 만들기

구현할 정보 화면

이번에는 DetatilView에서 코인에 대한 정보를 나타내는 화면을 구현합니다.

 

단순히 HStack으로 반복 작업해줘도 되지만,

향후 유지보수가 수월하도록 Model, ViewModel 작업을 해서 ForEach 문으로 작성했습니다.

 

1. StatisticModel 생성

import Foundation

struct StatisticModel: Identifiable {
    let id = UUID().uuidString
    let title: String
    let value: String
    
    init(title: String, value: String) {
        self.title = title
        self.value = value
    }
}

 

2. StatisticView 생성

import SwiftUI

struct StatisticView: View {
    
    let stat: StatisticModel
    
    var body: some View {
        HStack {
            Text(stat.title)
                .foregroundColor(Color.theme.accent)
            Spacer()
            Text(stat.value)
        }
        .padding()
    }
}

 

3. DetailViewModel 작업 

import Foundation
import Combine

class DetailViewModel: ObservableObject {
    
    @Published var statistics: [StatisticModel] = []
    @Published var coin: CoinModel
    
    private let coinDatailSecvice: CoinDetailDataService
    private var cancellables = Set<AnyCancellable>()
    
    init(coin: CoinModel) {
        self.coin = coin
        self.coinDatailSecvice = CoinDetailDataService(coin: coin)
        self.addSubscribers()
    }
    
    private func addSubscribers() {
        
        $coin
            .map(mapDataToStatistics)
            .sink { [weak self] (returnedArrays) in
                self?.statistics = returnedArrays
            }
            .store(in: &cancellables)
    }
    
    private func mapDataToStatistics(coinModel: CoinModel) -> [StatisticModel] {
        
        let rank = coinModel.rank
        let rankStat = StatisticModel(title: "Rank", value: "No. \(rank)")
        
        let marketCap = coinModel.marketCap?.asCurrency() ?? ""
        let marketCapStat = StatisticModel(title: "Market Cap", value: marketCap)
        
        let circulationSupply = coinModel.circulatingSupply?.asNumberWithoutDecimal() ?? ""
        let circulationSupplyStat = StatisticModel(title: "Circulation Supply", value: circulationSupply)
        
        let maxSupply = coinModel.maxSupply?.asNumberWithoutDecimal() ?? ""
        let maxSupplyStat = StatisticModel(title: "Max Supply", value: maxSupply)
        
        let totalSupply = coinModel.totalSupply?.asNumberWithoutDecimal() ?? ""
        let totalSupplyStat = StatisticModel(title: "Total Supply", value: totalSupply)
        
        let statArray: [StatisticModel] = [
            rankStat, marketCapStat, circulationSupplyStat, maxSupplyStat, totalSupplyStat
        ]
        
        return statArray
    }
}

 

5. Double 숫자를 쉼표가 있는 숫자로 변환시키기 위해서 Formatter도 몇개 추가해줬습니다. 

DoubleFormatter 깃허브: 

GitHub - mwoo-git/SwiftUICoin: Cloning Binance Lite with SwiftUI, Combine, MVVM

 

6. ForEach문으로 리스트를 만들어주는 DetailStatsView  생성

import SwiftUI

struct DetailStatsView: View {
    
    @StateObject var viewMdoel: DetailViewModel
    
    var body: some View {
        VStack {
            ForEach(viewMdoel.statistics) { stat in
                StatisticView(stat: stat)
            }
        }
    }
}

 

7. 완성!

 DetailStatsView(viewMdoel: viewModel)