Swift.自定制选择商品数量View

效果图

实现效果:

• frame可自定义,进行了适配.注意点在于为了保证显示效果,view.height不能小于view.width/3.
• 可在init方法中设定默认显示数字,以及最大可选数字.
• 通过block进行点击加减按钮的方法回调
• 可直接调用只读属性来获取当前显示数字.

实现方式:

1. 添加subView,左侧button,中间显示Label,右侧button.并且为左右button设定可点状态和不可点状态.

2. 添加显示数字属性以及最大可选数属性.

3. 重写init方法实现适配,设定view.height不能小于view.width/3

4. 添加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

有问题欢迎探讨.