|
纯代码实现自定义的文本输入框，具体实现功能如下
- 文本输入框
- 前后可设置图标按钮
- 可检测输入文本
- 可设置错误状态颜色
- 可设置左上小标题
- 可可视化使用
- 可实现密码输入
//
// CustomTextField.swift
// EXOTerra
//
// Created by mac min on 2020/11/30.
// Copyright ? 2020 huangzhengguo. All rights reserved.
//
import UIKit
@IBDesignable
class CustomTextField: UIView, UITextFieldDelegate {
// 错误信息高度
private let errorLabelHeight: CGFloat = 16.0
private let contentViewBorderWidth: CGFloat = 1.5
// 内容视图
let contentView: UIView = UIView()
// 输入框
let textField: UITextField = UITextField()
// 文字
@IBInspectable var text: String? {
get {
return self.textField.text
}
set (newValue) {
self.textField.text = newValue
}
}
// 是否可编辑
@IBInspectable var isEdit: Bool {
get {
return self.textField.isEnabled
}
set (newValue) {
self.textField.isEnabled = newValue
}
}
// 文字颜色
@IBInspectable var textColor: UIColor {
get {
if self.textField.textColor == nil {
return .lightGray
}
return self.textField.textColor!
}
set (newValue) {
self.textField.textColor = newValue
}
}
// 边框颜色
@IBInspectable var borderColor: UIColor = GlobalConstant.DARK_GREEN
// 前面图像
@IBInspectable var image: UIImage? {
get {
return self.headerImageView.image
}
set (newValue) {
self.headerImageView.image = newValue
}
}
// 是否显示前面图像
@IBInspectable var isImageVisible: Bool {
get {
if self.headerImageView.isHidden == true {
return false
}
return true
}
set (newValue) {
if newValue == true {
self.headerImageView.isHidden = false
} else {
self.headerImageView.isHidden = true
}
}
}
// 占位符
@IBInspectable var placeholder: String? {
get {
return self.textField.placeholder
}
set (newValue) {
self.topTitleLabel?.text = newValue
if self.isTopTitleVisible == false {
self.textField.placeholder = newValue
}
}
}
// 占位符颜色
@IBInspectable var placeholderColor: UIColor {
get {
return .lightGray
}
set (newValue) {
if self.placeholder == nil || self.placeholder?.count == 0 {
return
}
let placeholderAttributedString = NSMutableAttributedString.init(string: self.placeholder!)
placeholderAttributedString.addAttribute(NSAttributedString.Key.foregroundColor, value: newValue, range: NSRange.init(location: 0, length: self.placeholder!.count))
self.textField.attributedPlaceholder = placeholderAttributedString
}
}
// 是否是密码框
@IBInspectable var isPasswordTextField: Bool = false
// 是否隐藏输入
@IBInspectable var secureTextEntry: Bool {
get {
return self.textField.isSecureTextEntry
}
set (newValue) {
self.textField.isSecureTextEntry = newValue
}
}
// 小图标
@IBInspectable var iconImage: UIImage? {
get {
return self.iconButton.imageView?.image
}
set (newValue) {
if newValue != nil {
self.iconButton.setImage(newValue, for: .normal)
}
}
}
// 小图标处文字
@IBInspectable var iconText: String? {
get {
return self.iconButton.titleLabel?.text
}
set (newValue) {
if newValue != nil {
self.iconButton.setTitleColor(GlobalConstant.DARK_GREEN, for: .normal)
self.iconButton.setTitle(newValue, for: .normal)
}
}
}
// 小图标处文字颜色
@IBInspectable var iconTextColor: UIColor? {
get {
return self.iconButton.titleColor(for: .normal)
}
set (newValue) {
if newValue != nil {
self.iconButton.setTitleColor(newValue, for: .normal)
}
}
}
// 是否显示小图标
@IBInspectable var isIconVisible: Bool {
get {
if self.iconButton.isHidden == true {
return false
}
return true
}
set (newValue) {
if newValue == true {
self.iconButton.isHidden = false
} else {
self.iconButton.isHidden = true
}
}
}
// 是否显示标题
@IBInspectable var isTopTitleVisible: Bool {
get {
if self.topTitleLabel?.isHidden == true {
return false
}
return true
}
set (newValue) {
if newValue == true {
self.topTitleLabel?.isHidden = false
self.placeholderColor = .clear
self.contentView.layer.borderColor = UIColor.clear.cgColor
} else {
self.topTitleLabel?.isHidden = true
self.textField.placeholder = self.placeholder
self.contentView.layer.borderColor = UIColor.white.cgColor
if self.placeholder != nil {
let placeholderAttributedString = NSMutableAttributedString.init(string: self.placeholder!)
placeholderAttributedString.addAttribute(NSAttributedString.Key.foregroundColor, value: self.placeholderColor, range: NSRange.init(location: 0, length: self.placeholder!.count))
self.textField.attributedPlaceholder = placeholderAttributedString
}
}
}
}
// 是否一直显示标题
@IBInspectable var isAlwaysTopTitleVisible: Bool = false
// 输入状态颜色
@IBInspectable var editingStateColor: UIColor = GlobalConstant.DARK_GREEN
// 错误状态颜色
@IBInspectable var errorStateColor: UIColor = GlobalConstant.DARK_GREEN
// 是否显示错误信息
@IBInspectable var isErrorState: Bool {
get {
return !self.errorLabel.isHidden
}
set (newValue) {
if newValue == true {
self.topTitleLabel?.textColor = self.errorStateColor
self.contentView.layer.borderColor = UIColor.clear.cgColor
} else {
self.topTitleLabel?.textColor = self.placeholderColor
if self.isTopTitleVisible == false {
self.contentView.layer.borderColor = UIColor.lightGray.cgColor
}
}
self.errorLabel.isHidden = !newValue
self.setNeedsDisplay()
}
}
// 错误信息
@IBInspectable var errorMessage: String? {
get {
return self.errorLabel.text
}
set (newValue) {
self.errorLabel.text = newValue
}
}
/**
* 小图标点击回调
* 参数：
* 1. 当前实例
* 2. 图标按钮
* 3. 是否隐藏当前输入
*/
var iconButtonClickCallback: ((CustomTextField, UIButton, Bool) -> Void)?
// 输入检测回调
var textFieldEditingCallback: ((CustomTextField, String?, NSRange, String?) -> Bool)?
// 附加控件
// 顶部小标题
private var topTitleLabel: UILabel?
// 前面图标
private var headerImageView: UIImageView = UIImageView.init(frame: CGRect.zero)
// 后面图标
private var iconButton: UIButton = UIButton.init(frame: CGRect.zero)
// 错误信息
private var errorLabel: UILabel = UILabel.init(frame: CGRect.zero)
// 光标是否在输入框内，是否正在编辑
private var isEditing: Bool?
// MARK: 支持代码创建
override init(frame: CGRect) {
super.init(frame: frame)
self.setViewsWithFrame(frame: CGRect.zero)
}
// MARK: 支持XIB创建
required init?(coder: NSCoder) {
super.init(coder: coder)
self.setViewsWithFrame(frame: CGRect.zero)
}
// 初始化
private func setViewsWithFrame(frame: CGRect) -> Void {
// 内容： 包含输入框 图标等
self.contentView.layer.borderWidth = 1.5
self.contentView.layer.borderColor = UIColor.lightGray.cgColor
self.contentView.layer.cornerRadius = 3.0
self.contentView.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(self.contentView)
// 顶部小标题
self.topTitleLabel = UILabel.init(frame: CGRect.zero)
self.topTitleLabel!.textColor = .lightGray
self.topTitleLabel!.font = UIFont.systemFont(ofSize: 13.0)
self.topTitleLabel!.translatesAutoresizingMaskIntoConstraints = false
self.contentView.addSubview(self.topTitleLabel!)
// 前端图片
self.headerImageView.translatesAutoresizingMaskIntoConstraints = false
self.contentView.addSubview(self.headerImageView)
// 输入框
self.textField.translatesAutoresizingMaskIntoConstraints = false
self.textField.delegate = self
self.textField.autocapitalizationType = .none
self.contentView.addSubview(self.textField)
// 尾部小按钮图标
self.iconButton.translatesAutoresizingMaskIntoConstraints = false
self.iconButton.addTarget(self, action: #selector(iconButtonClickAction), for: .touchUpInside)
self.contentView.addSubview(self.iconButton)
// 错误信息控件
self.errorLabel.translatesAutoresizingMaskIntoConstraints = false
self.errorLabel.font = UIFont.systemFont(ofSize: 13.0)
self.errorLabel.textColor = self.errorStateColor
self.contentView.addSubview(self.errorLabel)
// 默认设置
self.textColor = .lightGray
self.isImageVisible = true
self.isIconVisible = false
self.placeholderColor = .lightGray
self.isTopTitleVisible = false
self.isAlwaysTopTitleVisible = false
self.isEdit = true
self.isPasswordTextField = false
self.isErrorState = false
}
// MARK: 小图标点击方法
@objc func iconButtonClickAction(sender: UIButton) -> Void {
// 如果是密码框
if (self.isPasswordTextField == true) {
if (self.secureTextEntry == true) {
self.iconImage = UIImage.init(named: "baseline_visibility_white_48pt")
} else {
self.iconImage = UIImage.init(named: "baseline_visibility_off_white_48pt")
}
self.secureTextEntry = !self.secureTextEntry
}
self.iconButtonClickCallback?(self, sender, self.secureTextEntry)
}
// MARK: 实时更新到 InterfaceBuilder
override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
self.setConstraints()
}
override func layoutSubviews() {
super.layoutSubviews()
self.setConstraints()
}
// MARK: 开始输入
func textFieldDidBeginEditing(_ textField: UITextField) {
self.isTopTitleVisible = true
self.isEditing = true
self.setNeedsDisplay()
}
// MARK: 检测输入
func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
// 退出错误状态
self.isErrorState = false
self.errorMessage = ""
if self.textFieldEditingCallback != nil {
return self.textFieldEditingCallback!(self, textField.text, range, string)
}
return true
}
// MARK: 结束输入
func textFieldDidEndEditing(_ textField: UITextField) {
self.isEditing = false
// 检测文本是否为空，如果为空，则重新显示占位符
if self.isAlwaysTopTitleVisible == false {
if textField.text?.count == 0 {
textField.placeholder = self.placeholder
self.isTopTitleVisible = false
if self.isErrorState == true {
self.contentView.layer.borderColor = self.errorStateColor.cgColor
} else {
self.contentView.layer.borderColor = UIColor.lightGray.cgColor
}
}
}
self.setNeedsDisplay()
}
override func draw(_ rect: CGRect) {
// 绘制边框
self.clearsContextBeforeDrawing = true
// 设置线条颜色
var color: UIColor = .clear
if self.isEditing == true || self.isTopTitleVisible == true {
color = self.editingStateColor
}
if self.isEditing == false && self.isTopTitleVisible == true {
color = UIColor.lightGray
}
if self.isErrorState == true {
color = self.errorStateColor
}
color.set()
var bezierPath = UIBezierPath.init()
let cornerRadius: CGFloat = 5
let height: CGFloat = self.frame.size.height
let width: CGFloat = self.frame.size.width
let lineWidth: CGFloat = 1.0
// 绘制边框
bezierPath.move(to: CGPoint.init(x: (self.topTitleLabel?.frame.origin.x)! - 8, y: 0))
bezierPath.addLine(to: CGPoint.init(x: cornerRadius, y: 0))
bezierPath.move(to: CGPoint.init(x: 0, y: cornerRadius))
bezierPath.addLine(to: CGPoint.init(x: 0, y: height - cornerRadius - errorLabelHeight))
bezierPath.move(to: CGPoint.init(x: cornerRadius, y: height - errorLabelHeight))
bezierPath.addLine(to: CGPoint.init(x: width - cornerRadius, y: height - errorLabelHeight))
bezierPath.move(to: CGPoint.init(x: width, y: height - cornerRadius - errorLabelHeight))
bezierPath.addLine(to: CGPoint.init(x: width, y: cornerRadius))
bezierPath.move(to: CGPoint.init(x: width - cornerRadius, y: 0))
bezierPath.addLine(to: CGPoint.init(x: (self.topTitleLabel?.frame.origin.x)! + (self.topTitleLabel?.frame.size.width)! + 8, y: 0))
bezierPath.lineWidth = lineWidth
bezierPath.stroke()
// 绘制左上角
bezierPath = UIBezierPath.init(arcCenter: CGPoint.init(x: cornerRadius, y: cornerRadius), radius: cornerRadius, startAngle: CGFloat.pi, endAngle: 3.0 * CGFloat.pi / 2.0, clockwise: true)
bezierPath.lineWidth = lineWidth
bezierPath.stroke()
// 绘制左下角
bezierPath = UIBezierPath.init(arcCenter: CGPoint.init(x: cornerRadius, y: height - cornerRadius - self.errorLabelHeight), radius: cornerRadius, startAngle: CGFloat.pi / 2.0, endAngle: CGFloat.pi, clockwise: true)
bezierPath.lineWidth = lineWidth
bezierPath.stroke()
// 绘制右下角
bezierPath = UIBezierPath.init(arcCenter: CGPoint.init(x: width - cornerRadius, y: height - cornerRadius - self.errorLabelHeight), radius: cornerRadius, startAngle: 0, endAngle: CGFloat.pi / 2.0, clockwise: true)
bezierPath.lineWidth = lineWidth
bezierPath.stroke()
// 绘制右上角
bezierPath = UIBezierPath.init(arcCenter: CGPoint.init(x: width - cornerRadius, y: cornerRadius), radius: cornerRadius, startAngle: 3.0 * CGFloat.pi / 2.0, endAngle: 0, clockwise: true)
bezierPath.lineWidth = lineWidth
bezierPath.stroke()
}
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
textField.resignFirstResponder()
return true
}
private func setConstraints() -> Void {
let contentViewLeading = NSLayoutConstraint.init(item: self.contentView, attribute: .leading, relatedBy: .equal, toItem: self, attribute: .leading, multiplier: 1.0, constant: 0.0)
let contentViewTop = NSLayoutConstraint.init(item: self.contentView, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1.0, constant: 0.0)
let contentViewBottom = NSLayoutConstraint.init(item: self.contentView, attribute: .bottom, relatedBy: .equal, toItem: self.errorLabel, attribute: .top, multiplier: 1.0, constant: 0.0)
let contentViewTrailing = NSLayoutConstraint.init(item: self.contentView, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: 1.0, constant: 0.0)
self.addConstraints([contentViewLeading, contentViewTop, contentViewBottom, contentViewTrailing])
// 错误信息：底部预留高度固定的 label 作为错误信息显示
let errorLabelLeading = NSLayoutConstraint.init(item: self.errorLabel, attribute: .leading, relatedBy: .equal, toItem: self, attribute: .leading, multiplier: 1.0, constant: 0.0)
let errorLabelTrailing = NSLayoutConstraint.init(item: self.errorLabel, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: 1.0, constant: 0.0)
let errorLabelBottom = NSLayoutConstraint.init(item: self.errorLabel, attribute: .bottom, relatedBy: .equal, toItem: self, attribute: .bottom, multiplier: 1.0, constant: 0.0)
let errorLabelHeight = NSLayoutConstraint.init(item: self.errorLabel, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: self.errorLabelHeight)
self.addConstraints([errorLabelLeading, errorLabelTrailing, errorLabelBottom, errorLabelHeight])
// 图片约束
let headerImageLeading = NSLayoutConstraint.init(item: self.headerImageView, attribute: .leading, relatedBy: .equal, toItem: self, attribute: .leading, multiplier: 1.0, constant: 8.0)
let headerImageTop = NSLayoutConstraint.init(item: self.headerImageView, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1.0, constant: 8.0)
let headerImageBottom = NSLayoutConstraint.init(item: self.headerImageView, attribute: .bottom, relatedBy: .equal, toItem: self.contentView, attribute: .bottom, multiplier: 1.0, constant: -8.0)
var headerImageWidth = NSLayoutConstraint.init(item: self.headerImageView, attribute: .width, relatedBy: .equal, toItem: self.headerImageView, attribute: .height, multiplier: 1.0, constant: 0.0)
if self.isImageVisible == false {
// 如果图标不可见，设置宽度为0的约束
headerImageWidth = NSLayoutConstraint.init(item: self.headerImageView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 0.0)
}
self.addConstraints([headerImageLeading, headerImageTop, headerImageBottom, headerImageWidth])
// 小图标约束
let iconButtonTop = NSLayoutConstraint.init(item: self.iconButton, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1.0, constant: 8.0)
let iconButtonBottom = NSLayoutConstraint.init(item: self.iconButton, attribute: .bottom, relatedBy: .equal, toItem: self.contentView, attribute: .bottom, multiplier: 1.0, constant: -8.0)
let iconButtonTrailing = NSLayoutConstraint.init(item: self.iconButton, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: 1.0, constant: -8.0)
var iconButtonWidth = NSLayoutConstraint.init(item: self.iconButton, attribute: .width, relatedBy: .equal, toItem: self.iconButton, attribute: .height, multiplier: 1.0, constant: 0.0)
if self.isIconVisible == false {
// 如果图标不可见，设置宽度为0的约束
iconButtonWidth = NSLayoutConstraint.init(item: self.iconButton, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 0.0)
}
self.addConstraints([iconButtonTop, iconButtonBottom, iconButtonTrailing])
if self.iconText == nil || self.iconText!.count <= 0 {
self.addConstraint(iconButtonWidth)
}
// 输入框约束
let textFieldImageLeading = NSLayoutConstraint.init(item: self.textField, attribute: .leading, relatedBy: .equal, toItem: self.headerImageView, attribute: .trailing, multiplier: 1.0, constant: 8.0)
let textFieldImageTop = NSLayoutConstraint.init(item: self.textField, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1.0, constant: 0.0)
let textFieldImageBottom = NSLayoutConstraint.init(item: self.textField, attribute: .bottom, relatedBy: .equal, toItem: self.contentView, attribute: .bottom, multiplier: 1.0, constant: 0.0)
let textFieldTrailing = NSLayoutConstraint.init(item: self.textField, attribute: .trailing, relatedBy: .equal, toItem: self.iconButton, attribute: .leading, multiplier: 1.0, constant: 0.0)
self.addConstraints([textFieldImageLeading, textFieldImageTop, textFieldImageBottom, textFieldTrailing])
// 顶部标题
let topTitleLableLeading = NSLayoutConstraint.init(item: self.topTitleLabel!, attribute: .leading, relatedBy: .equal, toItem: self.headerImageView, attribute: .trailing, multiplier: 1.0, constant: 8.0)
let topTitleLableVerticalCenter = NSLayoutConstraint.init(item: self.topTitleLabel!, attribute: .centerY, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1.0, constant: 0.0)
self.addConstraints([topTitleLableLeading, topTitleLableVerticalCenter])
}
}
|