UITextfield leftView / rightView-Auffüllung unter iOS7

Die Ansichten leftView und rightView eines UITextField unter iOS7 befinden sich sehr nahe am Textfeldrand.

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

Ich habe versucht, den Rahmen zu ändern, aber es hat 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, wie z. B. Auffüllen für UITextField mit UITextBorderStyleNone festlegen

Ich habe gerade selbst daran gearbeitet und diese Lösung verwendet:

- (CGRect) rightViewRectForBounds:(CGRect)bounds {

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

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

Darüber hinaus gehörte dies zu einer Unterklasse von UITextField, die erstellt werden kann durch:

1. Erstellen Sie eine neue Datei, die eine Unterklasse UITextFieldanstelle der Standarddatei istNSObject

2. Fügen Sie eine neue Methode mit dem Namen hinzu - (id)initWithCoder:(NSCoder*)coder, um das Bild festzulegen

   - (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. Fügen Sie die rightViewRectForBoundsobige Methode hinzu

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

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

Am einfachsten ist es, eine UIView zu leftView / righView hinzuzufügen und eine ImageView zu UIView hinzuzufügen. Passen Sie den Ursprung von ImageView in UIView an einer beliebigen Stelle an. Dies hat bei mir wie ein Zauber funktioniert. Es werden nur wenige Codezeilen benötigt

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

Dies funktioniert hervorragend 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

Das funktioniert bei mir

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

Möge es dir helfen.

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

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

Hinweis: .. oder 2, wenn Sie QuartzCore als Zeile einfügen möchten :)

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

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

}

Gehen Sie dazu zu Ihrem Storyboard oder xib, klicken Sie auf Identitätsinspektor und ersetzen Sie UITextfield durch Ihre eigene Option "CustomTextField" in der Klasse.

Hinweis: Wenn Sie einfach ein Auffüllen mit automatischem Layout für das Textfeld angeben, wird Ihre Anwendung nicht ausgeführt und zeigt nur einen leeren Bildschirm an.

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

Anstatt imageView oder image zu manipulieren, können wir eine von Apple für rightView bereitgestellte Methode überschreiben.

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
}}

und auf die gleiche Weise können wir unter func für die linke Ansicht überschreiben.

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

}

Swift 5

class CustomTextField: UITextField {
    func invalidate() {
        let errorImage =  UIImageView(image: UIImage(named: "errorImage"))
        errorImage.frame = CGRect(x: 8, y: 8, width: 16, height: 16)
        rightView = UIView(frame: CGRect(x: 0, y: 0, width: 32, height: 32))
        rightView?.addSubview(errorImage)
        rightViewMode = .always
    }
}

Du wirst wollen:

• Unterklasse UITextField
• Schreiben Sie eine ungültige Methode in das untergeordnete Textfeld
• Erstellen Sie bei der Methode zum Ungültigmachen ein UIView Bild , das größer als Ihr Bild ist
• Platzieren Sie Ihr Bild in der Ansicht
• Weisen Sie die Ansicht zu UITextField.rightView

Hier ist eine Lösung:

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

Erstellen Sie eine benutzerdefinierte UITextField-Klasse und verwenden Sie diese Klasse anstelle von UITextField. Override - (CGRect) textRectForBounds: (CGRect) Grenzen, um das benötigte Rect festzulegen

Beispiel

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

Das folgende Beispiel dient zum Hinzufügen eines horizontalen Auffüllens zu einer linken Ansicht, die zufällig ein Symbol ist. Sie können den ähnlichen Ansatz zum Hinzufügen eines Auffüllens zu einer beliebigen UIViewAnsicht verwenden, die Sie als linke Ansicht des Textfelds verwenden möchten.

Innerhalb der UITextFieldUnterklasse:

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));
}

Obwohl wir hier eine Unterklasse UITextFieldsind, glaube ich, dass dies der sauberste Ansatz ist.

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

