DAY 24 『 客制化文字输入框 Custom TextField 』

昨天介绍完客制化按钮，今天会分享客制化文字输入框（ 加入图示、图示显示在左边或右边 ）

成品：

刻好画面後，在 ViewController.swift ( MainVC.swift ) 加入程序码

在专案底下 New Group / New File / 选 Cocoa Touch Class

• p.s.
  @IBInspectable : 让我们可以在 Attributes inspect 中直接调整属性，但是我们需要在运行之後才能看到结果
  @IBDesignable : 将我们调整的结果直接显示在画面上。

设置左图与左边界的距离、右视图与右边界的距离

设定边界初始值

设置图示选项

设置图示颜色

设定图示限制与大小

在 MainVC -> TextField -> Class
选择刚刚建立的客制化文字输入框的档案名称

选完後就会多了这些性质可以做变更

若图示在左边，则需修改 Left Padding 的数值

若要将图示显示在右边，则修改此选项，将其改成 Force Right-to-Left

并且修改 Right Padding 的数值

附上完整程序码

//  MainVC.swift
import UIKit

class MainVC: UIViewController {
    
    @IBOutlet weak var btn: UIButton!
    @IBOutlet weak var txf: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

//  CustomTextField.swift

import UIKit

@IBDesignable
class CustomTextField: UITextField {
    
    override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
        var leftTextRect = super.leftViewRect(forBounds: bounds)
        leftTextRect.origin.x += leftPadding
        return leftTextRect
    }
    
    override func rightViewRect(forBounds bounds: CGRect) -> CGRect {
        var rightTextRect = super.rightViewRect(forBounds: bounds)
        rightTextRect.origin.x -= rightPadding
        return rightTextRect
    }
    
    @IBInspectable var leftImage: UIImage? { didSet { updateView() } }
    
    @IBInspectable var leftPadding: CGFloat = 0
    @IBInspectable var rightPadding: 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
            imageView.tintColor = color
            leftView = imageView
        }
        else{
            leftViewMode = UITextField.ViewMode.never
            leftView = nil
        }
        attributedPlaceholder = NSAttributedString(string: placeholder != nil ?  placeholder! : "", attributes:[NSAttributedString.Key.foregroundColor: color])
    }
}

这样就完成客制化文字输入框啦！明天会分享新的实作，敬请期待！