ฉันต้องการเพิ่มไอคอน / รูปภาพใน UITextField ไอคอน / รูปภาพควรถูกปล่อยให้เป็นตัวยึดตำแหน่ง

ฉันลองสิ่งนี้:

var imageView = UIImageView();
var image = UIImage(named: "email.png");
imageView.image = image;
emailField.leftView = imageView;

ขอบคุณ.

ลองเพิ่ม emailField.leftViewMode = UITextFieldViewMode.Always

(ค่าเริ่มต้นleftViewModeคือNever)

คำตอบที่อัปเดตสำหรับSwift 4

emailField.leftViewMode = UITextFieldViewMode.always

emailField.leftViewMode = .always

Sahil มีคำตอบที่ยอดเยี่ยมและฉันต้องการนำสิ่งนั้นไปขยายเป็น @IBDesignable เพื่อให้นักพัฒนาสามารถเพิ่มรูปภาพลงใน UITextFields ของพวกเขาบน Storyboard

Swift 4.2

import UIKit

@IBDesignable
class DesignableUITextField: UITextField {
    
    // Provides left padding for images
    override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
        var textRect = super.leftViewRect(forBounds: bounds)
        textRect.origin.x += leftPadding
        return textRect
    }
    
    @IBInspectable var leftImage: UIImage? {
        didSet {
            updateView()
        }
    }
    
    @IBInspectable var leftPadding: CGFloat = 0
    
    @IBInspectable var color: UIColor = UIColor.lightGray {
        didSet {
            updateView()
        }
    }
    
    func updateView() {
        if let image = leftImage {
            leftViewMode = UITextField.ViewMode.always
            let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
            imageView.contentMode = .scaleAspectFit
            imageView.image = image
            // Note: In order for your image to use the tint color, you have to select the image in the Assets.xcassets and change the "Render As" property to "Template Image".
            imageView.tintColor = color
            leftView = imageView
        } else {
            leftViewMode = UITextField.ViewMode.never
            leftView = nil
        }
        
        // Placeholder text color
        attributedPlaceholder = NSAttributedString(string: placeholder != nil ?  placeholder! : "", attributes:[NSAttributedString.Key.foregroundColor: color])
    }
}

เกิดอะไรขึ้นที่นี่?

ออกแบบได้นี้ช่วยให้คุณ:

• ตั้งภาพทางด้านซ้าย
• เพิ่มช่องว่างระหว่างขอบด้านซ้ายของ UITextField และรูปภาพ
• กำหนดสีเพื่อให้รูปภาพและข้อความตัวยึดตำแหน่งตรงกัน

หมายเหตุ

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

ออกแบบได้ใน Storyboard

ที่ Runtime

ฉันแค่อยากจะเพิ่มบางอย่างที่นี่:

หากคุณต้องการเพิ่มรูปภาพUITextFieldทางด้านซ้ายให้ใช้leftViewคุณสมบัติของUITextField

หมายเหตุ: อย่าลืมให้ชุดleftViewModeไปUITextFieldViewMode.AlwaysและมีสิทธิrightViewModeที่จะUITextFieldViewMode.Always andเริ่มต้นคือUITextFieldViewModeNever

เช่น

สำหรับเพิ่มรูปภาพทางด้านซ้าย

textField.leftViewMode = UITextFieldViewMode.Always
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
let image = UIImage(named: imageName)
imageView.image = image
textField.leftView = imageView

สำหรับการเพิ่มรูปภาพทางด้านขวา

textField.rightViewMode = UITextFieldViewMode.Always
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
let image = UIImage(named: imageName)
imageView.image = image
textField.rightView = imageView

หมายเหตุ:บางสิ่งที่คุณต้องดูแลขณะเพิ่มรูปภาพUITextFieldทางด้านซ้ายหรือด้านขวา

• อย่าลืมใส่กรอบImageViewที่คุณจะเพิ่มเข้าไปด้วยUITextField

  ให้ imageView = UIImageView (เฟรม: CGRect (x: 0, y: 0, กว้าง: 20, สูง: 20))

• หากพื้นหลังรูปภาพของคุณเป็นสีขาวจะไม่สามารถมองเห็นภาพได้ UITextField

• ถ้าคุณต้องการเพิ่มภาพในตำแหน่งเฉพาะที่คุณจะต้องเพิ่มImageViewเป็น subview UITextFieldของ

