【Swift】 UITextFieldの左側に余白を設ける


前置き

今回はほぼ前置きですが。

自作アプリもだいぶイメージができてきて、UITextFieldのplaceHolderにも文字を入れたりして、全体的な見た目を確認したりしてたんですが、どうも文字列が左端ぴったりに設定されて余白が全然ない感じがよろしくない。

↓の画面のようなイメージですね。

左端から少し余白を設けて(要はpadding)、見た目よくしたかったんですが、どうも調べてみるとUITextFieldのカスタムクラスを作って、textRect(forBounds bounds: CGRect)のような関数を設定する、といった手法ばっかりで、おおかた画面イメージも出来てきてるところに今からそんな修正を入れるのも正直面倒。
というわけで、もう少し調べてみると、さらっと解決できる方法がありました。

少し左側に余白ができているのがお分かりいただけると思います。

ソース

実装というより、おまじないのように書いていたある記述が悪さをしていただけ、というハナシなのですが。

ViewController.swift
        textField.borderStyle = .none
        textField.layer.cornerRadius = 5
        textField.layer.masksToBounds = true

UITextFieldの枠線の角に丸みを持たせるために、こういう書き方をしていたのですが、これの一番上の行、textField.borderStryle = .noneという記述があると、textField内の文字列が左にきっちり詰めた状態になるようです。
なので、対処としては、この1行を消してあげるだけです。
(上で画像を貼っているとおり、角の丸みの設定はきちんと残っています)

ViewController.swift
        // textField.borderStyle = .none
        textField.layer.cornerRadius = 5
        textField.layer.masksToBounds = true

もし同様の事象で対処法を探っている方がこれを読まれているのであれば、textField.borderStyle = .roundedRectように明示的に.borderStyleの設定を.none以外に変えてみるのは、対処の一つとして試してみてもよいかもしれません。

まとめ、ポイント

今回は何か新しいやり方を知った・気づいた、というより、「いつもこう書いてるから」という理由で盲目的にソースをコピペして必要な部分だけを書き換えるようなやり方をしていると、実はそのロジックが悪さをしていることに気づきにくい、という教訓を得た感じでした。