Search code examples
iosswiftuitextfielduistepper

Swift UIStepper and UITextField inside UITableView text overlapping and unable to syncronize


I need a UITextField and an UIStepper inside a cell and update both when one of two change the value. I reach my goal also using a tableviewcontroller but now I've two problems:

1 - To sync the elements value, I create two arrays that I use to maintain the tag id of each rows. To be sure that all tags are unique, I starting count from 800 for the stepper and from 900 for the text field. The problem is that these values are always duplicated when I add a new row inside the table. As example, if I add a new Row, instead found 802 inside the array, i find 802 and 803 so I'm unable to clearly identify the text assigned to each stepper.

2 - when I update the value through stepper the text on the text field overlap with the previous text like shown in this image:

enter image description here

This happen only for value added during the UITable creation, if I add a value lately this problem doesn't happen.

I clearly understand that all the problems are related to the cell reuse that Swift do for performance reason, but I can't find a solution. My code is below:

    class barcodeInfo: Codable {

    var code = ""
    var quantity = 1

    init(code: String, quantity : Int) {
        self.code = code
        self.quantity = quantity
    }
}


class BarcodeTableViewController: UITableViewController, UITextFieldDelegate {
    var barcodeList = [barcodeInfo]()
    var QuantityMapping = [Int: Int]()
    var currentStepperTag = 900
    var currentQtyTextTag = 800

    override func viewDidLoad() {
        super.viewDidLoad()
        self.tableView.rowHeight = 50;
        self.tableView.dataSource = self
        self.tableView.delegate = self
        barcodeList = [barcodeInfo(code:"test", quantity: 4),barcodeInfo(code:"test1", quantity: 10)]
    }


    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {

        var isBackSpace = Int32()

        if let char = string.cString(using: String.Encoding.utf8) {
            isBackSpace = strcmp(char, "\\b")
        }
        if (isBackSpace != -92) {
            if string.rangeOfCharacter(from: NSCharacterSet.decimalDigits) == nil {
                return false
            }
        }

        guard let textFieldText = textField.text,
            let rangeOfTextToReplace = Range(range, in: textFieldText) else {
                return false
        }
        let substringToReplace = textFieldText[rangeOfTextToReplace]
        let count = textFieldText.count - substringToReplace.count + string.count
        return count <= 5
    }



    override func numberOfSections(in tableView: UITableView) -> Int {
        // #warning Incomplete implementation, return the number of sections
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        print(barcodeList.count)
        return barcodeList.count
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let currentBarcode = barcodeList[indexPath.row]
        print(currentBarcode)

        let cell = tableView.dequeueReusableCell(withIdentifier: "barcodeCell", for: indexPath) as UITableViewCell
        cell.selectionStyle = .none

        // cell.allowsSelection = false
        cell.textLabel?.text = currentBarcode.code

        let customStepper = UIStepper (frame:CGRect(x: self.view.frame.width - 225 , y: 5, width: 100, height: 20))
        //let customStepper = UIStepper()
        customStepper.autorepeat = true
        // Add a function handler to be called when UIStepper value changes
        customStepper.addTarget(self, action: #selector(stepperValueChanged(_:)), for: .valueChanged)
        customStepper.tag = currentStepperTag
        customStepper.maximumValue = 99999
        customStepper.minimumValue = 1
        customStepper.wraps = false
        customStepper.value = Double(currentBarcode.quantity)
        cell.contentView.addSubview(customStepper)

        customStepper.translatesAutoresizingMaskIntoConstraints = false
        customStepper.centerYAnchor.constraint(equalTo: cell.centerYAnchor).isActive = true
        customStepper.widthAnchor.constraint(equalToConstant: 94).isActive = true
        customStepper.heightAnchor.constraint(equalToConstant: 29).isActive = true
        customStepper.rightAnchor.constraint(equalTo: cell.rightAnchor, constant: -30).isActive = true

        let quantityTextField = UITextField(frame: CGRect(x: self.view.frame.width - 300, y: 5, width: 50, height: 20))

        //let quantityTextField = UITextField()
        quantityTextField.delegate = self
        quantityTextField.smartInsertDeleteType = UITextSmartInsertDeleteType.no
        quantityTextField.tag = currentQtyTextTag
        quantityTextField.text = String(Int(customStepper.value))
        cell.contentView.addSubview(quantityTextField)

        quantityTextField.translatesAutoresizingMaskIntoConstraints = false
        quantityTextField.centerYAnchor.constraint(equalTo: cell.centerYAnchor).isActive = true
        quantityTextField.widthAnchor.constraint(equalToConstant: 60).isActive = true
        quantityTextField.heightAnchor.constraint(equalToConstant: 21).isActive = true
        quantityTextField.rightAnchor.constraint(equalTo: cell.rightAnchor, constant: -125).isActive = true

        QuantityMapping[currentStepperTag] = currentQtyTextTag
        print("currentQtyTextTag is now \(Int(currentQtyTextTag))")
        print("currentStepperTag is now \(Int(currentStepperTag))")
        currentQtyTextTag += 1
        currentStepperTag += 1

        return cell
    }


    @IBAction private func stepperValueChanged(_ sender:UIStepper!){
        print(QuantityMapping)
        var tagDecrement = 800
        let textTag = QuantityMapping[sender.tag] ?? 0
        if let currentQuantityTextField = self.view.viewWithTag(textTag) as? UITextField {
            currentQuantityTextField.text = String(Int(sender.value))
            if(textTag >= 900){
                                 tagDecrement = 900
                             }
        //let itmIdx = ((textTag - tagDecrement)-2)
          let  itmIdx = 1
                  self.barcodeList[itmIdx].quantity = Int(sender.value)
        }
        print("sender tag: \(Int(sender.tag))")
        print("textTag \(Int(textTag))")
        print("UIStepper is now \(Int(sender.value))")
    }

Solution

  • So a solution for your textview could be

    cell.contentview.subviews.map(if $0.isKindOf(UITextView.self) { $0.removeFromSuperview() })
    

    then do your addSubview(textView) afterwards

    Do this although for your others added subviews - with the right type check of course