อัปเดตสำหรับ Swift 3.0

@ Mark Moeykens สวยงามใช้จ่ายมันและทำให้มัน@IBDesignable

ฉันแก้ไขและเพิ่มคุณสมบัติเพิ่มเติมบางอย่าง (เพิ่ม Bottom Line และช่องว่างภายในสำหรับภาพด้านขวา)

หมายเหตุหากคุณต้องการเพิ่มรูปภาพทางด้านขวาคุณสามารถเลือกForce Right-to-Leftตัวเลือกในตัวsemanticสร้างอินเทอร์เฟซได้ (แต่สำหรับการขยายรูปภาพที่ถูกต้องจะไม่ทำงานจนกว่าคุณจะแทนที่เมธอด rightViewRect)

ฉันได้แก้ไขสิ่งนี้แล้วและสามารถดาวน์โหลดแหล่งที่มาได้จากที่นี่ImageTextField

อีกวิธีหนึ่งที่ได้รับแรงบันดาลใจจากโพสต์ก่อนหน้านี้เพื่อทำการขยาย

เราสามารถวางภาพไว้ทางขวาหรือทางซ้าย

extension UITextField {

enum Direction {
    case Left
    case Right
}

// add image to textfield
func withImage(direction: Direction, image: UIImage, colorSeparator: UIColor, colorBorder: UIColor){
    let mainView = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 45))
    mainView.layer.cornerRadius = 5

    let view = UIView(frame: CGRect(x: 0, y: 0, width: 50, height: 45))
    view.backgroundColor = .white
    view.clipsToBounds = true
    view.layer.cornerRadius = 5
    view.layer.borderWidth = CGFloat(0.5)
    view.layer.borderColor = colorBorder.cgColor
    mainView.addSubview(view)

    let imageView = UIImageView(image: image)
    imageView.contentMode = .scaleAspectFit
    imageView.frame = CGRect(x: 12.0, y: 10.0, width: 24.0, height: 24.0)
    view.addSubview(imageView)

    let seperatorView = UIView()
    seperatorView.backgroundColor = colorSeparator
    mainView.addSubview(seperatorView)

    if(Direction.Left == direction){ // image left
        seperatorView.frame = CGRect(x: 45, y: 0, width: 5, height: 45)
        self.leftViewMode = .always
        self.leftView = mainView
    } else { // image right
        seperatorView.frame = CGRect(x: 0, y: 0, width: 5, height: 45)
        self.rightViewMode = .always
        self.rightView = mainView
    }

    self.layer.borderColor = colorBorder.cgColor
    self.layer.borderWidth = CGFloat(0.5)
    self.layer.cornerRadius = 5
}

}

ใช้:

if let myImage = UIImage(named: "my_image"){
    textfield.withImage(direction: .Left, image: myImage, colorSeparator: UIColor.orange, colorBorder: UIColor.black)
}

สนุก :)

ในการสร้างช่องว่างภายในฉันต้องการวางรูปภาพไว้ในมุมมองคอนเทนเนอร์ คุณสามารถลบสีพื้นหลังได้เมื่อคุณพอใจกับตำแหน่งไอคอนแล้ว

let imageView = UIImageView(frame: CGRect(x: 8.0, y: 8.0, width: 24.0, height: 24.0))
let image = UIImage(named: "my_icon")
imageView.image = image
imageView.contentMode = .scaleAspectFit
imageView.backgroundColor = UIColor.red

let view = UIView(frame: CGRect(x: 0, y: 0, width: 32, height: 40))
view.addSubview(imageView)
view.backgroundColor = .green
textField.leftViewMode = UITextFieldViewMode.always
textField.leftView = view

สำหรับ Swift 3.0 เพิ่มรูปภาพทางด้านซ้ายของ textField

textField.leftView = UIImageView(image: "small-calendar")
textField.leftView?.frame = CGRect(x: 0, y: 5, width: 20 , height:20)
textField.leftViewMode = .always

สวิฟต์ 5

@IBOutlet weak var paswd: UITextField! {
    didSet{
      paswd.setLeftView(image: UIImage.init(named: "password")!)
      paswd.tintColor = .darkGray
      paswd.isSecureTextEntry = true
    }   
 }

