Add a checkmark box

I am building an Application using Swift 4. I have a table view. I click a button that adds content to the table view. When content is added to the table view I want an empty checkbox at the end of the added row. I want the empty checkbox to be able to be clicked and a green checkmark added in it. How do I do that?

I subclassed UIButton, to get a checkbox that can be drawn marked or unmarked.

or this, I created the images of an empty check and a filled checked mark

I made it IBesignable as well for ease of use


import UIKit

let kUncheckedImage = UIImage(named: "unchecked")!
let kCheckedImage = UIImage(named: "checked")!      // Could be replaced by a green checkmark !


@IBDesignable
class CheckBox: UIButton {
    @IBInspectable public var isChecked: Bool = false

    @IBInspectable public var image: UIImage?

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)   
        image = kUncheckedImage
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    override func draw(_ rect: CGRect) {
        if isChecked == true {
                self.setImage(kCheckedImage, for: UIControl.State.normal)
        } else {
            self.setImage(kUncheckedImage, for: UIControl.State.normal)
        }
        image?.draw(in: rect)
    }

    override func awakeFromNib() {
        self.addTarget(self, action:#selector(buttonClicked(sender:)), for: UIControl.Event.touchUpInside)
    }

    @objc func buttonClicked(sender: UIButton) {
    
        if sender == self {
            isChecked = !isChecked
            if isChecked == true {
                    self.setImage(kCheckedImage, for: UIControl.State.normal)
            } else {
                self.setImage(kUncheckedImage, for: UIControl.State.normal)
            }
        }
    }

}

Ok I wrote this code. I didn't get any errors but it doesn't work. How do I use it in my code to get it to work?

It does not work, what do you mean ? >hat do you get ?


Did you define the UIImages (png) and put them in xcAssets ?


I just create IBOutlets for CheckBox


and declare UIButton the class of CheckBox


And that's essentially it

I am sorry. I am still learning Swift and xCode. All I did was copy your code in a different class.


import UIKit

let unCheckedImage = UIImage(named: "unchecked")!
let checkedImage = UIImage(named: "checked")   // Green checkmark

@IBDesignable
class checkBox: UIButton {
    @IBInspectable public var isChecked: Bool = false
    
    @IBInspectable public var image: UIImage?
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        image = unCheckedImage
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    override func draw(_ rect: CGRect) {
        if isChecked == true {
            self.setImage(checkedImage, for: UIControlState.normal)
        } else {
            self.setImage(unCheckedImage, for: UIControlState.normal)
        }
        image?.draw(in: rect)
    }
    
    override func awakeFromNib() {
        self.addTarget(self, action: #selector(buttonClicked(sender:)), for: UIControlEvents.touchUpInside)
    }
    
    @objc func buttonClicked(sender: UIButton) {
        
        if sender == self {
            isChecked = !isChecked
            if isChecked == true {
                self.setImage(checkedImage, for: UIControlState.normal)
            } else {
                self.setImage(unCheckedImage, for: UIControlState.normal)
            }
        }
    }
}

class ViewController: UIViewController, UITextViewDelegate, UITableViewDataSource, UITableViewDelegate {
    
    @IBOutlet weak var table: UITableView!
    
    var data: [String] = []
    var text: String = ""
    
    @IBOutlet weak var txtAddedItem: UITextField!
    @IBOutlet weak var lblCount: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        lblCount.text = String(data.count)
        // Do any additional setup after loading the view, typically from a nib.
        table.dataSource = self
        
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell")!
        cell.textLabel?.text = data[indexPath.row]
        return cell
    }
    
    func addTask() {
        data.insert(text, at: 0)
        let indexPath: IndexPath = IndexPath(row: 0, section: 0)
        table.insertRows(at: [indexPath], with: .automatic)
    }
    
    @IBAction func btnAdd(_ sender: UIButton) {
        
        text = txtAddedItem.text!
            if text == "" {
                return
            }
        else if text != "" {
            addTask()
                
            lblCount.text = String(data.count)
            
        }
            txtAddedItem.text = ""
    }
    
    @IBAction func btnClear(_ sender: UIButton) {
        
        txtAddedItem.text = ""
        data = []
        table.reloadData()
        lblCount.text = String(data.count)
    
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
}

Well, you should better start to understand what you are copying !


In the ViewController, you have defined a button in Interface Builder.

I suppose that is the button you have connected to btnAdd ?


Have you defined its type as CheckedBox (in the attributes inspector) ?


In addition, you need to change the property of the button.


So, if I understand what you are trying to do, you should define the IBAction as


@IBAction func btnAdd(_ sender: CheckBox) { // Now we know it is a checkbox


and after addTask(), you should write:

sender.isChecked = true

I have btnAdd connected to a plus sign so when I tap the plus sign it adds the text in the text field to the table view. I need a separate button created when the text is added to the table view. I need the button to be an unchecked box and I want it at the end of the table view row created. Then when the unchecked box is clicked, I want a green checkmark in it and I want it to be marked as complete. How would I do that? Thank you for your help.

Add a checkmark box
 
 
Q