Swift 自定义视图：简单的数量选择控件

学习使用Swift自定义一个简单的视图，传入一个最大值和一个最小值，控件的数字选择和输入范围控制在miniValue和maxValue之间，用于购物模块的数量选择，效果看下图：

1，创建一个view，并完成初始化

class NumberSelectView: UIView{override init(frame: CGRect) {        super.init(frame: frame)        setUpUI()    }        required init?(coder aDecoder: NSCoder) {        fatalError("init(coder:) has not been implemented")    }}

2，在view中添加必要的控件（加减按钮和数字显示fieldText）

    //减号    fileprivate var minusBtn:UIButton!    //加号    fileprivate var plusBtn: UIButton!    //数字显示    open var numField:UITextField!// MARK: - 布局extension NumberSelectView {        fileprivate func setUpUI() {                //绘制边框        self.layer.borderWidth = 1.0        self.layer.masksToBounds = true        self.backgroundColor = UIColor.gray        //添加减号按钮        minusBtn = UIButton(type: .custom)        minusBtn.setTitle("-", for: .normal)        minusBtn.titleLabel?.font = UIFont.systemFont(ofSize: 12.0)        minusBtn.setTitleColor(UIColor.gray, for: .normal)                minusBtn.backgroundColor = UIColor.white        minusBtn.addTarget(self, action: #selector(NumberSelectView.minusNumber), for: .touchUpInside)                        //添加加号按钮        plusBtn = UIButton(type: .custom)        plusBtn.setTitle("+", for: .normal)        plusBtn.titleLabel?.font = UIFont.systemFont(ofSize: 12.0)        plusBtn.setTitleColor(UIColor.black, for: .normal)                plusBtn.backgroundColor = UIColor.white        plusBtn.addTarget(self, action: #selector(NumberSelectView.plusNumber), for: .touchUpInside)                        //添加数字显示        numField = UITextField()        numField.textAlignment = .center        numField.keyboardType = .numberPad        numField.delegate = self        numField.backgroundColor = UIColor.white                numField.addObserver(self, forKeyPath: "text", options: NSKeyValueObservingOptions(rawValue: 0), context: nil)                self.addSubview(minusBtn)        self.addSubview(plusBtn)        self.addSubview(numField)                //位置布局        setUpSunViews()    }

3,导入第三方库SnapKit布局，这里省去了导入过程 

//子控件布局    fileprivate func setUpSunViews() {        minusBtn.snp.makeConstraints { (make) in            make.left.equalTo(self)            make.top.equalTo(self)            make.bottom.equalTo(self)            make.width.equalTo(self.frame.size.width/3)        }                plusBtn.snp.makeConstraints { (make) in            make.right.equalTo(self)            make.top.equalTo(self)            make.bottom.equalTo(self)            make.width.equalTo(self.frame.size.width/3)        }                numField.snp.makeConstraints { (make) in            make.top.equalTo(self)            make.bottom.equalTo(self)            make.left.equalTo(minusBtn.snp.right).offset(1)            make.right.equalTo(plusBtn.snp.left).offset(-1)        }    }

4，设置需要的view属性 这里只设置了圆角裁切、边框颜色、背景色、可选最小值、最大值和当前值

//最小值    open var miniValue:String? = "1" {        didSet {             numField.text = miniValue        }    }            //最大值    open var maxValue:String? = "11"            //当前值    open var currentValue:String? {        get {            return numField.text        }    }            //边框颜色    open var borderColor = UIColor.red {        didSet{            self.layer.borderColor = borderColor.cgColor        }    }        //圆角裁切    open var cornerRad = CGFloat() {        didSet {            self.layer.cornerRadius = cornerRad        }    }

5，加减号的点击事件

// MARK: - 加减号的点击事件extension NumberSelectView {        //减号事件    @objc func minusNumber() {                        let currentText = NSString(string: numField.text!)        var currentValue: Int = currentText.integerValue                if currentText.isEqual(to: "") {            numField.text = miniValue            return        }                //减到最小值之后，不能再减        if currentValue == NSString(string: miniValue!).integerValue {            return        }                currentValue-=1                numField.text = "\(currentValue)"            }        //加号事件    @objc func plusNumber() {                let currentText = NSString(string: numField.text!)        var currentValue: Int = currentText.integerValue                if currentText.isEqual(to: "") {            numField.text = miniValue            return        }                currentValue+=1                numField.text = "\(currentValue)"            }    }

6，TextField的代理事件，用来监听和获取当前值，判断是否已到达最大值和最小值，和对手动输入数字的限制（超过或小于限制范围内的处理）

// MARK: - TextField的代理事件extension NumberSelectView {        override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {                if numField.text == nil {            numField.text = "1"        }                //遇到最小值        if numField.text == miniValue {            minusBtn.setTitleColor(UIColor.gray, for: .normal)            minusBtn.isEnabled = false        } else {            minusBtn.setTitleColor(UIColor.black, for: .normal)            minusBtn.isEnabled = true        }                //遇到最大值        if numField.text == maxValue {            plusBtn.setTitleColor(UIColor.gray, for: .normal)            plusBtn.isEnabled = false        } else {            plusBtn.setTitleColor(UIColor.black, for: .normal)            plusBtn.isEnabled = true        }            }        //手动输入结束编辑    func textFieldDidEndEditing(_ textField: UITextField) {                //结束编辑后的数字小于最小值  或者  大于最大值时，显示最小值（根据需求显示）        if textField.text == "" || Int(textField.text!)! <= NSString(string: miniValue!).integerValue || Int(textField.text!)! >= NSString(string: maxValue!).integerValue{            textField.text = miniValue        } else if Int(textField.text!)! > 1 {            minusBtn.isEnabled = true        }            }    }

7，以上就是一个简单的数字选择控件，把它添加到VC中看看效果

import UIKitclass ViewController: UIViewController {    var selectView = NumberSelectView.init(frame: CGRect(x: 100, y: 100, width: 100, height: 30))        override func viewDidLoad() {        super.viewDidLoad()                view.backgroundColor = UIColor.white        selectView.backgroundColor = UIColor.gray        selectView.cornerRad = 5        selectView.borderColor = .gray        selectView.miniValue = "2" //最小值        selectView.maxValue = "10" //最大值        view.addSubview(selectView)            } }

封装起来就能用了吧