ฉันได้สร้างส่วนขยาย

extension UITextField {
  func setLeftView(image: UIImage) {
    let iconView = UIImageView(frame: CGRect(x: 10, y: 10, width: 25, height: 25)) // set your Own size
    iconView.image = image
    let iconContainerView: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 35, height: 45))
    iconContainerView.addSubview(iconView)
    leftView = iconContainerView
    leftViewMode = .always
    self.tintColor = .lightGray
  }
}

ผลลัพธ์

2020 - ทางออกที่เหมาะสม

เกี่ยวกับความบ้าคลั่งจาก Apple

นี่อาจเป็นวิธีที่ "ชัดเจนที่สุด" ง่ายที่สุด:

ขั้นแรกคุณต้องย้ายข้อความให้ถูกต้อง

โปรดสังเกต QA ที่สำคัญนี้: https://stackoverflow.com/a/27066764/294884

class TidyTextField: UITextField {
    
    @IBInspectable var leftImage: UIImage? = nil
    @IBInspectable var leftPadding: CGFloat = 0
    @IBInspectable var gapPadding: CGFloat = 0
    
    private var textPadding: UIEdgeInsets {
        let p: CGFloat = leftPadding + gapPadding + (leftView?.frame.width ?? 0)
        return UIEdgeInsets(top: 0, left: p, bottom: 0, right: 5)
    }
    
    override open func textRect(forBounds bounds: CGRect) -> CGRect {
        return bounds.inset(by: textPadding)
    }
    
    override open func placeholderRect(forBounds bounds: CGRect) -> CGRect {
        return bounds.inset(by: textPadding)
    }
    
    override open func editingRect(forBounds bounds: CGRect) -> CGRect {
        return bounds.inset(by: textPadding)
    }
    

ดำเนินการต่อตอนนี้เราต้องสร้างและเลื่อนภาพด้านซ้าย:

    override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
        var r = super.leftViewRect(forBounds: bounds)
        r.origin.x += leftPadding
        return r
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        setup()
    }
    
    private func setup() {
        if let image = leftImage {
            if leftView != nil { return } // critical!
            
            let im = UIImageView()
            im.contentMode = .scaleAspectFit
            im.image = image
            
            leftViewMode = UITextField.ViewMode.always
            leftView = im
            
        } else {
            leftViewMode = UITextField.ViewMode.never
            leftView = nil
        }
    }
}

ดูเหมือนจะเป็นวิธีที่ชัดเจนและน่าเชื่อถือที่สุดในการทำเช่นนี้

ฉันสร้าง IBDesignable ง่ายๆ ใช้มันอย่างไรก็ได้ เพียงแค่ทำให้ UITextField ของคุณยืนยันกับชั้นเรียนนี้

import UIKit

@IBDesignable
class RoundTextField : UITextField {
    @IBInspectable var cornerRadius : CGFloat = 0{
        didSet{
            layer.cornerRadius = cornerRadius
            layer.masksToBounds = cornerRadius > 0
        }
    }

    @IBInspectable var borderWidth : CGFloat = 0 {
        didSet{
            layer.borderWidth = borderWidth
        }
    }

    @IBInspectable var borderColor : UIColor? {
        didSet {
            layer.borderColor = borderColor?.cgColor
        }
    }

    @IBInspectable var bgColor : UIColor? {
        didSet {
            backgroundColor = bgColor
        }
    }

    @IBInspectable var leftImage : UIImage? {
        didSet {
            if let image = leftImage{
                leftViewMode = .always
                let imageView = UIImageView(frame: CGRect(x: 20, y: 0, width: 20, height: 20))
                imageView.image = image
                imageView.tintColor = tintColor
                let view = UIView(frame : CGRect(x: 0, y: 0, width: 25, height: 20))
                view.addSubview(imageView)
                leftView = view
            }else {
                leftViewMode = .never
            }

        }
    }

    @IBInspectable var placeholderColor : UIColor? {
        didSet {
            let rawString = attributedPlaceholder?.string != nil ? attributedPlaceholder!.string : ""
            let str = NSAttributedString(string: rawString, attributes: [NSForegroundColorAttributeName : placeholderColor!])
            attributedPlaceholder = str
        }
    }

    override func textRect(forBounds bounds: CGRect) -> CGRect {
        return bounds.insetBy(dx: 50, dy: 5)
    }

