今回は、Objective-C で UITextField に下線を引く方法についてのご紹介です。
マテリアルデザインでよくある、入力欄の下に線が引いてあるデザインを実装する時に使います。
実装にあたり、調査した際、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行目で、border を UITextField のレイヤーに追加し、13行目で UITextField 自体を View に追加しています。
実装に必要なのは以上です。
線の色や太さなどは、適宜変更してください。
以上、Objective-C でUITextField に下線を引く方法でした。
ご参考になれば幸いです。
