Swiftで身長と体重を入力したらBMIを計算できるアプリを作ってみました！
⬜完成後のコード
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var heightTextField: UITextField!
@IBOutlet weak var weightTextField: UITextField!
@IBOutlet weak var bmiLabel: UILabel!
@IBOutlet weak var resultLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
func calculateBMI(height: Double, weight: Double) -> Double {
return weight / (height * height)
}
func checkIfFat(bmi: Double) {
// 18.0以下の場合に "痩せています" と表示
// 18.0 ~ 25.0の場合に "健康な体型です" と表示
// 25.0以上の場合に "太っています" と表示
if bmi < 18.0 {
resultLabel.text = "痩せています"
} else if bmi > 18.0 && bmi < 25.0 {
resultLabel.text = "健康な体型です"
} else {
resultLabel.text = "太っています"
}
}
@IBAction func button_tapped(_ sender: Any) {
let heightText = heightTextField.text
let weightText = weightTextField.text
//どちらかがnilの場合はreturnしない⇨これ以上処理を実行しないことを保証
guard let height = heightText, let weight = weightText else {
return
}
if let heightDouble = Double(height), let weightDouble = Double(weight) {
let bmi = calculateBMI(height: heightDouble, weight: weightDouble)
bmiLabel.text = "BMI: \(Int(bmi))"
checkIfFat(bmi: bmi)
}
print(height, weight)
}
}
⬜︎内容
・XcodeとUIKitを用いたBMI計算アプリの作成
・入力した身長(メートルでの入力)と体重をもとに、BMIを計算して表示。表示されたBMIを基に太っているか痩せているかを判断してくれるテキストを表示するアプリ
⬜︎モチベーション
・textFieldとLabel、Buttonの理解を深めたかった
・基礎部分のおおよその理解が終わり、何かしら形にしたかった
参照：絶対に挫折しないiOS人気アプリ開発 セクション2：あなたは太っていますか？？計算してみよう
https://www.udemy.com/share/102kGq3@Be3ASQbmSv9l3oTgRZ7lGrtJwJRKpg90XJ96vefQVm9l7OhSv2CPWbQgVU6k79S7pw==/
⬜︎解説
STEP.1 プロジェクトの立ち上げ
Xcode立ち上げ後、上バーのFile→New→Fileを選択。
Appを選択後にNextをクリックし、Product Name:をBMICalculatorとする（好きな名前でも大丈夫です）
Nextをクリック後、今回は保存場所をDesktopに設定（お好みの場所で大丈夫です）
以下の画面が立ち上がれば立ち上げ準備は完了です。
今回はiPhone15 Proの画面を想定します。
STEP2：Main画面の設定
画面に文字を表示させるためのLabelを追加
右上のプラスボタンをクリック後、Labelと入力します。
①Lableをクリックしたまま以下の位置までドラッグし、配置します。
②右に表示されているバーのAttributes inspecotr部分のText部分で"BMIを計算してみよう"と入力します
すると、以下のようにLabelの表示がBMIを計算してみようと変更されます。
Titleの部分で入力した文字がそのままMain画面に表示されます。
身長と体重を入力するためのText Fieldの追加
次に、身長と体重を入力させるために、Text Fieldを追加します。
Labelを配置したサイト同じように好きな位置までドラッグし、配置します。
この際、値を入力しやすいようにText Fieldの横幅を広げておきます。
身長と体重を入力する２つのText Fieldが欲しいので、command + C → command + VでText Fieldを複製します。
①各Text FieldのAttributes inspectorのPlaceholderに任意の文字を入力すると、何かユーザーが入力する前にあらかじめ表示させておきたい文字を指定できるため、それぞれ"身長をmで入力","体重をkgで入力"とする。
②文字入力時に一括で文字を削除できるように、Clear ButtonをAppears While Editingに設定。
③入力中に鬱陶しくなりそうなので今回はText Input TraitsのCorrectionとSpell CheckingをNoに設定
＊②と③を身長と体重両方のText Fieldで適応させることを忘れないでください
この状態でcommand + R または左上の ▶︎ をクリックして実行してみると以下のように表示され、何か入力すると予め設定していた文字が消え、Clearボタンも表示されているはずです。
体重入力Text Fieldでも同じ結果になることを確認してください。
これだけでは入力された値を受け取れないため、ViewControllerクラスに値を受け取るための処理を書いていきます。
身長、体重入力TextFieldを、ViewControllerに紐付け
実際にText Fieldに入力された値を受け取れるようにするためには、ViewControllerとText Fieldを紐付けます。
VIewControllerは、名前の通り表示されるViewを管理・操作(表示・非表示・配置・アニメーションなど)をする役割を持つクラスです
Main画面の要素とViewControllerを紐付けたい場合は、紐付けたい要素を選択し、controlを押しながらclas ViewController: UIViewController { } 内までビヨーンとドラッグします。
すると以下のようにText Fieldに名前をつけてViewControllerと紐付けられるので、身長を入力するText FieldのName部分にheightTextFieldと入力しConnectをクリックします。
体重入力用のText Fieldも同様にcontrolを押しながらView Controllに紐付け、NameをweightTextFieldとしConnectをクリックすると、ViewControllerは以下のように表示されます。
また、要素が正確に紐づけられているとカーソルを◉に置いた際に紐づけられている要素を明示してくれるため、weightTextFieldも紐づけられているか確認してみてください。
これでText Fieldから値を受け取る準備は完了しました。
次に、受け取った値からBMIを計算するためのボタンを配置します。
BMIの計算をするボタンの配置
ボタンを押した際に、受け取った身長と体重からBMIを計算する処理を実行することがこのボタンの目的です。
まずButtonを丁度いい場所に配置し、Titleを "BMIを計算する" に変更します。
以下でBackgroundをグレーに、文字色を変更できるTint Color部分で文字色を白色に設定しました。
次にこのボタンにBMIが計算できる処理を持たせられるようにViewControllerと紐付けます。
BMIを計算するボタンをViewControllerクラスに紐付け
Text Fieldで紐づけた際と同様、button_tappedというNameでViewControllerに紐付けます。
この際、ボタンをクリックした際に何らかの動作を起こしたいのでConnection部分はActionとします。
Connectをクリック後、以下のようになっているはずです。
↓
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var heightTextField: UITextField!
@IBOutlet weak var weightTextField: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
//ここにボタンを押した際に実行したい処理を記述
@IBAction func button_tapped(_ sender: Any) {
}
}
以上の紐付けが完了することで、BMIを計算するボタンを押すと入力された身長と体重からBMIを算出させる処理を持たせることができるようになります。
これに加えて、BMIを表示させるためにLabelを配置して再度ViewControllerクラスと紐付けます。
↓
①Textを "ここにBMIが表示されます" と変更
②紐付け時、Nameを "bmiLabel" に設定
↓
紐付け後、以下のように表示されていたらOKです↓
STEP3：ボタンを押すとBMIを計算する処理
まずheightTextFieldとweightTextFieldに値を入力した際の処理を記述します。
@IBAction func button_tapped(_ sender: Any) {
let heightText = heightTextField.text
let weightText = weightTextField.text
//どちらかがnilの場合はreturnしない⇨これ以上処理を実行しないことを保証
guard let height = heightText, let weight = weightText else {
return
}
//以下のprintがあることで、実行時に値を受け取れているか確認可能
print(height, weight)
}
この状態で実行し、heightTextFieldとweightTextFieldに値を入力後にBMIを計算するボタンをクリックすることで、ログで値が受け取れていることを確認できます。
↓ ログに1.8と60の値が渡されていることを確認
BMI値を計算してくれる処理を作成
引数にDoubleを指定して、Doubleの結果を返してくれるように処理を書きます↓
func calculateBMI(height: Double, weight: Double) -> Double {
return weight / (height * height)
}
この時点で、button_tappedの中のheightとweightで受け取った値をDouble型に変換させる。
if let文を使うことで、Double型に変換できる値があることを保証させる↓
if let heightDouble = Double(height), let weightDouble = Double(weight) {
//ここで先ほどのcalculateBMIメソッドを使用。
let bmi = calculateBMI(height: heightDouble, weight: weightDouble)
//ログで確認用↓
print(bmi)
}
ViewController内の現時点での全体コード↓
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var heightTextField: UITextField!
@IBOutlet weak var weightTextField: UITextField!
@IBOutlet weak var bmiLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
}
func calculateBMI(height: Double, weight: Double) -> Double {
return weight / (height * height)
}
@IBAction func button_tapped(_ sender: Any) {
let heightText = heightTextField.text
let weightText = weightTextField.text
//どちらかがnilの場合はreturnしない⇨これ以上処理を実行しないことを保証
guard let height = heightText, let weight = weightText else {
return
}
if let heightDouble = Double(height), let weightDouble = Double(weight) {
let bmi = calculateBMI(height: heightDouble, weight: weightDouble)
print(bmi)
}
print(height, weight)
}
}
この状態で実行し、身長と体重を例えば以下のように入力しBMI計算ボタンをクリックすることで、ログに値を受け取ってBMIが計算されていることがわかります。
↓
↓BMI値を取得できたことが確認できました
LabelにBMI値を表示する処理
Labelに計算したBMI値が表示されるように、bmiLabelにbmiを表示させるように設定します↓
if let heightDouble = Double(height), let weightDouble = Double(weight) {
let bmi = calculateBMI(height: heightDouble, weight: weightDouble)
//print(bmi)を以下に書き換え↓
bmiLabel.text = "BMI: \(bmi)"
}
これで実行し、身長に1.8、60を入力して計算ボタンをクリックすると、"ここにBMIが表示されます"という表示が以下のようにBMIを計算して表示されていることが確認できます。
↓
小数点以下が長すぎるので、Double型をInt型にします。
そうすることで小数点以下が四捨五入されて表示させるようにします。
↓
//小数点以下を四捨五入するためInt型に変換↓
bmiLabel.text = "BMI: \(Int(bmi))"
}
再度同じ値で計算ボタンをクリックすると、小数点以下が四捨五入されてBMI値が表示されます。
↓
BMIを基に太っているか痩せているかを判断し表示させる処理
再度Labelを追加し、ViewControllerと紐付けます。
① NameをresultLabelと設定
② 結果が表示される前の表示を設定するため、Text部分を"あなたの体型は"と設定
↓
計算されたBMI値を基に、このLabelに太っているか痩せているか標準か表示させる処理をViewDidLoad内に書きます
↓
func checkIfFat(bmi: Double) {
// 18.0以下の場合に "痩せています" と表示
// 18.0 ~ 25.0の場合に "健康な体型です" と表示
// 25.0以上の場合に "太っています" と表示
if bmi < 18.0 {
resultLabel.text = "痩せています"
} else if bmi > 18.0 && bmi < 25.0 {
resultLabel.text = "健康な体型です"
} else {
resultLabel.text = "太っています"
}
}
以上を記述後、checkIfFat(bmi: bmi)をbutton_tapped内に記述することで計算したBMI値を基に体型を判断してくれます。
実行して、身長1.8、体重60で再度計算してみます
↓
BMIの計算が実行され、体系の判断もしてくれていることが確認できました。
試しに体重を40にして実行してみると、以下のように痩せていますと表示されていて条件分岐もできていることがわかります。
↓
おわりに
基礎部分の学習が終わり、簡単な応用としてLabelとButtonを用いたBMI計算機を作りました。
同じように作成できた方、またはこれを取り入れるとより良いなどアイディアを持たれた方は是非コメントいただけますと幸いです！！
ここまで読んでいただけた方はぜひいいねとストックよろしくお願いします:)