デフォルトのUITextFieldが非常にダサい 〜 UITextFieldカスタマイズ 〜

UITextFieldは汎用性の高いUIです。E-Mailアドレスや電話番号など一文以内で収まる短いテキストを入力することができます。
しかしながら、デフォルトのTextFieldは外観が非常に~~ダサく~~シンプルなためデザインのカスタマイズが必要でしょう。
今回は実際にアプリ開発に用いたカスタマイズテクを備忘録代わりにまとめました。

## 高さを変更したい

**Before**
<img width="338" alt="Screen Shot 2018-09-01 at 3.18.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/44018/234fbbd4-c6e9-a38f-39ec-82c49843bab8.png">

**After**
<img width="341" alt="Screen Shot 2018-09-01 at 3.18.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/44018/f4747ec7-7780-86fa-9d83-f4cb2ad9941b.png">


デフォルトのUITextFiledは、高さが小さくタップが非常にしにくいです。高さを変更するには`layoutSubviews()`をoverrideしてframeの高さを変更しましょう。

```swift

import UIKit

class CustomTextField: UITextField {
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        self.frame.size.height = 50 // ここ変える       
    }
}
```


## 下線をつけたい
AndroidのMaterial Designからインスパイヤされているであろう,よくあるデザインを作ります。下線でテキスト入力ボックスであることを表現するデザインです。
まず、下線をつけるには下線を表現するUIViewを作成しTextFieldViewに追加します。

```swift
import UIKit

class CustomTextField: UITextField {
    
    // 下線用のUIViewを作っておく
    let underline: UIView = UIView()
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        self.frame.size.height = 50 // ここ変える
        
        composeUnderline() // 下線のスタイルセットおよび追加処理
    }
    
    private func composeUnderline() {
        self.underline.frame = CGRect(
            x: 0,                    // x, yの位置指定は親要素,
            y: self.frame.height,    // この場合はCustomTextFieldを基準にする
            width: self.frame.width,
            height: 2.5)
        
        self.underline.backgroundColor = UIColor(red:0.36, green:0.61, blue:0.93, alpha:1.0)
        
        self.addSubview(self.underline)
        self.bringSubviewToFront(self.underline)
    }
}

```

<img width="340" alt="Screen Shot 2018-09-01 at 10.13.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/44018/227f0983-0782-bc95-f3b9-dba8d5651889.png">


これで、下線を追加することができました。しかし、このままだとデフォルトの枠が残ってしまい気持ち悪い感じになってしまいます。(語彙力)
これを解決するにはlayoutSubviews()内で`self.borderStyle = .none`を追記します。

```swift
...
    override func layoutSubviews() {
        super.layoutSubviews()
        
        self.frame.size.height = 50 // ここ変える

        composeUnderline() // 下線のスタイルセットおよび追加処理     

        // 追記
        self.borderStyle = .none
    }
...
```

<img width="339" alt="Screen Shot 2018-09-01 at 10.17.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/44018/03fbffba-93eb-1243-f235-134d29912ac7.png">

このように、気持ちの悪い枠線を消すことができました。

## Placeholderを設定したい

上記のようなテキスト入力UIは主にログイン画面のE-mailアドレス入力などで使われる事が多いと思います。その場合、複数の入力要素がある場合が多いので**"何を入力すべきか"**を明示しなければなりません。そのために`Placeholder`が入力要素にはあります。

```swift
...
    override func layoutSubviews() {
        super.layoutSubviews()
        
        self.frame.size.height = 50 // ここ変える

        composeUnderline() // 下線のスタイルセットおよび追加処理     

        self.borderStyle = .none
        self.placeholder = "example@example.com"  // 追記
    }
...
```

<img width="336" alt="Screen Shot 2018-09-01 at 22.30.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/44018/988c8049-6ed0-6391-675e-07c1e30f163f.png">


このようにPlaceholderを追加することができました。


今回の内容を再現した、簡単なiOSプロジェクトを**[Github](https://github.com/shotastage/uitextfield-customization-example)**に置いて起きました。
今後、入力時エフェクトなども実装するので(多分)その時に内容を追加しようと思います。