CODEWITHSUNDEEP
ioscocoa-touch
Alexandru Vasiliu
Alexandru Vasiliu

Reputation: 564

How to add checkbox to table cell

I am working on a project where I program a shopping app. I have 2 Table Views in a big UIViewController.

As you can see from picture, my 1st table called products and my 2nd table piesa. My 1st table works as a list of the items I have on stock (plafon, plafon cu 2 parti culisante, etc), when i tap one of the items from the table, it will remove it from thereand add it to my 2nd tabel. It works like a shopping list. I implemented this part. I am stuck on the 2nd part.

What do I want now is: on the items I have in table 2, for example the 1st cell plafon to have 4 checkboxes on him. It will work something like that What do you want to do with your item? Replaced, paint it, repair or or repaint it. To have 4 options.

My question is, how do I add checkboxes to each table cell from 2nd table. Is there any way to make checkboxes depend on each other (for example, can't have 2 checkboxes active at same time: repaint and paint, only one or 2 that differ like repair and repaint).

I am a starter newb in iOS, thanks in advance.

Upvotes: 0

Views: 234

Answers (2)

jose920405
jose920405

Reputation: 8049

You should not have 2 tables in a controller, in fact is not a good practice.

What you need are 2 sections and nothing else. With that, you could use only one table.

The rest is logic problem and nothing else.

You must add a new key in the object, which tells you if you are selected or not.

In your custom cell (I hope and assume that you must be using one). Create a button to which you going to change the state based on the new key that you added (remember this key must be a boolean, for example "isSelected" = true).

The object that you need should be something like:

data = 
(
  {
    sectionName: "Piese disponible"
    rows: (
      {
        name: "Plafon",
        isSelected: false //if need this param in this section
      },
      {
        name: "Plafon cu 2 parti culisante",
        isSelected: false //if need this param in this section
      },
      {
        name: "etc etc etc",
        isSelected: false //if need this param in this section
      }
    )
  },
  {
    sectionName: "Piese"
    rows: (
      {
        name: "Plafon",
        isSelected: false //for the checkbox btn
      }
    )
  }
)

In your didSelectRowAtIndexPath Delegate method you need change the isSelected key.

let cell = tableView.cellForRowAtIndexPath(indexPath) as! yourCustomTableViewCell
let eachRow = yourArray.objectAtIndex(indexPath.row)
let isSelected = eachRow["isSelected"] as! Bool

if isSelected == false {
    eachRow.setValue(true, forKey: "isSelected")
}

tableView.reloadRowsAtIndexPaths([NSIndexPath(forRow: indexPath.row, inSection: indexPath.section)], withRowAnimation: .Fade)

And i you need unselect the last selected cell, create a loop and search the object with the isSelected key in true and set to false and use reloadRowsAtIndexPaths in that cell

Something like:

for eachInfo in yourArray {
    let isSelectedRow = eachRow["isSelected"] as! Bool
    if isSelectedRow == true {
        eachInfo.setValue(false, forKey: "isSelected")
        tableView.reloadRowsAtIndexPaths([NSIndexPath(forRow: i, inSection: theSection)], withRowAnimation: .Fade)
        break
    }
    i += 1
}

However, considering that the cells are reused and must rendering your button with the new state must put your logic in cellForRowAtIndexPath delegate method.

Something Like:

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cellIdentifier = "yourcustomCellId"
    var cell: yourCustomTableViewCell! = tableView.dequeueReusableCellWithIdentifier(cellIdentifier) as? yourCustomTableViewCell
    if cell == nil {
        tableView.registerNib(UINib(nibName: "yournibCellname", bundle: nil), forCellReuseIdentifier: cellIdentifier)
        cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier) as? yourCustomTableViewCell

    }
    cell.selectionStyle = UITableViewCellSelectionStyle.None

    let eachRow = yourArray.objectAtIndex(indexPath.row)
    let isSelected = eachRow["isSelected"] as! Bool
    var imageNamebtn = "unselectedImage"
    if isSelected == true {
        imageName = "selectedImage"
    }
    cell.yourButon.backgroundImage = UIImage(named: imageName)
    return cell
}

For Build The count of sections you need use numberOfSectionsInTableView from UITableViewDataSource and for build the section design need viewForHeaderInSection.

I hope I've helped

Upvotes: 2

Juan
Juan

Reputation: 21

You are going to need to make a custom cell. You can change whatever you want to the UI for the custom cell and then hook up the exclusive logic inside your code. Here is a tutorial on how to use custom cells. Skip down to the part that starts with Designing Your Own Prototype Cells. Hope this helps!

Upvotes: 1

Related Questions