Câu hỏi UITextfield leftView / rightView padding trên iOS7


Khung nhìn leftView và rightView của UITextField trên iOS7 thực sự gần với biên giới textfield.

Làm thế nào tôi có thể thêm một số (ngang) padding cho những mục?

Tôi đã thử sửa đổi khung hình nhưng không hoạt động

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

Xin lưu ý rằng tôi không quan tâm đến việc thêm phần đệm vào văn bản của trường văn bản, như thế này Đặt đệm cho UITextField với UITextBorderStyleNone


75
2017-10-14 23:39


gốc


có thể trùng lặp Chèn văn bản cho UITextField? - Zorayr
Không, đây là yêu cầu về việc thụt lề hình ảnh được hiển thị dưới dạng một khung nhìn bên trái trong một trường văn bản. Không thụt lề bản thân văn bản. Hãy thử mã của mình và bạn sẽ thấy cài đặt đó leftView vào một hình ảnh đặt hình ảnh đó lên trên cạnh trái của trường văn bản, không có đệm. Nó trông xấu xí. - stone


Các câu trả lời:


Chỉ làm việc trên bản thân mình và sử dụng giải pháp này:

- (CGRect) rightViewRectForBounds:(CGRect)bounds {

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

Điều này sẽ di chuyển hình ảnh từ bên phải 10 thay vì có hình ảnh vắt lên trên cạnh trong iOS 7.

Ngoài ra, đây là một lớp con của UITextField, có thể được tạo bởi:

  1. Tạo một tệp mới là lớp con của UITextField thay vì mặc định NSObject
  2. Thêm phương thức mới có tên - (id)initWithCoder:(NSCoder*)coder để đặt hình ảnh

    - (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. Bạn có thể phải nhập #import <QuartzCore/QuartzCore.h>

  4. Thêm rightViewRectForBounds phương pháp trên

  5. Trong giao diện Builder, bấm vào TextField bạn muốn phân lớp và thay đổi thuộc tính lớp để tên của phân lớp mới này


69
2017-10-15 04:10



làm thế nào để sử dụng IBDesignable cho điều này? - riddhi


Một giải pháp đơn giản hơn nhiều, lợi dụng 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;

Trong 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

Trong 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



Tôi thích cái này rất nhiều. đơn giản nhất ở đây - volk
Bạn có thể sử dụng ScaleAspectFit quá thay vì trung tâm ... nếu kích thước của hình ảnh không khớp với khung chính xác. - mihir mehta
Tôi đã sử dụng ví dụ của bạn cho UIButton (thay vì UIImageView) trong khi loại của nó là InfoLight. - OhadM
Tuyệt diệu. Chúc mừng. Giúp tôi một tấn. - Stephen Paul
Tôi thấy rằng "đúng" thay vì ".center" làm cho nó trông giống như một thanh Tìm kiếm tích hợp, chẳng hạn như thanh Tìm kiếm trong ứng dụng Danh bạ. Giải pháp tuyệt vời về điều này, cảm ơn bạn đã đăng nó. - James Toomey


Cách dễ nhất là thêm một UIView để leftView / righView và thêm một ImageView để UIView, điều chỉnh nguồn gốc của ImageView bên trong UIView bất cứ nơi nào bạn thích, điều này làm việc cho tôi như một say mê. Nó chỉ cần vài dòng mã

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



Nhanh chóng và dễ thực hiện! - S1LENT WARRIOR


Điều này làm việc tuyệt vời cho 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



không thể chuyển đổi giá trị của loại 'chuỗi' thành loại đối số dự kiến ​​'UIImage? "
@JoshuaHart tôi đã cập nhật ví dụ. - Andrew Anthony Gerst


Điều này làm việc cho tôi

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

Có thể nó giúp bạn.


6
2017-08-01 04:57





Tôi thích giải pháp này bởi vì nó giải quyết vấn đề với một dòng mã

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

Lưu ý: .. hoặc 2 nếu bạn xem xét bao gồm QuartzCore một dòng :)


4
2017-12-24 11:01



Điều này cũng di chuyển biên giới - Softlion
nhưng không giải quyết được vấn đề với padding bên phải chỉ vấn đề padding bên trái - carmen_munich
Tôi đã có kết quả tốt hơn bằng cách sử dụng rightView.layer.sublayerTransform = CATransform3DMakeTranslation (-10.0f, 0.0f, 0.0f), nhưng +1 cho phương thức - Thibaud David
Hãy nhớ điều này cũng sẽ chuyển nút "xóa" của trường văn bản sang phải, có thể đẩy nó qua cạnh của trường văn bản. Nếu bạn không cần nút rõ ràng, đây là một cách tiếp cận tuyệt vời, nếu không có thể không. - Tom Harrington


Cách tốt nhất để làm điều này đơn giản là tạo một lớp bằng cách sử dụng lớp con của UITextField và trong tệp .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;

}

bằng cách thực hiện điều này, hãy chuyển đến bảng phân cảnh hoặc xib và nhấp vào trình kiểm tra nhận dạng và thay thế UITextfield bằng tùy chọn "CustomTextField" của riêng bạn trong tùy chọn lớp học.

Lưu ý: Nếu bạn chỉ cần cung cấp đệm với bố cục tự động cho trường văn bản thì ứng dụng của bạn sẽ không chạy và chỉ hiển thị màn hình trống.


3
2018-03-19 08:26