おそるおそるSwift 2-1 デンタッキー（電卓）を作る ~まずは形から~
Swift5+Xcode11.6
基本コンセプト
誰でも思いつくと思いますが、とりあえず「電卓」を作ってみようと思います。とはいえ、せっかくディスプレイがあるので、右の画像のように、できれば入力履歴が残るものにしたいと思います。まだ売ってるのか！と思いましたが、一部専門分野では、まだまだ重宝されているのでしょうね。
愛称は「デンタッキー」にしました。別に夕食がフライドチキンだったからってわけじゃあありませんよ・・・？
画面レイアウトを作成する
とりあえず、画面にボタンを敷き詰めてみます。コードは、contentView.swiftに書きました。長々とコードが並んでいますが、”var body: some View ”以下は、ライブラリボタン(fig1)からボタンをドラッグして、属性(fig2)を入力して一つ作り、それをコピペしただけです。
ボタン入力した結果を格納するための一次元配列inputArrayを用意し、ボタンが押されると、そのボタンの値が配列に加えられるようappendにしました。
それにしても、selfっていうのがいまだによくわからず面倒です。入力する必要があるときにはXcodeが注意してくれるのですが、どちらかというと入力させられている感があり、「そこまで自分でわかってるんだったら、省略されてくれてもいいじゃん」と言いたくなります。
import SwiftUI
struct ContentView: View {
@State var inputArray :[String] = [] //キーボード入力内容を格納
var body: some View {
VStack {
Text("結果表示部分")
.font(.largeTitle)
.fontWeight(.heavy)
.foregroundColor(Color.red)
.multilineTextAlignment(.trailing)
.frame(width: 300.0)
Spacer()
.frame(width: 1.0, height: 20.0)
HStack {
HStack {
Button(action: {
self.inputArray.append("7")
}) {
Text("7")
.frame(width: 50.0, height: 50.0)
.border(Color.black, width: 3)
}
Button(action: {
self.inputArray.append("8")
}) {
Text("8")
.frame(width: 50.0, height: 50.0)
.border(Color.black, width: 3)
}
Button(action: {
self.inputArray.append("9")
}) {
Text("9")
.frame(width: 50.0, height: 50.0)
.border(Color.black, width: 3)
}
}
Button(action: {
self.inputArray.append("+")
}) {
Text("+")
.frame(width: 50.0, height: 50.0)
.border(Color.black, width: 3)
}
}
Spacer()
.frame(width: 1.0, height: 12.0)
HStack {
HStack {
Button(action: {
self.inputArray.append("4")
}) {
Text("4")
.frame(width: 50.0, height: 50.0)
.border(Color.black, width: 3)
}
VStack {
Button(action: {
self.inputArray.append("5")
}) {
Text("5")
.frame(width: 50.0, height: 50.0)
.border(Color.black, width: 3)
}
}
Button(action: {
self.inputArray.append("6")
}) {
Text("6")
.frame(width: 50.0, height: 50.0)
.border(Color.black, width: 3)
}
}
Button(action: {
self.inputArray.append("-")
}) {
Text("-")
.frame(width: 50.0, height: 50.0)
.border(Color.black, width: 3)
}
}
Spacer()
.frame(width: 1.0, height: 12.0)
HStack {
HStack {
Button(action: {
self.inputArray.append("1")
}) {
Text("1")
.frame(width: 50.0, height: 50.0)
.border(Color.black, width: 3)
}
Button(action: {
self.inputArray.append("2")
}) {
Text("2")
.frame(width: 50.0, height: 50.0)
.border(Color.black, width: 3)
}
Button(action: {
self.inputArray.append("3")
}) {
Text("3")
.frame(width: 50.0, height: 50.0)
.border(Color.black, width: 3)
}
}
Button(action: {
self.inputArray.append("=")
}) {
Text("=")
.frame(width: 50.0, height: 50.0)
.border(Color.black, width: 3)
}
}
Spacer()
.frame(width: 1.0, height: 12.0)
HStack {
HStack {
Button(action: {
self.inputArray.append("0")
}) {
Text("0")
.frame(width: 50.0, height: 50.0)
.border(Color.black, width: 3)
}
Button(action: {self.inputArray.append("00")
}) {
Text("00")
.frame(width: 50.0, height: 50.0)
.border(Color.black, width: 3)
}
Button(action: {
self.inputArray.append(".")
}) {
Text(".")
.frame(width: 50.0, height: 50.0)
.border(Color.black, width: 3)
}
}
Button(action: {
self.inputArray.append("0")
}) {
Text("C")
.frame(width: 50.0, height: 50.0)
.border(Color.black, width: 3)
}
}
Spacer()
.frame(width: 1.0, height: 50.0)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
次回は
入力した結果を「結果表示部分」に出力してみます。