【作って学ぶSwiftアプリ開発入門】ランダムでコインの裏表を表示するコイントスアプリを作ろう！

ミニアプリを作って楽しく学ぶSwift入門 第4回

コインを作る

　今回はアプリ中央にあるText("やる")の背面にViewを配置する方法でコインのような見た目を作っていきます。

Viewの背面にViewを配置する

　Viewの背面にViewを配置するには、.backgrooundモディファイアを使用します。まずは試しに背面に色を設定してみましょう。

　次のようにText("やる")に.backgroundモディファイアを追加します。

VStack(spacing: 32) {
    Text("やる")
        // ↓ここを追加
        .background {
            Color.yellow
        }
    Text("コインを投げる")
}

　文字の背面が黄色になっているのが確認できます。

　今回使用しているColorは、前回に文字色を指定したものと一緒です。このColorはViewとしても扱うことができます。

　少し文字が小さいので、このTextも.font(.largeTitle)にしておきましょう。

VStack(spacing: 32) {
    Text("やる")
        // ↓ここを追加
        .font(.largeTitle)
        .background {
            Color.yellow
        }
    Text("コインを投げる")
}

　Textが大きくなり、それに伴って背面の色も大きくなっているのが確認できます。

フレームの大きさを指定する

　背面に色を配置することはできましたが、これがコインのような形になったとしても少し大きさが小さすぎる気がします。そこで.frameモディファイアを使用します。このモディファイアはViewの高さや幅に対して大きさを指定できるもので、今回はText("やる")の高さと幅の大きさを指定します。

　次のようにコードを追加してください。

VStack(spacing: 32) {
    Text("やる")
        .font(.largeTitle)
        // ここを追加↓
        .frame(width: 160, height: 160)
        .background {
            Color.yellow
        }
    Text("コインを投げる")
}

　今回は高さと幅ともに160を指定したことで、背面が正方形になったことを確認できます。また、高さや幅に何も指定されていない場合は、元のViewの大きさを引き継ぎます。

円形のViewを作る

　現在、四角形の背面になっていますが、これを円形に変更していきます。SwiftUIでは、図形を表現するためにShapeが用意されており、CircleやCapsule、Rectangleなど、さまざまな形状を簡単に作成できます。これらの図形もViewとして扱えるため、他のViewと組み合わせて自由に見た目を調整できます。

　次のようにColor.yellowの部分をCircle()に変更します。

VStack(spacing: 32) {
    Text("やる")
        .font(.largeTitle)
        .frame(width: 160, height: 160)
        .background {
            // ここを変更↓
            Circle()
        }
    Text("コインを投げる")
}

　Circle()は文字通り、円の図形を作成できます。プレビューにも円が表示されました。やるというテキストが見えなくなっているのは、Circle()の色がTextのデフォルトと同じ色になっているためです。

Shapeに色を付ける

　黒塗りになってしまっているCircle()に色を付けていきます。Circle()のようなShapeに色を付けるには.fillモディファイアを使用します。

​​VStack(spacing: 32) {
    Text("やる")
        .font(.largeTitle)
        .frame(width: 160, height: 160)
        .background {
            Circle()
                // ここを変更↓
                .fill(.yellow)
        }
    Text("コインを投げる")
}

　黒く塗り潰された円が黄色くなり、やるという文字も見えるようになりました。

　これでコイン部分は完成です。

コイントスボタンを作る

　次はコイントスを実行するためのボタンを作ります。

　Text("コインを投げる")の部分を前回学んだButtonに変更します。その変更に合わせて、Textのfontも設定しました。

struct YesNoCoinTossView: View {
    var body: some View {
        VStack(spacing: 60) {
            Text("迷ったら時は\nコインで決めよう")
                .multilineTextAlignment(.center)
                .font(.largeTitle)
            
            VStack(spacing: 32) {
                Text("やる")
                    .font(.largeTitle)
                    .frame(width: 160, height: 160)
                    .background {
                        Circle()
                            .fill(.yellow)
                    }
                
                // ここを変更↓
                Button {
                    // コイントスの実装
                } label: {
                    Text("コインを投げる")
                           .font(.title)
                }
            }
        }
    }
}

　コインを投げるの色が青く変わり、Buttonになりました。実際にプレビュー画面上を触ってみて押せているようなアニメーションを感じることができます。まだ、Buttonのアクションを設定していないため、何も起こりません。

　前回は、次のような記述形式のButtonを使用しましたが、今回使用しているものでは、action:やlabel:が省略されているだけで機能は同じです。

Button(action: {
    
}, label: {
    
})