    override func editingRect(forBounds bounds: CGRect) -> CGRect {
        return bounds.insetBy(dx: 50, dy: 5)
    }

}

อีกวิธีหนึ่งในการตั้งค่าไอคอนตัวยึดตำแหน่งและตั้งค่าช่องว่างใน TextField

let userIcon = UIImage(named: "ImageName") 
setPaddingWithImage(image: userIcon, textField: txtUsername)

func setPaddingWithImage(image: UIImage, textField: UITextField){
    let imageView = UIImageView(image: image)
    imageView.contentMode = .scaleAspectFit
    let view = UIView(frame: CGRect(x: 0, y: 0, width: 60, height: 50))
    imageView.frame = CGRect(x: 13.0, y: 13.0, width: 24.0, height: 24.0)
    //For Setting extra padding other than Icon.
    let seperatorView = UIView(frame: CGRect(x: 50, y: 0, width: 10, height: 50))
    seperatorview.backgroundColor = UIColor(red: 80/255, green: 89/255, blue: 94/255, alpha: 1)
    view.addSubview(seperatorView)
    textField.leftViewMode = .always
    view.addSubview(imageView)
    view.backgroundColor = .darkGray
    textField.leftViewMode = UITextFieldViewMode.always
    textField.leftView = view
}

Swift 3.1

extension UITextField
{
    enum Direction
    {
        case Left
        case Right
    }

    func AddImage(direction:Direction,imageName:String,Frame:CGRect,backgroundColor:UIColor)
    {
        let View = UIView(frame: Frame)
        View.backgroundColor = backgroundColor

        let imageView = UIImageView(frame: Frame)
        imageView.image = UIImage(named: imageName)

        View.addSubview(imageView)

        if Direction.Left == direction
        {
            self.leftViewMode = .always
            self.leftView = View
        }
        else
        {
            self.rightViewMode = .always
            self.rightView = View
        }
    }

}

คุณสามารถวางฟังก์ชั่นนี้ไฟล์ส่วนกลางของคุณหรือเหนือชั้นเรียนของคุณเพื่อให้คุณสามารถเข้าถึงได้ในแอปพลิเคชันทั้งหมด หลังจากขั้นตอนนี้คุณสามารถเรียกใช้ฟังก์ชันนี้ได้ตามความต้องการของคุณในแอปพลิเคชัน

        func SetLeftSIDEImage(TextField: UITextField, ImageName: String){

                let leftImageView = UIImageView()
                leftImageView.contentMode = .scaleAspectFit

                let leftView = UIView()

                leftView.frame = CGRect(x: 20, y: 0, width: 30, height: 20)
                leftImageView.frame = CGRect(x: 13, y: 0, width: 15, height: 20)
                TextField.leftViewMode = .always
                TextField.leftView = leftView

                let image = UIImage(named: ImageName)?.withRenderingMode(.alwaysTemplate)
                leftImageView.image = image
                leftImageView.tintColor = UIColor(red: 106/255, green: 79/255, blue: 131/255, alpha: 1.0)
                leftImageView.tintColorDidChange()

                leftView.addSubview(leftImageView)
            }

            SetLeftSIDEImage(TextField: Your_textField, ImageName: “YourImageName”) // call function

การใช้ส่วนขยายใน Swift4 เราสามารถวางภาพทางด้านขวาหรือด้านซ้ายได้อย่างง่ายดายด้วยการขยายไปยัง TextField

extension UITextField {

    //MARK:- Set Image on the right of text fields

  func setupRightImage(imageName:String){
    let imageView = UIImageView(frame: CGRect(x: 10, y: 10, width: 20, height: 20))
    imageView.image = UIImage(named: imageName)
    let imageContainerView: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 55, height: 40))
    imageContainerView.addSubview(imageView)
    rightView = imageContainerView
    rightViewMode = .always
    self.tintColor = .lightGray
}

 //MARK:- Set Image on left of text fields

    func setupLeftImage(imageName:String){
       let imageView = UIImageView(frame: CGRect(x: 10, y: 10, width: 20, height: 20))
       imageView.image = UIImage(named: imageName)
       let imageContainerView: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 55, height: 40))
       imageContainerView.addSubview(imageView)
       leftView = imageContainerView
       leftViewMode = .always
       self.tintColor = .lightGray
     }

  }

