UITextField में आइकन / छवि जोड़ें

101

मैं UITextField में आइकन / छवि जोड़ना चाहूंगा। आइकन / छवि को प्लेसहोल्डर पर छोड़ दिया जाना चाहिए।

यहां छवि विवरण दर्ज करें

मैंने यह कोशिश की:

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

धन्यवाद।

ios  image  swift  login  uitextfield 
— informatiker
स्रोत
74
आपने गलती से अर्धविराम जोड़े: D
— Gerald
10
emailField.leftView = UIImageView(image: UIImage(named: "search")):)
— tspentzas
इसका उपयोग @IBDesignableहम इस उदाहरण के रूप में एक सुरुचिपूर्ण तरीके से कर सकते हैं: stackoverflow.com/a/51841433/8238512
— रिज़वान

जवाबों:

120

जोड़ने का प्रयास करें emailField.leftViewMode = UITextFieldViewMode.Always

(डिफ़ॉल्ट leftViewModeहै Never)

स्विफ्ट 4 के लिए अपडेट किया गया उत्तर

emailField.leftViewMode = UITextFieldViewMode.always

emailField.leftViewMode = .always
— मार्कस
स्रोत
हम्म यह मेरे लिए काम किया, क्या आपने इसे अद्यतन मूल्य ( UITextFieldViewMode.Always) के साथ आज़माया ? क्या आपको इस बात का कोई अंदाजा है कि यह क्या काम नहीं था? (उदाहरण के लिए यह संकलन किया गया?)
— मार्कस
यह 'ViewWillAppear' अनुभाग में मेरा पूरा कोड है: 'var imageView = UIImageView (); var छवि = UIImage (नाम: "email.png"); imageView.image = छवि; emailTextField.leftView = imageView; emailTextField.leftViewMode = UITextFieldViewMode.Always
— informatiker
@informatiker ठीक है, तो क्या आप सुनिश्चित हैं कि आपके पास कनेक्शन सही हैं, यदि आप उदाहरण के लिए पृष्ठभूमि का रंग सेट करते हैं तो emailTextFieldक्या यह वास्तव में बदलता है? और क्या आप सुनिश्चित हैं कि छवि वहाँ है? उदाहरण के लिए, एक अन्य UIImageView बनाएं और imageउस काम को सत्यापित करने के लिए उस में लोड करें।
— मार्कस
4
हाँ धन्यवाद। मुद्दा यह था कि आइकन सफेद था और सफेद पृष्ठभूमि पर दिखाई नहीं दे रहा था।
— informatiker
5
मैंने अपनी खोज जारी रखी और आखिरकार इसे काम करने के लिए मिला, मैंने छवि को देखने के लिए फ्रेम सेट करना छोड़ दिया। जैसे हमें uitextfield में जोड़ने से पहले छवि पर फ़्रेम सेट करने की आवश्यकता है, उसे देखें। कुछ इस तरहimageView1.frame = CGRect(x: 5, y: 0, width: userName.frame.height, height: userName.frame.height) view.addSubview(imageView1)
— Sashi
123

साहिल के पास एक शानदार जवाब है और मैं इसे एक @IBDesignable में बदलना चाहता था, इसलिए डेवलपर्स स्टोरीबोर्ड पर अपने UITextFields में चित्र जोड़ सकते हैं।

स्विफ्ट 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 के बाएँ किनारे और छवि के बीच पैडिंग जोड़ें
  • एक रंग सेट करें ताकि छवि और प्लेसहोल्डर पाठ मेल खाएं

टिप्पणियाँ

  • छवि रंग बदलने के लिए आपको कोड में टिप्पणी में उस नोट का पालन करना होगा
  • स्टोरीबोर्ड में छवि का रंग नहीं बदलेगा। आपको सिम्युलेटर / डिवाइस में रंग देखने के लिए प्रोजेक्ट को चलाना होगा।

स्टोरीबोर्ड में डिज़ाइन करने योग्य स्टोरीबोर्ड

चलने के समय पर क्रम

— मार्क Moeykens
स्रोत
5
छवि आकार बदलने से बचने के लिए, ImageView.contentMode =। AspectFit में जोड़ा गया।
— जेरलैंड 2
3
महान पोस्ट के लिए बहुत बहुत धन्यवाद! मैंने इसे संशोधित करने के लिए RTL विकल्प भी रखा है। यहाँ उपलब्ध कोड: pastebin.com/7CCm6NEB
— अली अल्मोहेसन
अच्छा काम है, दोस्तों! मैंने बाद में भी यही काम करना शुरू कर दिया था। हा हा
— मार्क Moeykens
14
छवि और पाठ के बीच पैडिंग के बारे में क्या?
— ज़ापोरोज़ेन्को
1
महान जवाब।
— रिपा साह
51

