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은 훌륭한 답변을 가지고 있으며 개발자가 스토리 보드의 UITextFields에 이미지를 추가 할 수 있도록이를 @IBDesignable로 확장하고 싶었습니다.

스위프트 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의 왼쪽 가장자리와 이미지 사이에 패딩 추가
이미지와 자리 표시 자 텍스트가 일치하도록 색상 설정

노트

이미지 색상을 변경하려면 코드의 주석에있는 해당 메모를 따라야합니다.
스토리 보드에서 이미지 색상은 변경되지 않습니다. 시뮬레이터 / 장치에서 색상을 보려면 프로젝트를 실행해야합니다.

스토리 보드에서 디자인 가능

런타임에

답변

여기에 몇 가지 더 추가하고 싶습니다.

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

let imageView = UIImageView (frame : CGRect (x : 0, y : 0, 너비 : 20, 높이 : 20))
이미지 배경이 흰색이면 이미지가 표시되지 않습니다. UITextField
특정 위치에 이미지를 추가 ImageView하려면의 하위보기 로 추가해야합니다 UITextField.

Swift 3.0 업데이트

@Mark Moeykens 그것을 아름답게 확장 하고 @IBDesignable로 만드십시오 .

여기에 몇 가지 기능을 수정하고 추가했습니다 (오른쪽 이미지에 하단 라인 및 패딩 추가).

참고 오른쪽에 이미지를 추가하려면 인터페이스 빌더에서 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
  }
}

결과