web-dev-qa-db-ja.com

iOS7のUITextfield leftView / rightViewパディング

IOS7のUITextFieldのleftViewビューとrightViewビューは、テキストフィールドの境界線に非常に近いです。

これらのアイテムに（水平）パディングを追加するにはどうすればよいですか？

フレームを変更しようとしましたが、動作しませんでした

uint padding = 10;//padding for iOS7
UIImageView * iconImageView = [[UIImageView alloc] initWithImage:iconImage];    
iconImageView.frame = CGRectMake(0 + padding, 0, 16, 16);
textField.leftView = iconImageView;

このように、テキストフィールドのテキストにパディングを追加することに興味がないことに注意してください ITextBorderStyleNoneでUITextFieldのパディングを設定

iosobjective-cuitextfield
85
subzero

自分でこれに取り組んでいて、このソリューションを使用していました：

- (CGRect) rightViewRectForBounds:(CGRect)bounds {

    CGRect textRect = [super rightViewRectForBounds:bounds];
    textRect.Origin.x -= 10;
    return textRect;
}

これにより、画像がiOS 7のEdgeに押し付けられるのではなく、右から10だけ移動します。

さらに、これはUITextFieldのサブクラスにあり、次の方法で作成できます。

  1. デフォルトのUITextFieldの代わりにNSObjectのサブクラスである新しいファイルを作成します

  2. - (id)initWithCoder:(NSCoder*)coderという名前の新しいメソッドを追加して、画像を設定します

    - (id)initWithCoder:(NSCoder*)coder {
    self = [super initWithCoder:coder];

    if (self) {

        self.clipsToBounds = YES;
        [self setRightViewMode:UITextFieldViewModeUnlessEditing];

        self.leftView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"textfield_edit_icon.png"]];
    }

    return self;
}

  3. #import <QuartzCore/QuartzCore.h>をインポートする必要がある場合があります

  4. 上記のrightViewRectForBoundsメソッドを追加します

  5. Interface Builderで、サブクラス化するTextFieldをクリックし、クラス属性をこの新しいサブクラスの名前に変更します

81
AngeloS

contentModeを利用するはるかに単純なソリューション：

    arrow = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"down_arrow"]];
    arrow.frame = CGRectMake(0.0, 0.0, arrow.image.size.width+10.0, arrow.image.size.height);
    arrow.contentMode = UIViewContentModeCenter;

    textField.rightView = arrow;
    textField.rightViewMode = UITextFieldViewModeAlways;

Swift 2では、

    let arrow = UIImageView(image: UIImage(named: "down_arrow"))
    arrow.frame = CGRectMake(0.0, 0.0, arrow.image.size.width+10.0, arrow.image.size.height);
    arrow.contentMode = UIViewContentMode.Center
    self.textField.rightView = arrow
    self.textField.rightViewMode = UITextFieldViewMode.Always

Swift 3では、

    let arrow = UIImageView(image: UIImage(named: "arrowDrop"))
    if let size = arrow.image?.size {
        arrow.frame = CGRect(x: 0.0, y: 0.0, width: size.width + 10.0, height: size.height)
    }
    arrow.contentMode = UIViewContentMode.center
    self.textField.rightView = arrow
    self.textField.rightViewMode = UITextFieldViewMode.always
162
TTillage

最も簡単な方法は、UIViewをleftView/righViewに追加し、ImageViewをUIViewに追加し、UIView内のImageViewの原点を好きな場所に調整することです。これは私にとって魅力的でした。数行のコードのみが必要です

UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 5, 26, 26)];
imgView.image = [UIImage imageNamed:@"img.png"];

UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 32, 32)];
[paddingView addSubview:imgView];
[txtField setLeftViewMode:UITextFieldViewModeAlways];
[txtField setLeftView:paddingView];
45
vishal dharankar

これはSwiftに最適です：

let imageView = UIImageView(image: UIImage(named: "image.png"))
imageView.contentMode = UIViewContentMode.Center
imageView.frame = CGRectMake(0.0, 0.0, imageView.image!.size.width + 20.0, imageView.image!.size.height)
textField.rightViewMode = UITextFieldViewMode.Always
textField.rightView = imageView
12
Andy

これは私のために働く

UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 10, 20)];
self.passwordTF.leftView = paddingView;
self.passwordTF.leftViewMode = UITextFieldViewModeAlways;

お役に立てば幸いです。

7
Ashu

このソリューションは、1行のコードで問題を解決するので気に入っています

myTextField.layer.sublayerTransform = CATransform3DMakeTranslation(10.0f, 0.0f, 0.0f);

