【Swift】TextFieldのスタイルを入力状態で変更する

はじめに：TextFieldのスタイル

UITexitFieldでは枠線のスタイルを4種類(none, line, bezel, round)の中から設定することができます
StoryBoardから指定する場合はAttributes Inspectorで変更：
コードで指定する場合はtextField.borderStyle = .noneといったように記述します。

それぞれの見た目は以下の感じ

• none　

• line　

• bezel　

• round　

作りたいもの

noneにしておくと見た目的にはLabelチックにも扱えるので、普段はnoneで表示しておいて、入力状態の場合はスタイルをroundに変更するTextFieldを作ろうと思います。

実装

EditingStyleChangeTextFieldというカスタムクラスを作成します。
UITextFieldDelegateを継承して、テキストフィールド編集でのイベントハンドリングができるようにします。

EditingStyleChangeTextField.swift

import UIKit

class EditingStyleChangeTextField: UITextField, UITextFieldDelegate {

    override func awakeFromNib() {
        self.delegate = self
        // 初期スタイルを指定
        self.borderStyle = .none
        self.backgroundColor = .clear
        self.textAlignment = .center
        self.returnKeyType = .done
        self.text = "Sample"
    }

    /// テキストフィールド入力状態後
    func textFieldDidBeginEditing(_ textField: UITextField) {
        // スタイルを編集中のものに変更
        self.borderStyle = .roundedRect
        self.backgroundColor = .white
    }

    /// リターンキー入力時
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        // キーボードを閉じる
        textField.resignFirstResponder()
        return true
    }

    /// フォーカスが外れる前
    func textFieldShouldEndEditing(_ textField: UITextField) -> Bool {
        // 入力チェック
        if(self.text == ""){
            self.backgroundColor = .red
            return false
        }
        else{
            return true
        }
    }

    /// フォーカスが外れた後
    func textFieldDidEndEditing(_ textField: UITextField) {
        // スタイルを元に戻す
        self.borderStyle = .none
        self.backgroundColor = .clear
    }
}

StoryBoardで適当にTextFieldを置きます

TextFieldにCustom Classを当てます

ビルド通したら完了👍