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 UIKit

class 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)

}
}

封装起来就能用了吧