UITextFieldは汎用性の高いUIです。E-Mailアドレスや電話番号など一文以内で収まる短いテキストを入力することができます。
しかしながら、デフォルトのTextFieldは外観が非常にダサくシンプルなためデザインのカスタマイズが必要でしょう。
今回は実際にアプリ開発に用いたカスタマイズテクを備忘録代わりにまとめました。
高さを変更したい
Before
After
デフォルトのUITextFiledは、高さが小さくタップが非常にしにくいです。高さを変更するにはlayoutSubviews()をoverrideしてframeの高さを変更しましょう。
import UIKit
class CustomTextField: UITextField {
override func layoutSubviews() {
super.layoutSubviews()
self.frame.size.height = 50 // ここ変える
}
}
下線をつけたい
AndroidのMaterial Designからインスパイヤされているであろう,よくあるデザインを作ります。下線でテキスト入力ボックスであることを表現するデザインです。
まず、下線をつけるには下線を表現するUIViewを作成しTextFieldViewに追加します。
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)
}
}
これで、下線を追加することができました。しかし、このままだとデフォルトの枠が残ってしまい気持ち悪い感じになってしまいます。(語彙力)
これを解決するにはlayoutSubviews()内でself.borderStyle = .noneを追記します。
...
override func layoutSubviews() {
super.layoutSubviews()
self.frame.size.height = 50 // ここ変える
composeUnderline() // 下線のスタイルセットおよび追加処理
// 追記
self.borderStyle = .none
}
...
このように、気持ちの悪い枠線を消すことができました。
Placeholderを設定したい
上記のようなテキスト入力UIは主にログイン画面のE-mailアドレス入力などで使われる事が多いと思います。その場合、複数の入力要素がある場合が多いので"何を入力すべきか"を明示しなければなりません。そのためにPlaceholderが入力要素にはあります。
...
override func layoutSubviews() {
super.layoutSubviews()
self.frame.size.height = 50 // ここ変える
composeUnderline() // 下線のスタイルセットおよび追加処理
self.borderStyle = .none
self.placeholder = "example@example.com" // 追記
}
...
このようにPlaceholderを追加することができました。
今回の内容を再現した、簡単なiOSプロジェクトをGithubに置いて起きました。
今後、入力時エフェクトなども実装するので(多分)その時に内容を追加しようと思います。