मैं यहां कुछ और बात जोड़ना चाहता हूं:

यदि आप UITextFieldबाईं ओर की छवि का उपयोग करना चाहते हैं तो leftViewसंपत्ति का उपयोग करेंUITextField

नोट: डिफ़ॉल्ट के लिए और सही करने के लिए सेट leftViewModeकरने के लिए मत भूलनाUITextFieldViewMode.AlwaysrightViewModeUITextFieldViewMode.Always andUITextFieldViewModeNever

उदाहरण के लिए

बाईं ओर एक छवि जोड़ने के लिए

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

    Let ImageView = UIImageView (फ्रेम: CGRect (x: 0, y: 0, चौड़ाई: 20, ऊंचाई: 20%)

  • यदि आपकी छवि पृष्ठभूमि सफेद है, तो छवि दिखाई नहीं देगी UITextField

  • यदि आप उस विशिष्ट स्थिति में एक छवि जोड़ना चाहते हैं जिसे आपको ImageViewउप-भाग के रूप में जोड़ना है UITextField।

अद्यतन के लिए स्विफ्ट 3.0

@Mark Moeykens ने खूबसूरती से इसका विस्तार किया और इसे @IBDesignable बनाया ।

मैंने इसमें कुछ और खूबियाँ जोड़ीं (नीचे पंक्ति जोड़ें और सही छवि के लिए पैडिंग) जोड़ी।

ध्यान दें कि यदि आप दाईं ओर एक छवि जोड़ना चाहते हैं, तो आप इंटरफ़ेस बिल्डर में Force Right-to-Leftविकल्प का चयन कर सकते हैं semantic(लेकिन सही छवि गद्दी के लिए काम नहीं करेगा जब तक कि आप rightViewRect विधि को ओवरराइड नहीं करेंगे)।

यहां छवि विवरण दर्ज करें

मैंने इसे संशोधित किया है और यहां से स्रोत ImageTextField को डाउनलोड कर सकते हैं

यहां छवि विवरण दर्ज करें

— साहिल
स्रोत
मैं इसे एक्सटेंशन में कैसे जोड़ सकता हूं और अपने व्यू कंटोलर में कैसे कॉल कर सकता हूं? क्या आप मुझे सुझाव दे सकते हैं
— नरहरि_ार्जुन
बहुत आसान! बस UIViewController एक्सटेंशन में फ़ंक्शन बनाएं और उस फ़ंक्शन को कॉल करते समय कल्पना और टेक्स्टफील्ड रेफ पास करें।
— साहिल
एक्सटेंशन UIViewController {func addLeftImage (imageName: String, textField: UITextField) {textField.leftViewMode = UITextFieldViewMode.Alive चलें imageView = UIImageView (फ्रेम: CGRect (x: 0, y: 0), चौड़ाई: 20: चौड़ाई = UIImage (नाम: imageName) imageView.image = छवि textField.leftView = imageView}} और यह self.addLeftImage की तरह फोन ( "imganame", पाठ फ़ील्ड: yourtextfield)
— साहिल
मैंने आइकन की स्थिति बदलने की कोशिश की। लेकिन इस कोड का उपयोग करके नहीं बदला गया
— राहुल फाटे
22

छवि के साथ UITextField (बाएं या दाएं)

एक और तरीका है, एक विस्तार करने के लिए पिछले पदों से प्रेरित।

हम छवि को दाईं ओर या बाईं ओर रख सकते हैं

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

का आनंद लें :)

— Insou
स्रोत
1
आपने मेरा दिन बना दिया, मैंने इसे पूर्ण अनुकूलन योग्य बनाने के लिए "view.backgroundColor" और "imageView.tintColor" को अनुकूलित किया। आपके जवाब के लिए बहुत बहुत धन्यवाद xD
— एंड्रेस पलाडाइन्स
1
यह कमाल है
— मोहम्मद हसील
1
यह सबसे अच्छा और सरल उत्तर है
— गेरार्डो सालज़ार सेंचेज़
14

पैडिंग बनाने के लिए, मुझे छवि को कंटेनर दृश्य के अंदर रखना पसंद है। एक बार जब आप आइकन प्लेसमेंट से खुश हो जाते हैं, तो आप पृष्ठभूमि का रंग हटा सकते हैं।

यहां छवि विवरण दर्ज करें

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
— एस योशिदा
स्रोत
धन्यवाद। रंगों के साथ अच्छी व्याख्या।
— हामिद रजा अंसारी
13

स्विफ्ट 3.0 के लिए टेक्स्टफिल्ड के लेफ्टसाइड पर छवि जोड़ें

textField.leftView = UIImageView(image: "small-calendar")
textField.leftView?.frame = CGRect(x: 0, y: 5, width: 20 , height:20)
textField.leftViewMode = .always
— मौलिक पटेल
स्रोत
6

स्विफ्ट 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
  }
}

