Swift UITextFieldをコードで実装

6244 ワード
iOS UIKit UITextField Swift iOS テキストリンク

UITextFieldをコードで実装してみる

swiftというかアプリ開発の入門書をみるとstoryboardにviewをぺたぺたドラッグ＆ドロップするやり方ばっかですよね。
それでもいいんですがワンステップ上に上がりたい方のためにコード実装の仕方を記事にします。
まずは変数を定義しましょう。

let textField = UITextField()

この状態でビルドしても何も表示されません。
まあ、変数を宣言しただけなんで当たり前ですよね。
次に、ViewControllerのviewに入れましょう。

view.addSubview(textField)

これで追加できました。ビルドしてみましょう。

あれ？何も表示されませんね。
実はこれあるにはあるんですが幅も高さも０の状態なんです。
幅や高さを指定してあげましょう。

// .init(x軸方向の位置, y軸方向の位置, 幅, 高さ)
textField.frame = .init(x: 0, y: 0, width: 200, height: 40)
// 画面の真ん中に表示
textField.center = view.center

これで実行すると〜一見何もないように思えますが真ん中をタップすると編集できます。
placeholderも指定してあげましょう。

textField.placeholder = "ここに入力"

これでちゃんと表示されていることが確認できますね。
でも、枠も何もないのはわかりずらいですよね。てことで、枠を追加しましょう。

textField.layer.borderWidth = 1
textField.layer.borderColor = UIColor.black.cgColor


できましたね！
あとはもう少し見栄えをよくしましょう。

// 角を丸くする
textField.layer.cornerRadius = 5
// border線と文字が近すぎるから少し離す
textField.leftView = UIView(frame: .init(x: 0, y: 0, width: 5, height: 0))
textField.leftViewMode = .always

これでビルド！

いい感じに角も丸くなってボーダー線と文字の間にも隙間ができていますね。

textFieldのあれこれ

//勝手に英語のスペルを正しいのにする機能をoff
textField.autocorrectionType = .no
//勝手に英語の先頭の文字を大文字にするのをoff
textField.autocapitalizationType = .none
// fontサイズを変更
textField.font = .systemFont(ofSize: 18)
// textFieldを編集モードにする
textField.becomeFirstResponder()
// textFieldの編集モードを解除する
textField.resignFirstResponder()

やりたいことに応じてつかってみてください。
今回はここまでにします。
読んでくださりありがとうございます。