Swiftをはじめよう！ 3

次に"iOS and macOS Application"を試してみましょう！

題目として

Build an iOS app with SwiftUI

となっていまて、作るものは"WhyNotTry”

なぜ試さない？

というアプリ名になっています。なかなか面白いですね。でもほんとに試しに作ってみたら思った以上に簡単に出来てしまうとそう思えるかも。

Swift をより簡単に使えるようにしたものがSwiftUIです。フレームワークと呼ばれるもので、部品がいろいろ用意されていてそれをくっつけていけば完成します。

Xcodeを使って新規プロジェクトを作ります。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

最初からコードが書かれています。一旦全部削除します。

import SwiftUI

struct ContentView: View {
    var body: some View {
      
// ここに新しいコードを書きます。

    }
}

#Preview {
    ContentView()
}

最低限

var body: some View {

}

これは残します。消しすぎると動かなくなってしまいます。"{  }"も常に注意しないと閉じていない、場合などはエラーが出るので常にペアとなるようにします。

さて、そしたらまず、

 Text("Hello, SwiftUI!")

のみ書いてみます。プレビュー画面には

Hello, SwiftUI!

と表示されているはずです。もし

と出ていれば、赤丸部分をクリックするとプレビューが出ると思います。このプレビュー画面はコードを書き換えるとすぐに反映されるものとなっています。何か違う言葉を入れてもすぐに反映されると思います。

Building a static UI

このアプリでは、バスケットボール、ゴルフ、ハイキングなど、健康を維持するために試せる新しいアクティビティをユーザーに示します。 さらに、もう少し使いやすいように、アクティビティを表すアイコンを表示し、その後ろに色も追加します。

それでは実際のアプリの画面を作っていきます。部品を配置していく感覚です。

まず、"丸"を書きます。コードは

Circle()

これだけです。

ちょっといい感じにします。余白をつけて、色をつけてみます。

Circle()
    .fill(.blue)
    .padding()

.fill(.blue)
.padding()

をつけて実行します。

さらに画像を中に表示させます。画像に使うの"figure.archery"は文字として認識されるもので"SF Symbols"としてAppleが公開しているものです。文字と同じように使います。

 .overlay(
        Image(systemName: "figure.archery")
    )

を追加すると、真ん中になんだかちっちゃいものが表示されます。これではわかりにくいので大きく(144)して色(white)も指定します。

.font(.system(size: 144))
.foregroundColor(.white)

全体は

struct ContentView: View {
    var body: some View {
        
        Circle()
            .fill(.blue)
            .padding()
            .overlay(
                Image(systemName: "figure.archery")
                    .font(.system(size: 144))
                    .foregroundColor(.white)
            )    
    }
}

となります。

部品の設置とカスタマイズでした。"."の後に引き続き書いた命令を書いていろんな設定ができるようになっています。モディファイアと呼ばれて便利に使うことが出来ます。