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

เพิ่งทำงานกับตัวเองและใช้วิธีนี้:

- (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 ที่คุณต้องการซับคลาสและเปลี่ยนแอตทริบิวต์คลาสเป็นชื่อของคลาสย่อยใหม่นี้

วิธีแก้ปัญหาที่ง่ายกว่ามากซึ่งใช้ประโยชน์จาก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 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

วิธีที่ง่ายที่สุดคือเพิ่ม 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];

ใช้งานได้ดีสำหรับ 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

สิ่งนี้ใช้ได้กับฉัน

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

มันช่วยคุณได้

ฉันชอบวิธีนี้เพราะมันแก้ปัญหาด้วยโค้ดบรรทัดเดียว

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

หมายเหตุ: .. หรือ 2 ถ้าคุณพิจารณารวม QuartzCore ไว้ด้วย :)

วิธีที่ดีที่สุดคือสร้างคลาสโดยใช้คลาสย่อยของ 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" ของคุณเองในชั้นเรียน

หมายเหตุ: หากคุณเพียงแค่ให้ช่องว่างภายในด้วยเค้าโครงอัตโนมัติสำหรับช่องข้อความแอปพลิเคชันของคุณจะไม่ทำงานและแสดงเฉพาะหน้าจอว่างเปล่า

แทนที่จะจัดการ 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*/

}

เจอที่ไหนสักแห่ง ...

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

[self addSubview:itemDescription];

สวิฟต์ 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
    }
}

คุณจะต้อง:

• คลาสย่อย UITextField
• เขียนเมธอดที่ไม่ถูกต้องในฟิลด์ข้อความคลาสย่อย
• ในเมธอดที่ไม่ถูกต้องให้สร้างไฟล์ UIView ใหญ่กว่าของคุณ
• วางภาพของคุณไว้ในมุมมอง
• กำหนดมุมมองให้ UITextField.rightView

นี่คือทางออกเดียว:

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

สร้างคลาส UITextField แบบกำหนดเองและใช้คลาสนั้นแทน UITextField แทนที่ - (CGRect) textRectForBounds: ขอบเขต (CGRect) เพื่อตั้งค่า rect ที่คุณต้องการ

ตัวอย่าง

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

ตัวอย่างด้านล่างนี้คือการเพิ่มช่องว่างในแนวนอนให้กับมุมมองด้านซ้ายที่เป็นไอคอน - คุณสามารถใช้วิธีการที่คล้ายกันนี้ในการเพิ่มช่องว่างภายใน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ที่นี่ แต่ฉันเชื่อว่านี่เป็นแนวทางที่สะอาดที่สุด

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

ขอบคุณพวกคุณสำหรับคำตอบของคุณฉันไม่แปลกใจเลยที่ไม่มีพวกเขาติดตั้งภาพมุมมองที่ถูกต้องลงในช่องข้อความของฉันในขณะที่ยังคงให้ช่องว่างภายในที่จำเป็น จากนั้นฉันก็คิดว่าจะใช้โหมด 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 ในกรอบมุมมองภาพของฉันแสดงถึงความสูงของ emailTextfield ของฉันอย่าลังเลที่จะปรับให้เข้ากับความต้องการของคุณ

ฉันมีปัญหานี้ด้วยตัวเองและวิธีแก้ปัญหาที่ง่ายที่สุดคือการแก้ไขภาพของคุณเพื่อเพิ่มช่องว่างในแต่ละด้านของภาพ!

ฉันเพิ่งแก้ไขภาพ png ของฉันเพื่อเพิ่มช่องว่างภายในแบบโปร่งใส 10 พิกเซลและทำงานได้ดีโดยไม่มีการเข้ารหัสเลย!

หากคุณใช้ 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;
}

ฉันสร้างวิธีการที่กำหนดเองในคลาส 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];

สิ่งนี้ทำงานได้อย่างสมบูรณ์แบบบน iOS 7! หวังว่าจะยังคงใช้งานได้บน iOS 8 และ 9 ด้วยนะ!

ฉันรู้ว่าการเพิ่ม Views มากเกินไปอาจทำให้โหลดวัตถุนี้หนักขึ้นเล็กน้อย แต่เมื่อกังวลเกี่ยวกับความยากลำบากในการแก้ปัญหาอื่นฉันพบว่าตัวเองมีอคติกับวิธีนี้มากขึ้นและยืดหยุ่นมากขึ้นกับการใช้วิธีนี้ ;)

หวังว่าคำตอบนี้อาจเป็นประโยชน์หรือเป็นประโยชน์ในการหาทางแก้ไขอื่น ๆ ให้กับคนอื่น

ไชโย!

สิ่งนี้ใช้ได้กับฉันเหมือนกับที่ฉันกำลังมองหา:

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
}

ตั้งแต่ iOS 13 และ Xcode 11 นี่เป็นทางออกเดียวที่เหมาะกับเรา

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

// ตั้งค่ามุมมองด้านขวาของ UITextField, swift 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

เคล็ดลับอย่างหนึ่ง: เพิ่ม 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;

วิธีที่ง่ายที่สุดเพียงแค่เปลี่ยน Textfield เป็น RoundRect แทน Custom แล้วดูความมหัศจรรย์ :)

สำหรับ 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
...

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

แนวทางง่ายๆ:

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

หมายเหตุ: ความสูงควรน้อยกว่าความกว้างเพื่อให้มีช่องว่างในแนวนอน

ฉันรู้ว่านี่เป็นโพสต์เก่าและคำตอบนี้เฉพาะเจาะจงสำหรับกรณีการใช้งานของฉัน แต่ฉันโพสต์ไว้ในกรณีที่คนอื่นกำลังมองหาวิธีแก้ปัญหาที่คล้ายกัน ฉันต้องการย้ายมุมมองซ้ายหรือขวาของ UITextField แต่ฉันไม่ได้ใส่ภาพลงไปและไม่ต้องการค่าคงที่ที่เข้ารหัสยาก

UI ของฉันเรียกร้องให้ซ่อนปุ่มล้างของช่องข้อความและแสดง UIActivityIndicatorView ที่ปุ่มล้างอยู่

ฉันเพิ่มสปินเนอร์ลงในrightViewแต่นอกกรอบ (บน iOS 13) มันถูกเลื่อน 20 พิกเซลไปทางขวาของไฟล์clearButton. ฉันไม่ชอบใช้ตัวเลขวิเศษเนื่องจากตำแหน่งของ clearButton และ rightView อาจเปลี่ยนแปลงได้ตลอดเวลาโดย Apple เจตนาการออกแบบ UI เป็น"ปินเนอร์ที่ปุ่มที่ชัดเจนคือ"เพื่อแก้ปัญหาของฉันคือการซับคลาส UITextField rightViewRect(forBounds)และแทนที่

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

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

ด้านล่างนี้เป็นตัวอย่างการทำงาน (sans 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()
    }

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

}

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