Swiftをはじめよう！ 4

Swift.org

丸の中に画像が入りました。次に文字を追加してみましょう。文字は

 Text("Archery!")

を入れます。 Circle()の下に入れてみると、

var body: some View {
    Circle()

    Text("Archery!")
      
}

これで実行しても文字が表示されることはありません(モディファイアは外しています)。このように2つの部品をうまく表示させるために

VStack

が用意されています。早速使って実行してみます。

VStack {
    Circle()
        .fill(.blue)
        .padding()
        .overlay(
            Image(systemName: "figure.archery")
                .font(.system(size: 144))
                .foregroundColor(.white)
        )

    Text("Archery!")
        .font(.title)
}

これで実行するとうまく表示されました。イラスト入りの丸の下に文字が表示されています。さらにもう一つ"VStack"をつけて文字を追加します。

VStack {
    Text("Why not try…")
        .font(.largeTitle.bold())

    VStack {
        Circle()
            .fill(.blue)
            .padding()
            .overlay(
                Image(systemName: "figure.archery")
                    .font(.system(size: 144))
                    .foregroundColor(.white)
            )

        Text("Archery!")
            .font(.title)
    }
}

表示は

となりました。さらに機能をつけていきます。

Bringing it to life

"Archery"だけではなく他のスポーツも表示、提案できる形にしていきます。チュートリアルにある以下のスポーツをランダムに選んで提案できるようにしていきます。

 "Baseball", "Basketball", "Bowling", "Boxing", "Cricket", "Curling", "Fencing", "Golf", "Hiking", "Lacrosse", "Rugby", "Squash"

スポーツを選択で切るような仕組みを作っていきます。まずはたくさんあるスポーツをひとまとめに管理するため、"配列"を作って"変数"に代入します。

var activities = ["Archery", "Baseball", "Basketball", "Bowling", "Boxing", "Cricket", "Curling", "Fencing", "Golf", "Hiking", "Lacrosse", "Rugby", "Squash"]

"var"は変数を示す目印で、"activities"はこの変数の名前です。名前をつけていろんな操作をしていきます。

そして選んだものを入れておく変数を作っておきま。

 var selected = "Archery"

今の段階では"Archery"を入れておきます。

次にこの変数を使えるような仕組みを作っていきます。

表示する文字には

Text("Archery!")　　→ 　Text("\(selected)!")

"\(selected)!"に中身を変更します。文字の中に変数を入れる場合には

"\(変数名)"

とします。画像も変えたいので画像を表示するコードも変更します。

Image(systemName: "figure.archery")  　　→
Image(systemName: "figure.\(selected.lowercased())")

"selected.lowercased()"とすると選んだものを小文字に変換して表示することが出来ます。例えばBaseballを選んだ場合

Baseball　　→ 　　baseball

となるので、

Image(systemName: "figure.baseball") 

という解釈になります。これで変数を使って文字の変更ができるしくみが出来ました。