メルカリで商品を出品したことがある人ならご存知かと思いますが、販売価格を設定する際に任意の金額を入力すると、自動的(リアルタイム)に手数料と販売利益が算出されて、テキストに反映されるみたいなやつを見たことあるのではないかと思います。

なので今回はそれのやり方を書いていきたいと思います。

ではいきましょう！

はじめに

まず、storyBoardでこんな感じのを用意してください

本質的には、①ユーザーが実際に金額を入力する部分のTextField、②計算された手数料を反映させるUILabel、③計算された販売利益を反映させるUILabel　の三つが存在してるだけです。

まああとは、見栄えをよくするためにこの三つ全てのtextAlignを右寄せにすると良いと思います。

ではコードに移ります。

コード

まずは全体像からです。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var settingFeeTextField: UITextField! //入力する部分
    @IBOutlet weak var commissionLabel: UILabel! //手数料を算出する部分
    @IBOutlet weak var finalFeeLabel: UILabel! //最終的な収益を算出する部分
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        settingFeeTextField.keyboardType = .numberPad//数字のみ入力可にする
        
        NotificationCenter.default.addObserver(self, selector: ♯selector(textFieldDidChange(notification:)), name: UITextField.textDidChangeNotification, object: settingFeeTextField)
    }
    
    deinit {
        NotificationCenter.default.removeObserver(self)
    }
    
    @objc private func textFieldDidChange(notification:NSNotification){
        
        let textField = notification.object as! UITextField
       
        let toIntFeeTextField = Int(textField.text!)
        
        let ToZero = toIntFeeTextField ?? 0 

        let calculateCommission = ToZero / 10//10%の手数料
        
        commissionLabel.text = String(calculateCommission)
        
        finalFeeLabel.text = String(ToZero - calculateCommission)
        
        
    }

}

では簡単に解説していきます。

まずは、数字しか入力したくないので、キーボードタイプを数字のみに変更してます。

そして、TextFieldのイベントが発火したときの通知を受け取るために、NotificationCenterを設置しましょう。(※UITextFieldが独自に持つメソッドを用いても良いとおもいます。)

そしてそのメソッドの中で、計算をするためにString型をInt型に変更しましょう。

そしてまあ、後はそれらの計算結果をString型に再キャストして、反映するという感じです。

以上です！

(※ちなみに、テキストフィールドの値をnil結合で０を入れておかないと、値が1以下になった時エラーが出るので注意してください。あ、あと手数料はご自身で自由に設定されると良いと思います。)

完成品がこちら

最後に

お疲れ様でした