おそるおそるSwift 4-1 ハイローゲームを作る ~画面レイアウトを決める~

Swift5+Xcode11.6

目標

　カジノのポーカー等にあるHigh&Lowゲームを作ってみようと思います。作りながら機能を追加していく予定なので、完成形はまだ私にも分かりません（笑）さて、完成するでしょうか。

画面レイアウトを仮決めする

　とりあえず画面レイアウトを仮決めしてみます。なぞった程度で使いこなしていたわけでないのに言うのもなんですが、SwiftUI以前のStoryboard時代と比べると簡単にレイアウトできると思います。いろいろな画面サイズのデバイスに対応させるため、位置決めを相対座標で指定することになっているのだと推測しますが、その点が少し慣れが必要かも。
　そっけないデザインですが、最初にデザインに凝るといいことないので、まずは完動を目指します。

コードはほぼ自動

　一応コードを紹介しますが、ほぼ自動で生成されたものです。個人的にはスタイル設定がcssのように定義できれば、もっとスッキリするのにと思いますが、何かしら事情があるのでしょうね。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("High&Low Game!")
                .font(.largeTitle)
                .fontWeight(.heavy)
                .foregroundColor(Color.white)
                .background(Color.orange)
            Spacer()
            HStack {
                Spacer()
                Text("3回前")
                    .frame(width: 50.0)
                Text("2回前")
                    .frame(width: 50.0)
                Text("前回")
                    .frame(width: 50.0)
                Text("今回")
                    .font(.title)
                    .frame(width: 80.0)
                Spacer()
            }
            HStack {
                Spacer()
                Text("3")
                    .frame(width: 50.0)
                Text("2")
                    .frame(width: 50.0)
                Text("1")
                    .frame(width: 50.0)
                Text("?")
                    .font(.largeTitle)
                    .frame(width: 80.0)
                Spacer()
            }
                Spacer()
            HStack {
                Spacer()
                Button(action: {}) {
                    Text("High")
                        .font(.largeTitle)
                        .fontWeight(.bold)
                        .foregroundColor(Color.white)
                }
                .frame(width: 100.0)
                .background(Color.red)
                Spacer()
                Button(action: {}) {
                    Text("Low")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .foregroundColor(Color.white)
                }
                .frame(width: 100.0)
                .background(Color.blue)
                Spacer()
            }
            Spacer()
            Text("$1")
                .font(.largeTitle)
                .fontWeight(.black)
                .foregroundColor(Color.red)
            Spacer()
        }

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

次回は

　コードを組んでいきます。とりあえず、ボタンを押すたびに乱数を発生させて、それを配列に読み込んでいくといったあたりでしょうか。