Swift.自定制选择商品数量View
2019-02-16 本文已影响2人
王四猫
效果图
实现效果:
- frame可自定义,进行了适配.注意点在于为了保证显示效果,view.height不能小于view.width/3.
- 可在init方法中设定默认显示数字,以及最大可选数字.
- 通过block进行点击加减按钮的方法回调
- 可直接调用只读属性来获取当前显示数字.
实现方式:
-
添加subView,左侧button,中间显示Label,右侧button.并且为左右button设定可点状态和不可点状态.
-
添加显示数字属性以及最大可选数属性.
-
重写init方法实现适配,设定view.height不能小于view.width/3
-
添加block回调.
1.添加subView,左侧button,中间显示Label,右侧button.并且为左右button设定可点状态和不可点状态.
/// 左侧减按钮
private let subtractButton: UIButton = {
let button = UIButton()
button.isEnabled = false
button.tag = 0
button.setBackgroundImage(UIImage(named: "selectNumber_subtractIsEnableTrue"), for: .normal)
button.setBackgroundImage(UIImage(named: "selectNumber_subtractIsEnableFalse"), for: .disabled)
return button
}()
/// 中间显示label
private lazy var showLabel: UILabel = {
let label = UILabel()
label.backgroundColor = UIColor(red: 246/255, green: 246/255, blue: 246/255, alpha: 1)
label.textColor = UIColor(red: 51/255, green: 51/255, blue: 51/255, alpha: 1)
label.text = "\(_selectedNumber)"
label.font = UIFont.systemFont(ofSize: 13)
label.textAlignment = .center
return label
}()
/// 右侧加按钮
private let addButton: UIButton = {
let button = UIButton()
button.tag = 1
button.setBackgroundImage(UIImage(named: "selectNumber_addEnableTrue"), for: .normal)
button.setBackgroundImage(UIImage(named: "selectNumber_addEnableFalse"), for: .disabled)
return button
}()
2.添加显示数字属性以及最大可选数属性.
/// 最大显示数,可以通过初始化设置
private var maxSelectNumber: Int = 99
/// 选择数量,private,外部不可调用
private var _selectedNumber: Int = 1{
/// 当选择数量修改时进行显示label的文字修改,以及加减按钮的状态修改.
didSet{
self.subtractButton.isEnabled = _selectedNumber == 1 ? false : true
self.addButton.isEnabled = _selectedNumber == maxSelectNumber ? false : true
self.showLabel.text = "\(_selectedNumber)"
}
}
/// 外部调用当前显示数量,只读,不可修改.防止异常
public var selectedNumber: Int{
get {
return _selectedNumber
}
}
3.重写init方法实现适配,设定view.height不能小于view.width/3
init(frame: CGRect, defaultNumber: Int = 1, maxNumber: Int = 99){
/// 加入frame限制,保证按钮size小于view.width*1/3,保证显示效果
let frame = CGRect(x: frame.origin.x, y: frame.origin.y, width: frame.width, height: frame.height < frame.width/3 ? frame.height : frame.width/3)
super.init(frame: frame)
self.maxSelectNumber = maxNumber
self.setValue(defaultNumber, forUndefinedKey: "selectedNumber")
drawMyView()
}
4.添加block回调.
/// 修改数量回调,减回调false,加回调true
public var backEditNumber: ((Bool) -> ())?
/// 点击加减按钮
@objc private func onClickChangeButton(sender: UIButton) {
switch sender.tag {
case 0:
self._selectedNumber -= 1
if backEditNumber != nil {
backEditNumber!(false)
}
case 1:
self._selectedNumber += 1
if backEditNumber != nil {
backEditNumber!(true)
}
default:
break
}
}
使用方法:
private lazy var selectNumberView: EWSelectNumberView = {
let view = EWSelectNumberView(frame: CGRect(x: 50, y: 200, width: 96, height: 24), defaultNumber: 99, maxNumber: 100)
view.backEditNumber = { bool in
var operation: String = bool == false ? "减" : "加"
EWToast.showBottomWithText(text: "1号:\(operation)")
self.showLabel1.text = "\(view.selectedNumber)"
}
return view
}()
加减号图片我随便找的,如果接入使用,可以自己修改为合适的图片.
demo地址:EWSelectNumberView
有问题欢迎探讨.