iOS 带下划线的UITextField，一网打尽

总会有UI工程师，会把安卓的风格用在iOS上，感觉有点怪怪，比如安卓风格的UITextField，没有边框，只有一根下划线，如下：

image.png

虽然如此，但我们也是能实现的。
整个项目多处都会用这些风格的TextField，所以我们最好是把它封装好，到处使用。

最终效果，如下：

image.png

方法一：用扩展

import UIKit

extension UITextField {
    /// 设置底部线的高度及颜色
    func underLineTextField(underLineColor: UIColor = .black,underlineHeight: Double = 1.0,placeHolderColor:UIColor = .blue) -> UITextField {
        assert(self.frame.size.width > 0,   "textField frame is required")
        // 创建一条线，长度与文本框等长，宽度为2个像素
        let underLine = UIView.init(frame: CGRect.init(x: 0, y: self.frame.size.height - underlineHeight, width: self.frame.size.width, height: underlineHeight))
        // 定义下划线的颜色
        underLine.backgroundColor = underLineColor
        // 把自定义的组建加入文本框中
        self.addSubview(underLine)
        // 然后别忘了把文本框外框设置成none
        self.borderStyle = .none
        self.textColor = .red
        return self
    }
}

方法二：用继承

import UIKit

class MyTextField: UITextField {
    /// 底部线高度
    var underlineHeight: Double?
    ///底部线颜色
    var underLineColor: UIColor? {
        didSet {
            print("underLineColor didSet")
        }
    }
    var underlineView: UIView?
    
    init(underlineHeight : Double = 1.0, underLineColor : UIColor = UIColor.black) {
        self.underlineHeight = underlineHeight
        self.underLineColor = underLineColor
        super.init(frame: CGRect.zero)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        self.underlineView?.removeFromSuperview()
        
        // 创建一条线，长度与文本框等长，宽度为2个像素
        let underLine = UIView.init(frame: CGRect.init(x: 0, y: self.frame.size.height - underlineHeight!, width: self.frame.size.width, height: underlineHeight!))
        // 定义下划线的颜色
        underLine.backgroundColor = underLineColor
        self.underlineView = underLine
        // 把自定义的组建加入文本框中
        self.addSubview(self.underlineView ?? underLine)
        // 然后别忘了把文本框外框设置成none
        self.borderStyle = .none
       self.textColor = .blue
        guard let holder = placeholder, !holder.isEmpty else { return}
        self.attributedPlaceholder = NSAttributedString(string: holder, attributes: [.foregroundColor: UIColor.lightGray])
    }
    
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

}

方法三：用继承，draw(_ rect:)

import UIKit

class MyDrawTextField: UITextField {
    
    override func draw(_ rect: CGRect) {
        let currentCT = UIGraphicsGetCurrentContext()
        let h = 1.0
        
        currentCT?.setLineWidth(h)
        currentCT?.setStrokeColor(UIColor.red.cgColor)
        currentCT?.beginPath()
        
        currentCT?.move(to: CGPoint(x: 0, y: rect.size.height-h))
        currentCT?.addLine(to: CGPoint(x: rect.size.width, y: rect.size.height-h))
        currentCT?.strokePath()
    }
    
}

如何使用

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        //1.extension
        let tfExtension1 = UITextField(frame: CGRect(x: 50, y: 50, width: 100, height: 30)).underLineTextField()
        view.addSubview(tfExtension1)
        
        let tfExtension2 = UITextField(frame: CGRect(x: 50, y: 100, width: 100, height: 30)).underLineTextField(underLineColor: .black, underlineHeight: 2.0)
        view.addSubview(tfExtension2)
        
        let tfExtension3 = UITextField(frame: CGRect(x: 50, y: 150, width: 100, height: 30)).underLineTextField()
        tfExtension3.placeholder = "用户名"
        tfExtension3.attributedPlaceholder = NSAttributedString(string: tfExtension3.placeholder!, attributes: [.foregroundColor: UIColor.lightGray])
        view.addSubview(tfExtension3)
        
        
        //2.继承
        let myTF1 = MyTextField()
        myTF1.frame = CGRect(x: 50, y: 250, width: 100, height: 30)
        view.addSubview(myTF1)
        
        let myTF2 = MyTextField()
        myTF2.frame = CGRect(x: 50, y: 300, width: 100, height: 30)
        myTF2.placeholder = "用户名"
        view.addSubview(myTF2)
        
        
        
        //3.绘制
        let drawTF1 = MyDrawTextField(frame: CGRect(x: 50, y: 400, width: 100, height: 30))
        view.addSubview(drawTF1)
        
        let drawTF2 = MyDrawTextField(frame: CGRect(x: 50, y: 450, width: 100, height: 30))
        drawTF2.placeholder = "密码"
        view.addSubview(drawTF2)
        
    }


}

效果如下：

image.png

最后建议使用方式二，因为，这种方式比较灵活，可以使用传统的Frame来设置控件大小，又能适应使用autolay，约束布局的方法来设置控件大小，它都不会出现问题

结尾

今天的分享至此接近尾声喽，小伴们,觉得有点用的话，或者已经看到这里面来的请点赞加关注吧~~
后续分享更多iOS原生技术及物联网技术相关文章。如果有任何疑问的话，欢迎在下方留言~