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

## はじめに：TextFieldのスタイル
UITexitFieldでは枠線のスタイルを4種類(none, line, bezel, round)の中から設定することができます
StoryBoardから指定する場合はAttributes Inspectorで変更：<img width="249" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224808/3fcd6b74-4421-a19f-5e24-4d201c71d1b7.png">
コードで指定する場合は`textField.borderStyle = .none`といったように記述します。


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

- none　<img width="173" alt="スクリーンショット 2019-09-23 11.50.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224808/3b8af452-6cf3-ffc8-584b-82a21aa5851b.png">

- line　<img width="173" alt="スクリーンショット 2019-09-23 11.51.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224808/f2a1a665-e166-3983-8a1f-ee4f7bb57a40.png">

- bezel　<img width="173" alt="スクリーンショット 2019-09-23 11.51.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224808/3d0cb7f8-b7bf-51c1-b6ac-42df37d70e44.png">

- round　<img width="173" alt="スクリーンショット 2019-09-23 11.51.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224808/95e26530-e115-6838-884d-65eb131a8a7e.png">

## 作りたいもの
noneにしておくと見た目的にはLabelチックにも扱えるので、普段はnoneで表示しておいて、入力状態の場合はスタイルをroundに変更するTextFieldを作ろうと思います。
![ezgif.com-video-to-gif (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224808/016f9910-e711-e61e-b982-d7f6d185115e.gif)

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

```Swift: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を置きます
<img width="675" alt="スクリーンショット 2019-09-23 12.20.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224808/4271a626-8a38-790d-389d-70c951d799fb.png">

TextFieldにCustom Classを当てます
<img width="253" alt="スクリーンショット 2019-09-23 12.21.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224808/abc922ac-f8ac-8819-083a-191c9656e56b.png">

ビルド通したら完了👍
![Simulator Screen Shot - iPhone 11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224808/5f582966-a88b-c02f-2336-23a962275062.png)