【Xcode/Swift】TextField内の入力文字数をリアルタイムで反映させて表示する

今回はRxSwiftというライブラリを使って実装します。

非同期処理がシンプルに書けるものらしいですがまだまだ自分は勉強し始めなので理解できている部分が少ないです(泣)

Contents 非表示

プロジェクト作成 & 下準備
ビルドをして確認
まとめ

プロジェクト作成 & 下準備

Storyboard

RxSwiftのインストール

参考GitHub – ReactiveX/RxSwift: Reactive Programming in SwiftGitHub

pod 'RxSwift', '6.5.0'
pod 'RxCocoa', '6.5.0'

コードの記述

コード全体

import UIKit
import RxSwift
import RxCocoa

class SimpleRxTapViewController: UIViewController {
    
    @IBOutlet private weak var nameField: UITextField!
    @IBOutlet private weak var nameLabel: UILabel!
    @IBOutlet private weak var addressField: UITextField!
    @IBOutlet private weak var addressLabel: UILabel!
    
    //名前フィールドの上限文字数
    private let maxNameFieldSize = 10
    //住所フィールドの上限文字数
    private let maxAddressFieldSize = 50
    
    let limitText: (Int) -> String = {
        return "あと\($0)文字"
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupTextField()
    }
    
    //TextFieldの初期設定
    private func setupTextField() {
        nameField.addTarget(self, action: #selector(nameFieldEditingChanged(sender:)), for: .editingChanged)
        addressField.addTarget(self, action: #selector(addressFieldEditingChanged(sender:)), for: .editingChanged)
    }
    
    //"あと何文字"の部分をリアルタイムで検知して値を変更する
    @objc func nameFieldEditingChanged(sender: UITextField) {
        guard let changeText = sender.text else {return}
        let limitCount = maxNameFieldSize - changeText.count
        if limitCount < 1 {
            nameField.isEnabled = false
        }
        nameField.isEnabled = true
        nameLabel.text = limitText(limitCount)
    }
    //同上
    @objc func addressFieldEditingChanged(sender: UITextField) {
        guard let changeText = sender.text else {return}
        let limitCount = maxAddressFieldSize - changeText.count
        if limitCount < 1 {
            addressField.isEnabled = false
        }
        addressField.isEnabled = true
        addressLabel.text = limitText(limitCount)
    }
    
}