1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[Swift]UITextViewに文字を入力中に、ラベル内の文字数表示を自動更新する

Last updated at Posted at 2021-02-05

##やりたいこと
UITextView内で文字を入力時に、リアルタイムでその文字数をラベル表示に反映する。(Twitterの投稿画面みたいな感じで。)

##実装の流れ

基本的な実装の考え方は以下になります

  • TextViewの内容が変わったときに
  • 文字数を取得し、その文字数でラベルの文字列を更新する

下記の流れで実装します。

  1. ViewControllerをUITextViewDelegateプロトコルに準拠させる。
  2. textViewDidChange(_ textView: UITextView) メソッドを追加する。
  3. textViewDidChange内で、memoTextViewの文字数を取得して、countLabelの文字列を更新する処理を記述する。

##実装方法

前提:下記の名前でIBOutletが作成されていること。
 文字入力するTextView → memoTextView
 文字数を表示するラベル → countLabel

せっかくなのでおまけで、

  • 140文字以内の場合、文字数をグレー表示
  • 140文字を超えている場合、文字数を赤文字表示
    としてみましょう。
RealtimeCountViewController.swift
class RealtimeCountViewController: UIViewController, UITextViewDelegate {
    
    @IBOutlet weak var memoTextView: UITextView!
    @IBOutlet weak var countLabel: UILabel!
    
    let maxCharacterCount = 140

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        memoTextView.delegate = self
    }
    
    //文字数カウント表示を更新する。
    func textViewDidChange(_ textView: UITextView) {
        countLabel.text = String(format: "%d/%d",textView.text.count, maxCharacterCount)
        
        if textView.text.count > maxCharacterCount {
            countLabel.textColor = .red
        } else {
            countLabel.textColor = .systemGray
        }
    }
}

##動作確認環境

下記2環境で動作を確認しました。

Xcode: 11.7
iOS: 13.7

Xcode: 12.4
iOS: 14.4

以上

1
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?