浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【Objective-C】UITextFieldに下線を引く方法

今回は、Objective-CUITextField に下線を引く方法についてのご紹介です。
マテリアルデザインでよくある、入力欄の下に線が引いてあるデザインを実装する時に使います。
実装にあたり、調査した際、Swift の記事ばかりがヒットして、なかなか Objective-C で書かれている方法を見つけられなかったので、私の備忘録も兼ねてまとめます。

実装にあたり、参考にさせていただいた記事はこちらです。

【Swift3】UITextFiledのborderを下線のみにする方法 – Qiita
https://qiita.com/Simmon/items/5f8aae6b23e3c82cb735

タイトルから分かるように、Swift で書かれていますが、こちらを Objective-C に書き直していきます。

 

サンプルコードはこちら。
なお、Storyboard は使用せず、全てコードで実装しています。

// UITextField の設定
UITextField textField = [[UITextField alloc] init];
textField.frame = CGRectMake(20, 20, 100, 10);

// 下線の設定
CALayer *border = [[CALayer alloc] init];
border.frame = CGRectMake(0, 10, 100, 1);
border.borderColor = [UIColor blackColor].CGColor;
border.borderWidth = 1.0;

// 下線を UITextField に追加
[textField.layer addSublayer: border];
// UITextField を View に追加
[self.view addSubview: textField];

コメントもあるので分かると思いますが、まず、2〜3行目で UITextField の設定を行います。
サイズは 横 100 × 縦 10 で、画面左上から、右と下に 20 ずつ下がった場所に配置するようにしています。

次に 6〜9行目で、UITextField の下に引く border の設定を行います。
下線の幅は 100 で、線の太さは 1 です。
線の幅は UITextField と合わせています。
また、下線なので、TextField の高さの 50 だけ下に下げています。
線の色は黒にしましたが、場合によってはグレーなど少し薄くした方がそれっぽいかもしれません。

で、12行目で、borderUITextField のレイヤーに追加し、13行目で UITextField 自体を View に追加しています。

実装に必要なのは以上です。
線の色や太さなどは、適宜変更してください。

 

以上、Objective-C でUITextField に下線を引く方法でした。
ご参考になれば幸いです。

  • この記事いいね! (0)