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

Customize views with properties | Apple Developer Documentation

Create a new project

新しいプロジェクトを作ります。前回と同じようにSwiftPlaygroundsで作ります。

Prototype a forecast view

目指すものは

こんな感じなもの作っていきます。同じようなパーツが組み合わせてあることに注目します。

まず簡単に文字だけで天気予報を表示させます。

Text("Mon")
Text("High: 70")
Text("Low: 50") 

表示は

となります。

画像をつけていきます。SF Symbolを使います。

赤丸のアイコンをクリックすると一覧が出てきますので検索で"sun"と入れると太陽の画像が出てきくるのでそれをクリックするとカーソルの位置に挿入されます。

 Image(systemName: "sun.max")

そして色をつけたいのでモディファイアを付けて黄色にします。

 Image(systemName: "sun.max")
         .foregroundColor(.yellow)

".fore"といれてやると候補が出てくるので選んでリターンすると挿入されます。そして括弧の中に".yellow"と入力してやれば完成です。

次にこれと同じようにもう一つ横に配置したいので

"HStack"を使います。(VStackは縦方向、HStackは横方向にレイアウトします。)

これで最初に目標にしたレイアウトの完成です。

全体のコード

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            VStack {    
                Text("Mon")
               Image(systemName: "sun.max")
                    .foregroundColor(.yellow)
                Text("High: 70")
                Text("Low: 50") 
            }
            .padding()
            VStack {    
                Text("Tue")         
                Image(systemName: "cloud.rain.fill")
                    .foregroundStyle(Color.blue)       
                Text("High: 60")        
                Text("Low: 40")
            }
            .padding()
        }
    }
}

Create a custom subview

同じ構造のものについては雛形を作って使いまわせるようにしていきます。

天気のコードを一つのもの

struct DayForecast: View {
　　var body: some View {
　　　VStack {
　　　　Text("Mon")
　　　　Image(systemName: "sun.max")
　　　　　.foregroundColor(.yellow)
　　　　Text("High: 70")
　　　　Text("Low: 50")
　　}
　　　　.padding()
　　}
}

ContentViewをDayForecastに変更したものを作って

struct ContentView: View {
    var body: some View {
        HStack {
           
            DayForecast()
            
            VStack {    
                Text("Tue")         
                Image(systemName: "cloud.rain.fill")
                    .foregroundStyle(Color.blue)       
                Text("High: 60")        
                Text("Low: 40")
            }
            .padding()
        }
    }
}


struct DayForecast: View {
    var body: some View {  
            VStack {    
                Text("Mon")
                Image(systemName: "sun.max")
                    .foregroundColor(.yellow)
                Text("High: 70")
                Text("Low: 50") 
            }
            .padding()
      
    }
}

新しいコードを一番したに配置してContentViewの中には"DayForecast()"を配置します。"DayForecast()"は同じコードなので同じように表示されます。

ContentViewの中のもう一つも"DayForecast()"にします。これで別で定義したものを使ってContentViewの中シンプルになりました。

全体は

struct ContentView: View {
    var body: some View {
        HStack {
           
            DayForecast()
            
            DayForecast()
        }
    }
}


struct DayForecast: View {
    var body: some View {  
            VStack {    
                Text("Mon")
                Image(systemName: "sun.max")
                    .foregroundColor(.yellow)
                Text("High: 70")
                Text("Low: 50") 
            }
            .padding()
      
    }
}

Generalize the day with a property

新しく作ったDayForecast()をカスタマイズしていきます。

let day: String　　　　→ 　　let  変数名: 変数の型となっています

を追加して

Text("Mon")　　　　→ 　　　Text(day)　

としてやります。

struct DayForecast: View {

    let day: String

    var body: some View {  
            VStack {    
                Text(day)
                Image(systemName: "sun.max")
                    .foregroundColor(.yellow)
                Text("High: 70")
                Text("Low: 50") 
            }
            .padding()
    }
}

ContentView()を追加した変数を適応できるように修正します。

DayForecast(day: "Mon")　と　DayForecast(day: "Tue")

struct ContentView: View {
    var body: some View {
        HStack {
           
            DayForecast(day: "Mon")
            
            DayForecast(day: "Tue")
        }
    }
}

プレビューでは

となります。