注：QuartzCoreを1行に含めることを検討する場合は、..または2です。

5
Jordi Corominas

これを行う最良の方法は、UITextFieldのサブクラスを使用して.mファイルにクラスを作成することです。

  #import "CustomTextField.h"
  #import <QuartzCore/QuartzCore.h>
  @implementation CustomTextField


- (id)initWithCoder:(NSCoder*)coder 
 {
self = [super initWithCoder:coder];

if (self) {

    //self.clipsToBounds = YES;
    //[self setRightViewMode:UITextFieldViewModeUnlessEditing];

    self.leftView = [[UIView alloc] initWithFrame:CGRectMake(0, 0,15,46)];
    self.leftViewMode=UITextFieldViewModeAlways;
      }

return self;

}

これを行うことにより、ストーリーボードまたはxibに移動し、IDインスペクターをクリックして、UITextfieldをクラスオプションの独自の「CustomTextField」に置き換えます。

注：テキストフィールドの自動レイアウトでパディングを指定するだけの場合、アプリケーションは実行されず、空白の画面のみが表示されます。

3
Anuj Kumar Rai

どこかで見つけた...

UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 5, 20)];
paddingView.backgroundColor = [UIColor clearColor];
itemDescription.leftView = paddingView;
itemDescription.leftViewMode = UITextFieldViewModeAlways;

[self addSubview:itemDescription];
2
RegularExpression

私はこの問題を自分で抱えていましたが、最も簡単な解決策は、画像の両側にパディングを追加するように画像を修正することです！

Png画像を変更して、10ピクセルの透明なパディングを追加したところ、コーディングなしで正常に機能しました。

1
Richard

カスタムUITextFieldクラスを作成し、UITextFieldの代わりにそのクラスを使用します。オーバーライド-（CGRect）textRectForBounds：（CGRect）boundsで必要な四角形を設定します

例

- (CGRect)textRectForBounds:(CGRect)bounds{
     CGRect textRect = [super textRectForBounds:bounds];
     textRect.Origin.x += 10;
     textRect.size.width -= 10;
     return textRect;
}
1
Kedar
...
textField.rightView = UIImageView(image: ...)
textField.rightView?.contentMode = .top
textField.rightView?.bounds.size.height += 10
textField.rightViewMode = .always
...
0
Rafael Sachetto

1つのトリック：UIImageViewを含むUIViewをrightViewとしてUITextFieldに追加します。このUIViewはサイズを大きくする必要があり、UIImageViewをその左に配置します。そのため、右からスペースがパディングされます。

// Add a UIImageView to UIView and now this UIView to UITextField - txtFieldDate
UIView *viewRightIntxtFieldDate = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 20, 30)]; 
// (Height of UITextField is 30px so height of viewRightIntxtFieldDate = 30px)
UIImageView *imgViewCalendar = [[UIImageView alloc] initWithFrame:CGRectMake(0, 10, 10, 10)];
[imgViewCalendar setImage:[UIImage imageNamed:@"calendar_icon.png"]];
[viewRightIntxtFieldDate addSubview:imgViewCalendar];
txtFieldDate.rightViewMode = UITextFieldViewModeAlways;
txtFieldDate.rightView = viewRightIntxtFieldDate;
0
Suraj Mirajkar

以下に示すように、ViewControllerクラスにカスタムメソッドを作成しました。

- (void) modifyTextField:(UITextField *)textField
{
    // Prepare the imageView with the required image
    uint padding = 10;//padding for iOS7
    UIImageView * iconImageView = [[UIImageView alloc] initWithImage:iconImage];    
    iconImageView.frame = CGRectMake(0 + padding, 0, 16, 16);

    // Set the imageView to the left of the given text field.
    textField.leftView = iconImageView;
    textField.leftViewMode = UITextFieldViewModeAlways;
}

これで、そのメソッド（viewDidLoadメソッド）を呼び出してTextFieldsをそのメソッドに送信し、右と左の両方にパディングを追加し、コードを1行書くだけでテキストと背景色を指定できます。 、 次のように：

[self modifyTextField:self.firstNameTxtFld];

これはiOS 7で完全に機能しました！これがiOS 8と9でも動作することを願っています！

ビューの追加が多すぎると、ロードするオブジェクトが少し重くなることがあります。しかし、他のソリューションの難しさを心配するとき、私はこの方法にもっと偏っており、この方法を使用することでより柔軟であることに気づきました。 ;）

この答えが他の誰かの別の解決策を見つけるのに役立つか、役に立つかもしれません。