Vielen Dank für Ihre Antworten. Zu meiner Überraschung passte keiner von ihnen wirklich das richtige Ansichtsbild in mein Textfeld und lieferte dennoch die erforderliche Polsterung. Dann dachte ich daran, den AspectFill-Modus zu verwenden, und es geschahen Wunder. Für zukünftige Suchende habe ich Folgendes verwendet:

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;

Die 35 im Rahmen meiner Bildansicht repräsentiert die Höhe meines E-Mail-Textfelds. Sie können es jederzeit an Ihre Bedürfnisse anpassen.

Ich habe dieses Problem selbst gehabt, und die bei weitem einfachste Lösung besteht darin, Ihr Bild so zu ändern, dass jeder Seite des Bildes einfach eine Auffüllung hinzugefügt wird!

Ich habe gerade mein PNG-Bild geändert, um 10 Pixel transparenten Abstand hinzuzufügen, und es funktioniert gut, ohne Codierung!

Wenn Sie eine UIImageView als leftView verwenden, müssen Sie diesen Code verwenden:

Achtung: Verwenden Sie nicht inside viewWillAppear oder 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;
}

Ich habe in meiner ViewController-Klasse eine benutzerdefinierte Methode erstellt, wie unten gezeigt:

- (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;
}

Jetzt kann ich diese Methode in ( viewDidLoadMethode) aufrufen und eine meiner TextFieldsMethoden an diese Methode senden und sowohl rechts als auch links Auffüllungen hinzufügen sowie Text- und Hintergrundfarben angeben, indem ich nur eine Codezeile wie folgt schreibe:

[self modifyTextField:self.firstNameTxtFld];

Dies funktionierte perfekt unter iOS 7! Hoffe das funktioniert auch unter iOS 8 und 9 noch!

Ich weiß, dass das Hinzufügen zu vieler Ansichten das Laden eines etwas schwereren Objekts erschwert. Als ich mir jedoch Sorgen über die Schwierigkeiten bei anderen Lösungen machte, war ich voreingenommener gegenüber dieser Methode und flexibler bei der Verwendung dieser Methode. ;)

Hoffe, diese Antwort könnte hilfreich oder nützlich sein, um eine andere Lösung für jemand anderen zu finden.

Prost!

Das funktioniert bei mir genauso wie ich es suche:

func addImageViewInsideMyTextField() {
    let someView = UIView(frame: CGRect(x: 0, y: 0, width: 40, height: 24))
    let imageView = UIImageView(image: UIImage(named: "accountImage"))
    imageView.frame = CGRect(x: 16, y: 0, width: 24, height: 24)
    imageView.contentMode = .scaleAspectFit
    someView.addSubview(imageView)

    self.myTextField.leftView = someView
    self.myTextField.leftViewMode = .always
}

Seit iOS 13 und Xcode 11 ist dies die einzige Lösung, die für uns funktioniert.

// Init of custom UITextField
override init(frame: CGRect) {
    super.init(frame: frame)

    if let size = myButton.imageView?.image?.size {
        myButton.frame = CGRect(x:0, y: 0, width: size.width, height: size.height)

        let padding: CGFloat = 5
        let container = UIView(frame: CGRect(x:0, y: 0, width: size.width + padding, height: size.height))
        container.addSubview(myButton)

        myButton.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            myButton.topAnchor.constraint(equalTo: container.topAnchor),
            myButton.leftAnchor.constraint(equalTo: container.leftAnchor),
            myButton.bottomAnchor.constraint(equalTo: container.bottomAnchor),
            myButton.rightAnchor.constraint(equalTo: container.rightAnchor, constant: -padding),
        ])

        textField.rightViewMode = .always
        textField.rightView = container
    }
}

// Setze die rechte Ansicht von UITextField, schnell 4.2TxtPass.rightViewMode = UITextField.ViewMode.always let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 18, height: 18)) imageView.contentMode = UIView.ContentMode.scaleAspectFit let image = UIImage(named: "hidepass") imageView.image = image let rightView = UIView(frame: CGRect(x: 0, y: 0, width: 28, height: 18)) rightView.addSubview(imageView) rightView.contentMode = UIView.ContentMode.left TxtPass.rightView = rightView

