search
LoginSignup
23

More than 3 years have passed since last update.

posted at

updated at

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

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

高さを変更したい

Before
Screen Shot 2018-09-01 at 3.18.39.png

After
Screen Shot 2018-09-01 at 3.18.52.png

デフォルトの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)
    }
}

Screen Shot 2018-09-01 at 10.13.58.png

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

...
    override func layoutSubviews() {
        super.layoutSubviews()

        self.frame.size.height = 50 // ここ変える

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

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

Screen Shot 2018-09-01 at 10.17.33.png

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

Placeholderを設定したい

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

...
    override func layoutSubviews() {
        super.layoutSubviews()

        self.frame.size.height = 50 // ここ変える

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

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

Screen Shot 2018-09-01 at 22.30.41.png

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

今回の内容を再現した、簡単なiOSプロジェクトをGithubに置いて起きました。
今後、入力時エフェクトなども実装するので(多分)その時に内容を追加しようと思います。

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
What you can do with signing up
23