Swift で UITextField にアイコン/画像を追加する 質問する

Swift で UITextField にアイコン/画像を追加する 質問する

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の左端と画像の間にパディングを追加する
  • 画像とプレースホルダーテキストが一致するように色を設定します

ノート

  • 画像の色を変更するには、コード内のコメントの注意に従う必要があります。
  • ストーリーボードでは画像の色は変わりません。シミュレーター/デバイスで色を確認するには、プロジェクトを実行する必要があります。

ストーリーボードでデザイン可能 ストーリーボード

実行時 ランタイム

おすすめ記事