Frage UITextfield leftView / rightView-Füllung auf iOS7


Die Ansichten "leftView" und "rightView" eines UITextField auf iOS7 sind wirklich nahe am Textfeldrand.

Wie kann ich diesen Elementen eine (horizontale) Auffüllung hinzufügen?

Ich habe versucht, den Rahmen zu ändern, hat aber nicht funktioniert

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

Bitte beachten Sie, dass ich nicht daran interessiert bin, dem Text des Textfelds eine Auffüllung hinzuzufügen, so Setze Padding für UITextField mit UITextBorderStyleNone


75
2017-10-14 23:39


Ursprung


Antworten:


Arbeitete gerade selbst daran und nutzte diese Lösung:

- (CGRect) rightViewRectForBounds:(CGRect)bounds {

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

Dadurch wird das Bild von rechts um 10 verschoben, anstatt dass das Bild in iOS 7 gegen die Kante gedrückt wird.

Darüber hinaus war dies in einer Unterklasse von UITextField, die erstellt werden können durch:

  1. Erstellen Sie eine neue Datei, die eine Unterklasse von ist UITextField anstelle des Standards NSObject
  2. Fügen Sie eine neue benannte Methode hinzu - (id)initWithCoder:(NSCoder*)coder um das Bild einzustellen

    - (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. Möglicherweise müssen Sie importieren #import <QuartzCore/QuartzCore.h>

  4. Ergänzen Sie die rightViewRectForBounds Methode oben

  5. Klicken Sie im Interface Builder auf das TextField, das Sie unterklassieren möchten, und ändern Sie das Klassenattribut in den Namen dieser neuen Unterklasse


69
2017-10-15 04:10



Eine viel einfachere Lösung, die ausnutzt 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;

In 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

In 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

142
2018-06-24 13:53



Der einfachste Weg besteht darin, eine UIView zu leftView / righView hinzuzufügen und eine ImageView zu UIView hinzuzufügen, um den Ursprung von ImageView innerhalb von UIView beliebig anzupassen, was für mich wie ein Zauber wirkte. Es benötigt nur wenige Zeilen Code

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];

38
2018-06-27 11:48



Das funktioniert super für 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

11
2017-07-31 17:08



Das funktioniert für mich

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

Möge es dir helfen.


6
2017-08-01 04:57



Ich mag diese Lösung, weil sie das Problem mit einer einzelnen Codezeile löst

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

Hinweis: .. oder 2, wenn Sie eine Zeile mit QuartzCore in Betracht ziehen :)


4
2017-12-24 11:01



Der beste Weg, dies zu tun, ist einfach eine Klasse mit Unterklasse von UITextField und in .m-Datei

  #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;

}

indem du dies tust, gehe zu deinem Storyboard oder XIB und klicke auf Identity Inspector und ersetze UITextfield durch dein eigenes "CustomTextField" in der Klassenoption.

Hinweis: Wenn Sie einfach Padding mit automatischem Layout für Textfeld angeben, wird Ihre Anwendung nicht ausgeführt und nur ein leerer Bildschirm angezeigt.


3
2018-03-19 08:26



Ich habe das irgendwo gefunden ...

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

[self addSubview:itemDescription];

1
2017-10-14 23:45



Erstellen Sie eine benutzerdefinierte UITextField-Klasse und verwenden Sie diese Klasse anstelle von UITextField. Override - (CGRect) textRectForBounds: (CGRect) Grenzen, um das richtige rect zu setzen

Beispiel

- (CGRect)textRectForBounds:(CGRect)bounds{
     CGRect textRect = [super textRectForBounds:bounds];
     textRect.origin.x += 10;
     textRect.size.width -= 10;
     return textRect;
}

1
2017-10-15 00:23



Ich hatte dieses Problem selbst, und bei weitem die einfachste Lösung besteht darin, Ihr Bild so zu modifizieren, dass Sie einfach Padding auf jeder Seite des Bildes hinzufügen!

Ich habe gerade mein PNG-Bild geändert, um 10 Pixel transparentes Padding hinzuzufügen, und es funktioniert gut, ohne überhaupt Kodierung!


1
2017-08-13 21:11