web-dev-qa-db-ja.com

カスタムUITextField

この画像のようなUITextFieldを作成するにはどうすればよいですか？

enter image description here

特に高さが少し大きいようです。

iphoneuitextfield
20
Alex Stuckey

おそらく、backgroundのborderStyleプロパティとUITextFieldプロパティを使用することをお勧めします。 borderStyleをUITextBorderStyleNoneとして設定し、ストレッチしてbackgroundプロパティとして使用するカスタム背景画像を作成するのも1つの方法です。

ITextFieldクラスリファレンス でこれらのプロパティを確認することをお勧めします。

20
Ben Cochran

これは、ストレッチ可能な画像を使用すると、はるかに優れた簡単な方法で実行できます。

    UIImage *fieldBGImage = [[UIImage imageNamed:@"input.png"] stretchableImageWithLeftCapWidth:20 topCapHeight:20];
    [myUITextField setBackground:fieldBGImage];

テキストフィールドの背景は、3つのセクションに分かれていると考えてください。伸ばすことができる中央のセクションと両端にキャップ。この繰り返しセクションの1ピクセル（非常に短いテキストフィールド）を含むのに十分な長さで十分な長さの画像を作成し、stretchableImageWithLeftCapWidth: topCapHeightを使用してそこからストレッチ可能な画像を作成します。左エンドキャップの幅を「leftCapWidth」に渡します。垂直方向に引き伸ばすこともできますが、背景画像がテキストボックスと同じ高さである場合、効果はありません。

FlashまたはIllustratorでの9スライスのスケーリングに精通している場合は、中央のセクションの幅/高さが1ピクセルしかないことを除いて、まったく同じ概念です。

これの利点は、複数のレイヤー化されたオブジェクトが一緒にスケーリングすることを心配する必要がなく、テキストフィールドのサイズをいつでも変更でき、背景がそのまま残ることです。他の要素でも機能します！

30
Anthony Mattox

あなたはこれを行うことができます：

yourTextField.borderStyle = UITextBorderStyleNone;

yourTextField.background = [UIImage imageNamed:@"email-input.png"];

また、テキストフィールド内のテキストにマージンを与えたい場合は、次の方法でこれを行うことができます。

// Setting Text Field Margins to display the user entered text Properly

UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 5, 20)];

yourTextField.leftView = paddingView;
yourTextField.leftViewMode = UITextFieldViewModeAlways;
17
Jamal Zafar

InterfaceBuilderを介してこれを行うこともできます。

Through Interface Builder

7
skwashua

Uiimageviewを取得し、そのimageプロパティをuitextfieldの背景として必要な画像に設定します。そして、このuiimageviewの上に、borderstylenoneのuitextfieldを配置します。これは、InterfaceBuilderで直接行うことができます。

2
user574089

次の行を使用するだけで機能するはずです

textfield_name.background = [UIImage imageNamed：@ "yourImage.png"];

ここで、「yourImage」は設定したい背景画像です...

ただし、これはボタンがroundrectボタンでない場合にのみ機能します。したがって、Interface Builderでボタンのタイプを変更するか、を使用することができます。

textfield_name.borderstyle = UITextBorderStyleNoneまたはUITextBorderStyleBezel

そして、あなたはgud2go ....！

2
mayuur