Подтвердить что ты не робот

UITextfield leftView/rightView padding на iOS7

Представления leftView и rightView UITextField на iOS7 действительно близки к границе текстового поля.

Как добавить некоторые (горизонтальные) дополнения к этим элементам?

Я пробовал модифицировать фрейм, но не работал

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

Пожалуйста, обратите внимание, что мне не интересно добавлять дополнение к текстовому тексту, например Установить дополнение для UITextField с UITextBorderStyleNone

4b9b3361

ОТВЕТЫ

Ответ 1

Просто работал над этим сам и использовал это решение:

- (CGRect) rightViewRectForBounds:(CGRect)bounds {

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

Это приведет к перемещению изображения справа на 10 вместо того, чтобы изображение сжалось против края в iOS 7.

Кроме того, это было в подклассе UITextField, которое может быть создано:

  • Создайте новый файл подкласса UITextField вместо стандартного NSObject

  • Добавьте новый метод с именем - (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;
}

  • Вам может потребоваться импортировать #import <QuartzCore/QuartzCore.h>

  • Добавьте метод rightViewRectForBounds выше

  • В интерфейсе Builder щелкните на TextField, который вы хотите подклассы, и измените атрибут класса на имя этого нового подкласса

Ответ 2

Гораздо более простое решение, которое использует 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

В Свифте 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

Ответ 3

Самый простой способ - добавить UIView в leftView/righView и добавить ImageView в UIView, настроить источник ImageView внутри UIView в любом месте, это сработало для меня как шарм. Ему нужно всего несколько строк кода

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

Ответ 4

Это отлично работает для 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

Ответ 5

Это работает для меня

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

Пусть это поможет вам.

Ответ 6

Мне нравится это решение, потому что оно решает проблему с помощью одной строки кода

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

Примечание:.. или 2, если вы считаете включение QuartzCore в строку:)

Ответ 7

Лучший способ сделать это - просто создать класс, используя подкласс 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 и нажмите на инспектор удостоверений личности и замените UITextfield своим собственным "CustomTextField" в опции класса.

Примечание. Если вы просто передаете прописку с автоматическим макетом для текстового поля, ваше приложение не будет запускаться и отображать только пустой экран.

Ответ 8

Я нашел это где-то...

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

[self addSubview:itemDescription];

Ответ 9

Создайте пользовательский класс UITextField и используйте этот класс вместо UITextField. Override - (CGRect) textRectForBounds: (CGRect) ограничивает установку требуемого прямоугольника

Пример

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

Ответ 10

У меня была эта проблема сама, и на сегодняшний день самым простым решением является изменение вашего изображения, чтобы просто добавить дополнение к каждой стороне изображения!

Я просто изменил свой png-образ, чтобы добавить прозрачное дополнение 10 пикселей, и оно работает хорошо, без кодирования вообще!

Ответ 11

Вот одно из решений:

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

Ответ 12

Один трюк: добавьте UIView, содержащий UIImageView в UITextField, как rightView. Этот 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;

Ответ 13

Я создал собственный метод в моем классе 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 method) и отправить любой из моих TextFields этому методу и добавить отступы как справа, так и слева и дать цвета текста и фона, написав только одну строку кода, следующим образом:

[self modifyTextField:self.firstNameTxtFld];

Это отлично работает на iOS 7! Надеюсь, что это все еще работает и на IOS 8 и 9!

Я знаю, что добавление слишком большого количества представлений может сделать это более тяжелым объектом для загрузки. Но когда мы обеспокоены трудностью других решений, я оказался более предвзятым к этому методу и более гибким с использованием этого способа.;)

Надеюсь, что этот ответ может оказаться полезным или полезным для выяснения другого решения для кого-то другого.

Ура!

Ответ 14

Ниже приведен пример добавления горизонтальной проставки к левому представлению, которая является значком - вы можете использовать аналогичный подход для добавления дополнения к любому UIView, который вы хотели бы использовать в качестве поля слева в поле.

Внутри UITextField подкласс:

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 здесь, я считаю, что это самый чистый подход.

Ответ 15

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

Ответ 16

Благодарю вас, ребята, за ваши ответы, к моему удивлению, ни один из них не поместил подходящее изображение в мое текстовое поле, но при этом все же обеспечил необходимый отступ. то я подумал об использовании режима 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;

35 в кадре моего изображения представляют высоту моего поля электронной почты, не стесняйтесь приспосабливать его к вашим потребностям.

Ответ 17

Если вы используете UIImageView как leftView, вы должны использовать этот код:

Предостережение: не используйте внутри 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;
}

Ответ 18

Простой код в Swift:

let paddleView:UIView = UIView(frame: CGRect(x:0, y:0, width:8, height:20));
uiTextField.leftView = paddleView;
uiTextField.leftViewMode = UITextFieldViewMode.Always;

Ответ 19

Самый простой способ - просто изменить текстовое поле как RoundRect вместо Custom и увидеть волшебство.:)

Ответ 20

для 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
...

Ответ 21

Вместо манипулирования imageView или изображением мы можем переопределить метод, предоставленный apple для rightView.

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

}

Ответ 22

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

Ответ 23

Простой подход:

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

Примечание. Высота должна быть меньше ширины, чтобы обеспечить горизонтальное заполнение.