परिणाम

यहां छवि विवरण दर्ज करें

— गुरजिंदर सिंह
स्रोत
4

2020 - उचित समाधान

Apple के इस पागलपन के बारे में।

यहाँ शायद "सबसे स्पष्ट" है, सबसे सरल, इसे करने का तरीका:

यहां छवि विवरण दर्ज करें

सबसे पहले, आपको सही ढंग से पाठ को स्थानांतरित करना होगा।

इस महत्वपूर्ण प्रश्न पर ध्यान दें: 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
        }
    }
}

यह ऐसा करने का सबसे स्पष्ट, सबसे विश्वसनीय तरीका है।

— fattie
स्रोत
3

मैंने एक साधारण 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)
    }

}
— अभिषेक विश्वास
स्रोत
3

यहां छवि विवरण दर्ज करें
प्लेसहोल्डर आइकन सेट करने और 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
}
— सुधी 9135
स्रोत
2

स्विफ्ट 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
        }
    }

}
— जेठवा योगेश
स्रोत
कृपया ussage जोड़ें और मुझे फ़्रेम परम को पास करने की क्या आवश्यकता है?
— सूर्या रेड्डी
इस फ़ंक्शन में "फ़्रेम" पैरामीटर बाएं या दाएं दृश्य के लिए उपयोग करें
— जेटहैव योगेश
1

आप इस फ़ंक्शन को अपनी वैश्विक फ़ाइल या अपनी कक्षा के ऊपर रख सकते हैं ताकि आप इसे पूरे एप्लिकेशन में एक्सेस कर सकें। इस प्रक्रिया के बाद आप आवेदन में अपनी आवश्यकता के अनुसार इस फ़ंक्शन को कॉल कर सकते हैं।

        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
— धवल सोलंकी
स्रोत
2
StackOverflow में आपका स्वागत है, क्या इस कोड के साथ कुछ स्पष्टीकरण देने का कोई तरीका है? जवाब है कि केवल उनमें कोड है कम गुणवत्ता होने के लिए नष्ट हो जाते हैं। कृपया सहायता अनुभाग में जवाब देने के लिए इस गाइड पर एक नज़र डालें: stackoverflow.com/help/how-to-answer
— ग्राहम
0

आप सबसे आसान दृष्टिकोण के लिए क्यों नहीं जाते। ज्यादातर मामलों के लिए आप फ़ॉन्ट भयानक जैसे आइकन जोड़ना चाहते हैं ... बस फ़ॉन्ट भयानक लाइब्रेरी का उपयोग करें और इस पर टेक्स्ट फ़ील्ड में आइकन जोड़ना उतना ही आसान होगा:

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

आपको पहले इस स्विफ्ट लाइब्रेरी को स्थापित करना होगा: https://github.com/Vaberer/Font-Awesome-Swift

— एलेक्स ज़नफिर
स्रोत
5
केवल एक ग्लिफ़ पाने के लिए पूरे पुस्तकालय को क्यों जोड़ना चाहिए?
0

यह मार्क 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
        }
    }
— l.sypniewski
स्रोत
0

स्विफ्ट 5

@ मर्कस के समान, लेकिन स्विफ्ट 5 में :

emailTextField.leftViewMode = UITextField.ViewMode.always
emailTextField.leftViewMode = .always
— जेरी चोंग
स्रोत
0

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()
                )

परिणाम

— रॉबर्टो फ़ॉन्ट
स्रोत
0

Swift4 में एक्सटेंशन का उपयोग करते हुए, हम टेक्स्टफ़िल्ड को पैडिंग के साथ आसानी से दाईं ओर या बाईं ओर छवि डाल सकते हैं।

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")

आउटपुट :)

यहां छवि विवरण दर्ज करें

— आशुतोष कुमार मिश्रा
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.