Swift5.1.2 Xcode11.2.1 SwiftUI

---

- 複数の計算を同時に行う関数計算アプリの作り方
- ルートや累乗、分数計算をSwiftで記述します
- 計算過程のプライバシー隠しカバーもおまけ実装

---

「以下は動画のハイライトです。」

同じ製品を扱う営業の方などある製品価格から複数の割引パターンなどを出す時、電卓を何度も打ち直すのは結構面倒です。またお客様の前では計算過程をサッと隠したいなどの要望もあります。

そんなご要望に応えるべく簡単な複数の関数計算を同時に行うアプリを作ってみました。四則計算の基本は第14回の動画でおさらいしましたので、ここではルートや累乗計算、分数計算などにも触れてみたいと思います。

例としては正方形、円、三角形の面積を求める関数を一つの入力値から同時に動かして三つの解答を得るようなアプリとなっております。この面積の関数の部分をお好みに変えて自分用にしてみてください。

まず、入力値と三種類の面積の結果を示す変数は以下です。

---

@State var input = ""
@State var circleArea = 0.0
@State var squareArea = 0.0
@State var triangleArea = 0.0

---

次にVStackで以下を配置します。

---

VStack {

SheetView(btnTitle: "Hide", showTrigger: true)

Form {
Section ( header: Text("Calculator")) {

TextField("Input", text: self.$input).keyboardType(.numberPad)
Spacer()

Button(action: {

var x = Double(self.input)!
self.squareArea = pow(x, 2)
self.circleArea = pow(x, 2) * Double.pi
self.triangleArea = sqrt(3.0) / 4 * pow(x, 2)

}) {
Text("Done")
}
Text("■ \(self.squareArea)㎡")
Text("● \(self.circleArea)㎡")
Text("▲ \(self.triangleArea)㎡")
}
}
}.font(.system(size: 40))
}

---

おまけの隠しカバーは以下のSheetViewです。

---

struct SheetView: View {
@State var btnTitle:String
@State var showTrigger = true
var body: some View {
VStack {
Button(self.btnTitle) {
self.showTrigger = true
}
}.sheet(isPresented: $showTrigger, onDismiss: {
print("sheet action")
}) {
HideView()
}
}
}


struct HideView: View {
var body: some View {
VStack {

Circle()
.fill()
.border(Color.black, width: 5)
}
.background(Color.black)
.gesture(
TapGesture()
.onEnded { _ in
UIApplication.shared.windows[0].rootViewController?.dismiss(animated: false, completion: {})
}
)
}
}

---

黒い画面をタップするとカバーが消えます。また上部の「Hide」のButtonを押すとまた黒い隠しカバーが現れます。

複数計算の肝になる箇所は以下です。

---

var x = Double(self.input)!

self.squareArea = pow(x, 2)
self.circleArea = pow(x, 2) * Double.pi
self.triangleArea = sqrt(3.0) / 4 * pow(x, 2)

---

FormのTextFieldに入力した値、self.inputをDoubleに変換しxの変数に代入します。それを三つの面積を求める計算式で利用して三つの解答を表示するようにします。

sqrtはルート、powは累乗、piは円周率など特殊な書き方がありますがこの辺は動画で解説させていただきます。


ソースコードはYouTubeのコメント欄に記載します。

目次へ戻る