Customize views　- SwiftUI でプログラミング - 2

Use Int to display temperatures

Text("Mon")以外に最高気温と最低気温の表示をするためにText()が使われているところが2箇所あるので追加します。

数値が入るのでそのままでは表示することはできないので、文字に変換して表示できるようにします。

まずはプロパティ（変数）を追加します。

let high: Int
let low: Int

型が"Int"(整数)であることに注目します。このままText()にはいれられません。理由はText()は文字を入れるものであるからです。

入れる方法としては"\(数字)"を使って変換することで使えるようになります。
以下とすれば文字と数字(整数)を混在することができます。

Text("High: \(high)")
Text("Low: \(low)") 

DayForecastを修正したものが

struct DayForecast: View {
    let day:String
    let high: Int
    let low: Int
    
    var body: some View {  
            VStack {    
                Text(day)
                Image(systemName: "sun.max")
                    .foregroundColor(.yellow)
                Text("High: \(high)")
                Text("Low: \(low)") 
            }
            .padding()      
    }
}

となります。これをContentView()で使えるようにするには

DayForecast(day: "Mon", high: 70, low: 50)

形で使います。

struct ContentView: View {
    var body: some View {
        HStack {
           
           DayForecast(day: "Mon", high: 70, low: 50)
            
           DayForecast(day: "Tue", high: 60, low: 40)
        }
    }
}

となります。

Use computed properties for the icon and color

天気によって画像、画像の色を変化をつけたいのでブール値 (true または false のいずれかの値) を使用してが true の場合は雨雲を表示し、false の場合は太陽を表示します。

まずプロパティ(変数)を作ります。

let isRainy: Bool

DayForecastの引数に追加します。

DayForecast(day: "Mon", isRainy: false, high: 70, low: 50)

天気アイコンを変化させる仕組みですが"computed property."という仕組みを使って変化させます。以下のようにプロパティ(変数)に何らかの処理をさせることができます。

var iconName: String {
処理内容　　晴れであれば　　雨であれば　　
}

この場合isRainyの状態で画像の振り分けをします。

   if isRainy {
            return "cloud.rain.fill"
        } else {
            return "sun.max.fill"
        }

同じく色も変化させます。

    var iconColor: Color {
        if isRainy {
            return Color.blue
        } else {
            return Color.yellow
        }
    }

DayForecastの全体は以下となります。

struct DayForecast: View {

    let day: String
    let isRainy: Bool
    let high: Int
    let low: Int

    var iconName: String {
        if isRainy {
            return "cloud.rain.fill"
        } else {
            return "sun.max.fill"
        }
    }

    var iconColor: Color {
        if isRainy {
            return Color.blue
        } else {
            return Color.yellow
        }
    }

    var body: some View {
        VStack {
            Text(day)
            Image(systemName: iconName)
            Text("High: \(high)")
            Text("Low: \(low)")
        }
        .padding()
    }
}

これでContentViewには以下のように記入すれば目指している表示となります。

struct ContentView: View {

    var body: some View {
        HStack {

            DayForecast(day: "Mon", isRainy: false, high: 70, low: 50)
            DayForecast(day: "Tue", isRainy: true, high: 60, low: 40)
        }
    }
}

あとはモディファイアを使ったカスタマイズをして完成です。

".font"を使います。ある程度文字を打ち込むと候補が出てくるのでその中から選ぶと簡単に設置できます。いろんなものがあるので試してみましょう。

最後に".padding"で余白を整えています。

Text(day)
　　　.font(Font.headline)

Image(systemName: iconName)
　　　.foregroundStyle(iconColor)
　　　.font(Font.largeTitle)
　　　.padding(5)

全体は

 var body: some View {

        VStack {
            Text(day)
                .font(Font.headline)
            Image(systemName: iconName)
                .foregroundStyle(iconColor)
                .font(Font.largeTitle)
                .padding(5)

            Text("High: \(high)")
                .fontWeight(Font.Weight.semibold)
            Text("Low: \(low)")
                .fontWeight(Font.Weight.medium)
                .foregroundStyle(Color.secondary)
        }
        .padding()

となります。