[iOSアプリ開発] チップ計算アプリ

iPhoneで動く「チップ計算アプリ」を作成してみませんか?

請求額、チップの割合(%)、分割する人数を入力すると、1人あたりの支払額を計算してくれるアプリです。

目次

概要

この講座で学習する内容
  • チップ計算アプリを作成

アプリを作成する過程で、以下の内容を学習できます。

  • UIStepperの使い方
  • segueを使った画面遷移
  • classのダウンキャスティング(as!
  • キーボード(シミュレーター)の閉じ方

参考にした講座】iOS & Swift – The Complete iOS App Development Bootcamp (Udemy)
 (Section12) Advanced Swift Programming Challenge

この講座で作成するアプリの概要
  • 請求額をUITextFieldに入力します。
  • チップ(割合)を3つのボタン(0%, 10%, 20%)から選択します。
  • 分割人数をUIStepperを利用して入力します。
  • 請求額、チップの割合、分割人数から1人あたりの支払額を計算して、その結果、基礎数値を次画面に送付します。
  • その値を受取り、次画面でその結果、計算基準を表示します。
  • Recalculateボタンを押すと、前画面に戻り、再計算が可能になります。
アプリの開発環境(2023年5月2日現在)
  • Xcode: Version 14.3
  • macOS: Venture: Version 13.3.1
  • iOS: 16.4.1
GitHubからプロジェクトを入手したい方はこちら
Xcodeのインストールが未了の方はこちら

UIの設定

開始プロジェクトをクローンして起動した状態を確認してみましょう。

開始プロジェクトの確認

開始プロジェクトの確認
  1. 2画面あります。1つ目の画面は、計算用で、UITextField、UIStepperがあります。
  2. 2つ目の画面は、計算結果の表示、再計算(Recalculate)ボタンがあります。

デザインとコードのリンク(1つ目の画面:CalculatorViewController)

(注)tipChanged(IBAction)は、0%,10%,20%のいずれのボタンともリンクしている。

続けて、ViewControllerを「CalculatorViewController」に一括名称変更した。

デザインとコードのリンク(2つ目の画面:ResultsViewController)

STEP
Cocoa Touch Classのファイル作成

名前は、「ResultsViewController」にする。
CalculatorViewControllerResultsViewControllerControllerフォルダに格納する。

STEP
2つ目の画面をResultsViewControllerクラスにリンクする
STEP
デザインとコードのリンク

各種ボタンの設定

STEP
押されたボタン(0%,10%,20%)が選択されたとき、選択された状態(色反転)にする

他のボタンは、選択が解除された状態にする。

@IBAction func tipChanged(_ sender: UIButton) {

//全て選択解除
    zeroPctButton.isSelected = false
    tenPctButton.isSelected = false
    twentyPctButton.isSelected = false

//選択されたボタンは選択状態
    sender.isSelected = true
}

.isSelected →選択されている

STEP
tipボタン(0%, 10%, 20%)の情報を数値変換して出力

例)20%を選択してCalculateボタンを押した時に、0.2が出力されるようにする。

ボタン(0%, 10%, 20%)の情報を数値変換して出力
var tip = 0.10

//選択したボタン 例)20%
let buttonTitle = sender.currentTitle! 

//最後の文字を外す 例)20%→20
let buttonTitleMinusPercentSign
    = String(buttonTitle.dropLast()) 

//数値(Double)に変換 例)20→20.0
let buttonTitleAsNumber
    = Double(buttonTitleMinusPercentSign)! 

//小数点表示に変換 例)20.0→0.2
tip = buttonTitleAsNumber / 100 

@IBAction func calculatePressed(_ sender: UIButton) {
    print(tip)
}

.dropLast() →最後の文字を外す

STEP
UIStepperの情報を出力

UIStepperで設定した数値を出力する。
①画面上のラベルに表示する。
②Calculateボタンを押した時にコンソール出力する。

UIStepperの情報を出力(ラベル+コンソール)
var numberOfPeople = 2

@IBAction func stepperValueChanged(_ sender: UIStepper) {

//①整数でラベル表示 例)6
    splitNumberLabel.text
        = String(format: "%.0f", sender.value) 
//整数表示に変換
    numberOfPeople = Int(sender.value) 
}

@IBAction func calculatePressed(_ sender: UIButton) {
//②コンソール出力 例)6
    print(numberOfPeople) 
}
STEP
tipボタンを押すとキーボードが閉じるようにする

TextFieldで請求額を入力後、tipボタン(0%,10%,20%)を押すとキーボードが閉じるようにします。

tipボタン押す→キーボードを閉じる
@IBAction func tipChanged(_ sender: UIButton) {     
    billTextField.endEditing(true)
}
TextFieldで請求額を入力
tipボタン(0%,10%,20%)を押すとキーボードが閉じる

(完成)計算結果を次画面に出力する

STEP
1人あたりの支払額をコンソール出力する

1人あたりの支払額 = 請求額 × (1 + tip割合)/ 人数

1人あたりの支払額計算
@IBAction func calculatePressed(_ sender: UIButton) {
    let bill = billTextField.text!
    if bill != "" {
        billTotal = Double(bill)!
        let result = billTotal * (1 + tip) 
            / Double(numberOfPeople)
        finalResult = String(format: "%.2f", result)
    }
    print(finalResult)
}
STEP
Segueの設定(次画面への遷移開始)
STEP
送る側、受取る側のコード入力

合わせて、画面表示を日本語表記に変更しています。

送る側(CalculatorViewController)

Xcodeで設定したIdentifier:「goToResults」と
performSegue関数内のwithIdentifier:「goToResults」を必ず一致させること。

prepareメソッドをoverrideして、計算結果を次画面へ送付しています。
as!を使用して、segue.destinationをResultsViewControllerにダウンキャスティングしています。

受取る側(ResultsViewController)

dismiss関数により、Recalculateボタンが押されると、全画面に戻ります。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次