Ein Trick: Fügen Sie UITextField eine UIView mit UIImageView als rightView hinzu. Diese UIView muss größer sein. Platzieren Sie nun die UIImageView links davon. Es wird also eine Polsterung des Raums von rechts geben.

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

Am einfachsten ist es, das Textfeld als RoundRect anstelle von Custom zu ändern und die Magie zu sehen. :) :)

für Swift2 benutze ich

...
        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
...

...
textField.rightView = UIImageView(image: ...)
textField.rightView?.contentMode = .top
textField.rightView?.bounds.size.height += 10
textField.rightViewMode = .always
...

Einfacher Ansatz:

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

Hinweis: Die Höhe sollte kleiner als die Breite sein, um eine horizontale Polsterung zu ermöglichen.

Mir ist klar, dass dies ein alter Beitrag ist und diese Antwort etwas spezifisch für meinen Anwendungsfall ist, aber ich habe sie veröffentlicht, falls andere nach einer ähnlichen Lösung suchen. Ich möchte die leftView oder rightView eines UITextField verschieben, aber ich füge keine Bilder in sie ein und möchte keine fest codierten Konstanten.

In meiner Benutzeroberfläche muss die Schaltfläche zum Löschen des Textfelds ausgeblendet und eine UIActivityIndicatorView angezeigt werden, in der sich die Schaltfläche zum Löschen befand.

Ich füge dem einen Spinner hinzu rightView, aber nach dem Auspacken (unter iOS 13) wird er um 20 Pixel nach rechts verschoben clearButton. Ich verwende keine magischen Zahlen, da sich die Position von clearButton und rightView von Apple jederzeit ändern kann. Die Absicht des UI-Designs ist "Spinner, wo sich die Schaltfläche zum Löschen befindet". Meine Lösung bestand also darin, UITextField zu unterklassifizieren und zu überschreiben rightViewRect(forBounds).

override func rightViewRect(forBounds bounds: CGRect) -> CGRect {

    // Use clearButton's rectangle
    return self.clearButtonRect(forBounds: bounds)
}

Unten finden Sie ein Arbeitsbeispiel (ohne Storyboard):

//------------------------------------------------------------------------------
class myCustomTextField: UITextField {

    override func rightViewRect(forBounds bounds: CGRect) -> CGRect {

        // Use clearButton rectangle
        return self.clearButtonRect(forBounds: bounds)
    }
}

//------------------------------------------------------------------------------
class myViewController: UIViewController {

    var activityView: UIActivityIndicatorView = {
        let activity = UIActivityIndicatorView()
        activity.startAnimating()
        return activity
    }()

    @IBOutlet weak var searchTextField: myCustomTextField!

    //------------------------------------------------------------------------------
    // MARK: - Lifecycle
    //------------------------------------------------------------------------------
    override func viewDidLoad() {

        super.viewDidLoad()

        searchTextField.rightView = activityView
        searchTextField.rightViewMode = .never // Hide spinner
        searchTextField.clearButtonMode = .never // Hide clear button

        setupUIForTextEntry()
    }

    // ...
    // More code to switch between user text entry and "search progress" 
    // by calling setupUI... functions below
    // ...

    //------------------------------------------------------------------------------
    // MARK: - UI
    //------------------------------------------------------------------------------
    func setupUIForTextEntry() {

        // Hide spinner
        searchTextField.rightViewMode = .never

        // Show clear button
        searchTextField.clearButtonMode = .whileEditing
        searchTextField.becomeFirstResponder()
    }

    //------------------------------------------------------------------------------
    func setupUIForSearching() {

        // Show spinner
        searchTextField.rightViewMode = .always

        // Hide clear button
        searchTextField.clearButtonMode = .never
        searchTextField.resignFirstResponder()
    }

    //------------------------------------------------------------------------------

}

//------------------------------------------------------------------------------