2013/08/21更新

[XCODE] UITextFieldでパディングを持たせる方法

このエントリーをはてなブックマークに追加      

こんにちは、@yoheiMuneです。
UITextFieldを普通に使うと、左側に余白とかがなくてちょっと使いづらい場合も。。 今回はそんな問題を解決する為に、UITextFieldに余白を持たせる実装方法をブログに書きたいと思います。

画像



普通にUITextFieldを使うと

普通にUITextFieldを使うと、例えば以下のような表示になります。
画像 画像 角丸のスタイルを指定すれば余白もいい感じに取ってくれるのですが、それ以外のスタイルを選ぶと余白が無かったりします。 (角丸の場合はインセットシャドウがきついとか好みに合わず、スタイルなしのUITextFiledにせざる得ないとかある)。
その場合に余白を設定したいというのが今回の内容です。



UITextFieldの左側に任意のサイズの余白を設定する

UITextFieldの左側に余白を設定するのは簡単で、UITextFieldの機能を使うことで実現できます。 UITextFieldには、leftViewとrightViewというものを設定できて、それを用いて余白を設定します。
例えば以下の例では、5pxの余白を左側に指定しています。
UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
// 余白用のViewを作って、leftViewに設定します。
UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 5, 5)];
paddingView.opaque = NO;
paddingView.backgroundColor = [UIColor clearColor];
textField.leftView = paddingView;
// keftViewは常に表示されるように設定します。
textField.leftViewMode = UITextFieldViewModeAlways;
こんな感じでUITextFieldのleftViewに透明なUIViewを指定することで、余白を作成しました。
なおleftViewはそのままではTextFieldの上に居てタップイベントとか受け付けないので、 余白部分をタップしてもテキストエリアが編集できません。
余白を大きく取る場合とかは、leftViewにUITapGestureRecognizerなどを使ってタップイベントを貼り、 UITextFieldの編集が出来るように実装する必要があるかもしれません。



最後に

簡単でしたが、UITextFieldに余白を持たせる方法の実装内容の紹介でした。 あまり日本語記事が無かったので今回ブログに書いてみました。

最後までご覧頂きましてありがとうございました。





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。