乾杯！

0
Randika Vishman

簡単なアプローチ：

textField.rightViewMode = .always
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 25, height: 15))
textField.contentMode = .scaleAspectFit
imageView = UIImage(named: "imageName")
textField.rightView = imageView

注：水平方向のパディングを許可するには、高さを幅より小さくする必要があります。

0
Mukesh Shakya

swift2の場合、私は

...
        self.mSearchTextField.leftViewMode = UITextFieldViewMode.Always
        let searchImg = UIImageView(image: UIImage(named: "search.png"))
        let size = self.mSearchTextField.frame.height
        searchImg.frame = CGRectMake(0, 0, size,size)
        searchImg.contentMode = UIViewContentMode.ScaleAspectFit
        self.mSearchTextField.leftView = searchImg
...
0
Haiyuan

最も簡単な方法は、TextfieldをCustomではなくRoundRectに変更し、魔法を見るだけです。 :)

0
Shilpa

1つの解決策を次に示します。

 UIView *paddingTxtfieldView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 20, 42)]; // what ever you want 
 txtfield.leftView = paddingTxtfieldView;
 txtfield.leftViewMode = UITextFieldViewModeAlways;
0
Dev Patel

LeftViewとしてUIImageViewを使用している場合、このコードを使用する必要があります。

注意：viewWillAppearまたはviewDidAppear内では使用しないでください

-(UIView*)paddingViewWithImage:(UIImageView*)imageView andPadding:(float)padding
{
    float height = CGRectGetHeight(imageView.frame);
    float width =  CGRectGetWidth(imageView.frame) + padding;

    UIView *paddingView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, height)];

    [paddingView addSubview:imageView];

    return paddingView;
}
0
Xeieshan

答えてくれてありがとう、驚いたことに、どれも私のテキストフィールドに正しいビューの画像を実際に適合させずに、必要なパディングを提供していました。その後、AspectFillモードを使用することを考え、奇跡が起こりました。将来の求職者のために、私が使用したものは次のとおりです。

UIImageView *emailRightView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 35, 35)];
emailRightView.contentMode = UIViewContentModeScaleAspectFill;
emailRightView.image = [UIImage imageNamed:@"icon_email.png"];
emailTextfield.rightViewMode = UITextFieldViewModeAlways;
emailTextfield.rightView = emailRightView;

imageviewのフレーム内の35は、emailTextfieldの高さを表します。必要に応じて自由に調整してください。

0
carlos16196

以下の例は、偶然アイコンである左ビューに水平パディングを追加するためのものです-テキストフィールドの左ビューとして使用したいUIViewにパディングを追加するための同様のアプローチを使用できます。

Inside UITextField subclass：

static CGFloat const kLeftViewHorizontalPadding = 10.0f;

@implementation TextFieldWithLeftIcon
{
  UIImage *_image;
  UIImageView *_imageView;
}

- (instancetype)initWithFrame:(CGRect)frame image:(UIImage *)image
{
  self = [super initWithFrame:frame];
  if (self) {
    if (image) {
      _image = image;
      _imageView = [[UIImageView alloc] initWithImage:image];
      _imageView.contentMode = UIViewContentModeCenter;
      self.leftViewMode = UITextFieldViewModeAlways;
      self.leftView = _imageView;
    }
  }
  return self;
}

#pragma mark - Layout 

- (CGRect)leftViewRectForBounds:(CGRect)bounds
{
  CGFloat widthWithPadding = _image.size.width + kLeftViewHorizontalPadding * 2.0f;
  return CGRectMake(0, 0, widthWithPadding, CGRectGetHeight(bounds));
}

ここではUITextFieldをサブクラス化していますが、これが最もクリーンなアプローチだと思います。

0
Zorayr
- (CGRect)rightViewRectForBounds:(CGRect)bounds
{
    return CGRectMake(bounds.size.width - 40, 0, 40, bounds.size.height);
}
0
carmen_munich

ImageViewまたはimageを操作する代わりに、rightViewのAppleによって提供されるメソッドをオーバーライドできます。

class CustomTextField : UITextField { 

override func rightViewRect(forBounds bounds: CGRect) -> CGRect {
    let offset = 5
    let width  = 20
    let height = width
    let x = Int(bounds.width) - width - offset
    let y = offset
    let rightViewBounds = CGRect(x: x, y: y, width: width, height: height)
    return rightViewBounds
}}

また、同じ方法で左ビューの以下のfuncをオーバーライドできます。

override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
    /*return as per requirement*/

}
0
Pranav Gupta