UITextField にアイコン/画像を追加したいと思います。アイコン/画像はプレースホルダーのままにしておきます。
私はこれを試しました:
var imageView = UIImageView();
var image = UIImage(named: "email.png");
imageView.image = image;
emailField.leftView = imageView;
ありがとう。
ベストアンサー1
Sahil は素晴らしい回答をしており、私はそれを採用して @IBDesignable に拡張し、開発者が Storyboard 上の 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の左端と画像の間にパディングを追加する
- 画像とプレースホルダーテキストが一致するように色を設定します
ノート
- 画像の色を変更するには、コード内のコメントの注意に従う必要があります。
- ストーリーボードでは画像の色は変わりません。シミュレーター/デバイスで色を確認するには、プロジェクトを実行する必要があります。