ใช้รหัสสำหรับการตั้งค่าภาพด้านซ้าย: -

   self.password_text_field.setupLeftImage(imageName: "unlock")

เอาท์พุท :)

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

myTextField.setLeftViewFAIcon(icon: .FAPlus, leftViewMode: .always, textColor: .red, backgroundColor: .clear, size: nil)

คุณจะต้องติดตั้งไลบรารีที่รวดเร็วนี้ก่อน: https://github.com/Vaberer/Font-Awesome-Swift

นี่คือคำตอบของ Mark Moeykens เวอร์ชันแก้ไขโดยมีการเพิ่มช่องว่างระหว่างรูปภาพและข้อความและขนาดรูปภาพที่ปรับได้ในกรณีที่มีคนต้องการ

สวิฟต์ 4

    import UIKit

    @IBDesignable
    class TextFieldWithImage: UITextField {

        override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
            return super.leftViewRect(forBounds: bounds)
        }

        @IBInspectable var leftImage: UIImage? {
            didSet {
                updateView()
            }
        }
        @IBInspectable var leftPadding: CGFloat = 0 {
            didSet {
                updateView()
            }
        }
        @IBInspectable var rightPadding: CGFloat = 0 {
            didSet {
                updateView()
            }
        }
        @IBInspectable var imageMaxHeight: CGFloat = 0 {
            didSet {
                updateView()
            }
        }

        @IBInspectable var color: UIColor = UIColor.lightGray {
            didSet {
                updateView()
            }
        }

        func updateView() {
            if let image = leftImage {
                leftViewMode = UITextField.ViewMode.always

                let containerSize = calculateContainerViewSize(for: image)
                let containerView = UIView(frame: CGRect(x: 0, y: 0, width: containerSize.width, height: containerSize.height))

                let imageView = UIImageView(frame: .zero)
                containerView.addSubview(imageView)
                setImageViewConstraints(imageView, in: containerView)

                setImageViewProperties(imageView, image: image)

                leftView = containerView
            } else {
                leftViewMode = UITextField.ViewMode.never
                leftView = nil
            }

            attributedPlaceholder = NSAttributedString(string: placeholder != nil ? placeholder! : "",
                    attributes: [NSAttributedString.Key.foregroundColor: color])
        }

        private func calculateContainerViewSize(for image: UIImage) -> CGSize {
            let imageRatio = image.size.height / image.size.width
            let adjustedImageMaxHeight = imageMaxHeight > self.frame.height ? self.frame.height : imageMaxHeight

            var imageSize = CGSize()
            if image.size.height > adjustedImageMaxHeight {
                imageSize.height = adjustedImageMaxHeight
                imageSize.width = imageSize.height / imageRatio
            }

            let paddingWidth = leftPadding + rightPadding

            let containerSize = CGSize(width: imageSize.width + paddingWidth, height: imageSize.height)
            return containerSize
        }

        private func setImageViewConstraints(_ imageView: UIImageView, in containerView: UIView) {
            imageView.translatesAutoresizingMaskIntoConstraints = false
            imageView.topAnchor.constraint(equalTo: containerView.topAnchor).isActive = true
            imageView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor).isActive = true
            imageView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -rightPadding).isActive = true
            imageView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: leftPadding).isActive = true
        }

        private func setImageViewProperties(_ imageView: UIImageView, image: UIImage) {
            imageView.contentMode = .scaleAspectFit
            imageView.image = image
            imageView.tintColor = color
        }
    }

สวิฟต์ 5

คล้ายกับ @Markus แต่ในSwift 5 :

emailTextField.leftViewMode = UITextField.ViewMode.always
emailTextField.leftViewMode = .always

SwiftUI

RoundedRectangle(cornerRadius: 50)
                .frame(height: 40)
                .colorInvert() // sets the background white
            .padding()
            .shadow(radius: 12) // adds shadow to the rectangle
                .overlay(
                    HStack(spacing: 20){

                        Image(systemName: "person")
                            .resizable()
                            .aspectRatio(contentMode: .fit)

                        TextField("Username ", text: $username)
                            .font(Font.custom("Arial", size: 25))


                            .font(.title)
                    }
                    .padding()
                    .padding()
                )

ผล