UITextfield leftView/rightView padding на iOS7

Question

Представления 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; 

Пожалуйста, обратите внимание, что я не заинтересован в добавлении отступы в тексте TextField, подобно этому Set padding for UITextField with UITextBorderStyleNone

Answer 1

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

- (CGRect) rightViewRectForBounds:(CGRect)bounds { 

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

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

Кроме того, это было в подклассе 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 вы хотели бы подкласс и изменить атрибут класса с именем этого нового подкласса

Answer 2

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

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

[self addSubview:itemDescription]; 

Answer 3

Создайте пользовательский класс 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; 
} 

Answer 4

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

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

Answer 5

One trick: Добавьте 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; 

Answer 6

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

[self modifyTextField:self.firstNameTxtFld]; 

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

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

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

Cheers!

Answer 7

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

Answer 8

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

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

Answer 9

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

Answer 10

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

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

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

Answer 11

Лучший способ сделать это просто сделать класс с помощью подкласса 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» в опции класса.

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

Answer 12

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

Answer 13

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

Answer 14

Это прекрасно работает для 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 

Answer 15

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

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

мая, это поможет вам.

Answer 16

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

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

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

Answer 18

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

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

Answer 19

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

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