I am successfully saving the state of tableviewcell by saving the state of cell to dictionary of [IndexPath:Bool] , everything is working fine but problem is when I check mark any cell , a cell from bottom also get strokethrough effect . Only selected cell is supposed to be check marked and strikethrough. Check the image in which bottom is not selected but getting strike through effect , How to resolve this ?
TableViewCell code
let checkedImage = (UIImage(named: "success")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal))! as UIImage
let uncheckedImage = (UIImage(named: "verified")?.withRenderingMode(UIImage.RenderingMode.alwaysOriginal))! as UIImage
var isChecked: Bool = false {
didSet{
if isChecked {
tableRadioButton.setImage(checkedImage, for: .normal)
lblItemName.strikeThrough(true)
lblItemQty.strikeThrough(true)
} else {
tableRadioButton.setImage(uncheckedImage, for: .normal)
lblItemName.strikeThrough(false)
lblItemQty.strikeThrough(false)
}
}
}
#IBAction func RadioButtonTapped(_ sender: UIButton) {
isChecked = !isChecked
radioButtonTapAction?(isChecked)
}
Code of cell for row
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! CustomOrderDetailCell
cell.setCellData(itemDetail: arrForProducts[indexPath.section].items![indexPath.row],currency: self.currency)
let selected = selectedButtonIndex[indexPath] ?? false
cell.isChecked = selected
cell.radioButtonTapAction = {
(checked) in
selectedButtonIndex[indexPath] = checked
print(checked)
}
Related
I have a UITableView. Its cell contains a label that will display a question, a yes button and a no button. The goal is to view questions one by one.
First I call the API to get the questions in the viewDidLoad method:
override func viewDidLoad() {
super.viewDidLoad()
tableView.allowsSelection = false
getQuestions(baseComplainID: "1") { (questions, error) in
self.questions = questions
DispatchQueue.main.async {
self.tableView.reloadData()
}
}
}
In the cellForRowAt method I display them one by one:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as? TableViewCell else {
fatalError("Fatal Error")
}
cell.yesButton.isHidden = false
cell.noButton.isHidden = false
if indexPath.row + 1 == displayNumber {
cell.questionLabel.text = questions[indexPath.row].question_name
} else {
cell.yesButton.isHidden = true
cell.noButton.isHidden = true
}
cell.yesButton.addTarget(self, action: #selector(action), for: .touchUpInside)
cell.noButton.addTarget(self, action: #selector(action), for: .touchUpInside)
return cell
}
and this is the action being executed on clicking yes or no:
#objc func action(sender: UIButton){
let indexPath = self.tableView.indexPathForRow(at: sender.convert(CGPoint.zero, to: self.tableView))
let cell = tableView.cellForRow(at: indexPath!) as? TableViewCell
cell?.yesButton.isEnabled = false
cell?.noButton.isEnabled = false
if sender == cell?.yesButton {
sender.setTitleColor(.black, for: .normal)
sender.backgroundColor = .green
} else {
sender.setTitleColor(.black, for: .normal)
sender.backgroundColor = .green
}
displayNumber += 1
self.tableView.reloadData()
}
Here I just change the background color of the button and increment the display number to display the next question.
All of this works perfect EXCEPT when I scroll, the data gets overridden and sometimes I find the question label empty and the questions replaces each other. I know this is normal due to the cell reusability but I don't know how to fix it.
Any suggestions please?
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
guard let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as? TableViewCell else {
fatalError("Fatal Error")
}
cell.yesButton.isHidden = false
cell.noButton.isHidden = false
if indexPath.row + 1 == displayNumber {
cell.questionLabel.text = questions[indexPath.row].question_name
} else {
cell.yesButton.isHidden = true
cell.noButton.isHidden = true
}
cell.yesButton.addTarget(self, action: #selector(action), for: .touchUpInside)
cell.noButton.addTarget(self, action: #selector(action), for: .touchUpInside)
return cell
}
i feel like your issue lies here in cellForRowAt function.
you have this written
if indexPath.row + 1 == displayNumber { your code here }
but i am unsure as to why you need this.
you should be doing something like this inside cellForRowAt
let data = self.questions
data = data[indexPath.row]
cell.questionLabel.text = data.question_name
you should not be adding 1 to your indexPath.row
You're going to need to keep track of your yes's no's and neither's for each cell. I'd tack an enum onto another data structure along with your questions. Your primary problem was that you were only keeping track of your question. You need to keep track of your answer as well. That way, when you load a cell, you can configure each button with the colors that you want in cellForRow(at:)
struct QuestionAndAnswer {
enum Answer {
case yes
case no
case nada
}
var question: Question
var answer: Answer
}
And try not to reload your whole tableView when a button is pressed. tableView.reloadData() is expensive and distracting to the user. You should only be reloading the row that changed when a button was pressed.
Add callbacks on your cell so that you know which cell the corresponding buttons belong to. Notice how in the onYes and onNo callbacks we keep track of your "yes" or "no" selection then immediately reload the row below. When the row is reloaded, we finally know which color to make the button.
class AnswerCell: UITableViewCell {
#IBOutlet weak var yesButton: UIButton!
#IBOutlet weak var noButton: UIButton!
var onYes: (() -> Void)) = {}
var onNo: (() -> Void)) = {}
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// ...
cell.yesButton.backgroundColor = qAndA.answer == .yes ? .green : .white
cell.noButton.backgroundColor = qAndA.answer == .no ? .green : .white
cell.onYes = {
questionsAndAnswers[indexPath.row].answer = .yes
tableView.reloadRows(at: [indexPath], with: .fade)
}
cell.onNo = {
questionsAndAnswers[indexPath.row].answer = .no
tableView.reloadRows(at: [indexPath], with: .fade)
}
// ...
}
Well, assume you have 10 questions, so a very simple and workaround fix is to declare a new array which has 10 elements as follow
var questionIsLoaded = Array(repeating:true , count 10)
the previous line will declare an array with 10 elements each element is bool which in our case will be true
then declare a function that handles if the question is loaded or not as follows, so if the question is loaded thus, the question with its indexPath should be marked as true and as a result, the yes and no buttons should be hidden else, the buttons should be shown
func handleQuestionIfLoaded(cell:yourCellType, indexPath:IndexPath) {
if questionIsLoaded[indexPath.row] , indexPath.row + 1 == displayNumber { {
questionIsLoaded[indexPath.row] = false
cell.questionLabel.text = questions[indexPath.row].question_name
cell.yesButton.isHidden = questionIsLoaded[indexPath.row]
cell.noButton.isHidden = questionIsLoaded[indexPath.row]
} else {
cell.yesButton.isHidden = questionIsLoaded[indexPath.row]
cell.noButton.isHidden = questionIsLoaded[indexPath.row]
}
cell.yesButton.addTarget(self, action: #selector(action), for: .touchUpInside)
cell.noButton.addTarget(self, action: #selector(action), for: .touchUpInside)
}
then replace the body of cellForRowAt with the function above, then your action function will be as follows
#objc func action(sender: UIButton){
let indexPath = self.tableView.indexPathForRow(at: sender.convert(CGPoint.zero, to: self.tableView))
let cell = tableView.cellForRow(at: indexPath!) as? TableViewCell
cell?.yesButton.isEnabled = questionIsLoaded[indexPath.row]
cell?.noButton.isEnabled = questionIsLoaded[indexPath.row]
if sender == cell?.yesButton {
sender.setTitleColor(.black, for: .normal)
sender.backgroundColor = .green
} else {
sender.setTitleColor(.black, for: .normal)
sender.backgroundColor = .green
}
displayNumber += 1
self.tableView.reloadData()
}
Now, your cells depend on an external dependency which is the array you have declared earlier, this means that when the cells are dequeued, they will be reused according to if the question is loaded or not by asking the array's element at the specific indexPath at first if the element is true or false
I have checkbox and label inside a tableview and when we click checkbox the price present in label in each cell of tableview should add to another label which is present in another view
#IBAction func checkUncheckButtonAction(_ sender: UIButton) {
if let cell = sender.superview?.superview as? PrepaidPageTableViewCell
{
let indexPath = tableviewOutlet.indexPath(for: cell)
if cell.checkUncheckButtonOutlet.isSelected == false
{
cell.checkUncheckButtonOutlet.setImage(#imageLiteral(resourceName: "checked_blue"), for: .normal)
cell.checkUncheckButtonOutlet.isSelected = true
viewHeightConstraint.constant = 65
cell.amountOutlet.text = "₹ "+amount_receivable_from_customerArray[indexPath!.row]
isPrepaidOrder = false
tableviewOutlet.reloadData()
} else {
cell.checkUncheckButtonOutlet.setImage(#imageLiteral(resourceName: "unchecked_blue"), for: .normal)
cell.checkUncheckButtonOutlet.isSelected = false
self.viewHeightConstraint.constant = 0
tableviewOutlet.reloadData()
}
}
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "PrepaidPageTableViewCell") as! PrepaidPageTableViewCell
cell.customerNameOutlet.text = buyer_nameArray[indexPath.row]
cell.deliverydateOutlet.text = "Delivery Date:\(dispatch_dateArray[indexPath.row])"
cell.amountOutlet.text = "₹\(amount_receivable_from_customerArray[indexPath.row])"
cell.dispatchidoutlet.text = "Dispatch ID: \(id_dispatch_summaryArray[indexPath.row])"
cell.dispatchdateOutlet.text = "Dispatch Date:\(dispatch_dateArray[indexPath.row])"
cell.checkUncheckButtonOutlet.setImage(#imageLiteral(resourceName: "unchecked_blue"), for: .normal)
cell.selectionStyle = .none
return cell
}
I have a problem when I click a button in UITableView.
When I click a button to change its image, another indexpath changes it image.
Two buttons change their image when I click one button.
This video is shown the problem :
Video Shown Problem
This is my code to button click :
#objc func btnAction(_ sender: UIButton) {
let section = 0
let row = sender.tag
let indexPath = IndexPath(row: row, section: section)
//let point = sender.convert(CGPoint.zero, to: servicestable as UIView)
// let indexPath: IndexPath! = servicestable.indexPathForRow(at: point)
let cell: ServicesCell = self.servicestable.cellForRow(at: indexPath) as! ServicesCell
print(sender.tag)
if services[indexPath.row].choose == "0" {
cell.check.setImage(UIImage(named: "Rectangle1"), for: .normal)
services[indexPath.row].choose = "1"
// checkchoose.updateValue(1, forKey: indexPath.row)
print("number: " + String(indexPath.row))
chooseservicesw.updateValue("0", forKey: String(indexPath.row+1))
// servicestable.reloadData()
}
else if services[indexPath.row].choose == "1" {
cell.check.setImage(UIImage(named: "checkbox1"), for: .normal)
services[indexPath.row].choose = "0"
// checkchoose.updateValue(0, forKey: indexPath.row)
print("number: " + String(indexPath.row))
chooseservicesw.removeValue(forKey: String(indexPath.row+1))
// servicestable.reloadData()
} }
and this is my code to Cell:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell:ServicesCell = servicestable.dequeueReusableCell(withIdentifier: "servicess", for: indexPath) as! ServicesCell
cell.name.text = services[indexPath.row].name
let photo = services[indexPath.row].icon
let imgURL = MainUrl + photo! // or jpg
// cell.icon.setImageFromURl(stringImageUrl: imgURL)
let url = URL(string: imgURL)
cell.icon.kf.setImage(with: url)
// print(checkchoose[indexPath.row])
print(services[indexPath.row].choose)
cell.check.tag = indexPath.row
cell.check.addTarget(self, action: #selector(self.btnAction(_:)), for: .touchUpInside)
cell.checkpay.tag = indexPath.row
cell.checkpay.addTarget(self, action: #selector(self.btnAction2(_:)), for: .touchUpInside)
cell.price.addTarget(self, action: #selector(self.endedit(_:)), for: .editingDidEnd)
cell.price.addTarget(self, action: #selector(self.endedit(_:)), for: .editingChanged)
cell.selectionStyle = .none
return cell
}
When you perform dequeueReusableCell, iOS not generates your array's counts of cells. Instead of this, it generates fewer cells and use these cells again and again on scrolls. In your case selected shown cells are actually same cells.
The solution: You should store the selection flag for your cells in your datasource array (in your case its services). And in cellForRowAt method you should select or deselect checkboxes according to your stored selection data.
Edit:
if services[indexPath.row].choose == "0" {
cell.check.setImage(UIImage(named: "Rectangle1"), for: .normal)
services[indexPath.row].choose = "1"
chooseservicesw.updateValue("0", forKey: String(indexPath.row+1))
} else if services[indexPath.row].choose == "1" {
cell.check.setImage(UIImage(named: "checkbox1"), for: .normal)
services[indexPath.row].choose = "0"
chooseservicesw.removeValue(forKey: String(indexPath.row+1))
}
Add this part to end of your cellForRowAt method.
This problem is because reuseable cell in Memory you can handle like that:
In Your ViewController or TableViewController add Array that handel selected Model selectedIndexPathServices Add your YourServiceModel
Example
class TableViewController: UITableViewController {
var selectedIndexPathServices :[YourServiceModel] = [YourServiceModel]()
override func viewDidLoad() {
super.viewDidLoad()
}
}
At your btnAction
#objc func btnAction(_ sender: UIButton) {
guard let cell = sender.superview?.superview as? ServicesCell else { return}
let indexPath = self.tableView.indexPath(for: cell)
if selectedIndexPathServices.contains(services[indexPath.row]){
selectedIndexPathServices.remove(at: indexPath.row)
}else{
selectedIndexPathServices.append(services[indexPath.row])
}
}
At your cell:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell:ServicesCell = servicestable.dequeueReusableCell(withIdentifier: "servicess", for: indexPath) as! ServicesCell
cell.name.text = services[indexPath.row].name
let photo = services[indexPath.row].icon
let imgURL = MainUrl + photo! // or jpg
// cell.icon.setImageFromURl(stringImageUrl: imgURL)
let url = URL(string: imgURL)
cell.icon.kf.setImage(with: url)
// print(checkchoose[indexPath.row])
if selectedIndexPathServices.contains(services[indexPath.row]){
if services[indexPath.row].choose == "0" {
cell.check.setImage(UIImage(named: "Rectangle1"), for: .normal)
services[indexPath.row].choose = "1"
chooseservicesw.updateValue("0", forKey: String(indexPath.row+1))
}
else if services[indexPath.row].choose == "1" {
cell.check.setImage(UIImage(named: "checkbox1"), for: .normal)
services[indexPath.row].choose = "0"
chooseservicesw.removeValue(forKey: String(indexPath.row+1))
}
}
cell.check.tag = indexPath.row
cell.check.addTarget(self, action: #selector(self.btnAction(_:)), for: .touchUpInside)
cell.checkpay.tag = indexPath.row
cell.checkpay.addTarget(self, action: #selector(self.btnAction2(_:)), for: .touchUpInside)
cell.price.addTarget(self, action: #selector(self.endedit(_:)), for: .editingDidEnd)
cell.price.addTarget(self, action: #selector(self.endedit(_:)), for: .editingChanged)
cell.selectionStyle = .none
return cell
}
In my application I have an multiple selection and select all option, I've tried by used below code but am facing an issue with selection.
If I press selectAll it checks and unchecks clearly and If suppose, I choose an single selection it selected but the selected cell is not higlighted.
Can you any one help me to figure out.
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return self.array.count
}
In cellForRowAtIndexPath ,
let cell = self.multipleSelectionTableview.dequeueReusableCell(withIdentifier:multiSelectionIdentifier , for: indexPath) as! MultipleSelectionCell
if self.selectedRows.contains(indexPath){
cell.checkBoxBtn.isSelected = true
cell.checkBoxBtn.setImage(UIImage.init(named: "check"), for: .normal)
} else {
cell.checkBoxBtn.isSelected = false
cell.checkBoxBtn.setImage(UIImage.init(named: "uncheck"), for: .normal)
}
if self.multipleSelectionStatusBtn.isSelected == true {
self.multipleSelectionStatusBtn.isSelected = true
cell.checkBoxBtn.setImage(UIImage.init(named: "check"), for: .normal)
} else {
self.multipleSelectionStatusBtn.isSelected = false
cell.checkBoxBtn.setImage(UIImage.init(named: "uncheck"), for: .normal)
}
cell.checkBoxBtn.tag = indexPath.row
return cell
In checkbox selection method,
let selectedIndexPath = IndexPath(row: sender.tag, section: 0)
self.multipleSelectionTableview.deselectRow(at: selectedIndexPath, animated: true)
if self.selectedRows.contains(selectedIndexPath)
{
self.selectedRows.remove(at: self.selectedRows.index(of: selectedIndexPath)!)
}
else
{
self.selectedRows.append(selectedIndexPath)
print(self.selectedRows)
}
self.multipleSelectionTableview.reloadData()
In selectAll method,
if (sender.isSelected == true)
{
sender.setImage(UIImage(named: "uncheck"), for: .normal)
sender.isSelected = false;
// isSelecting = false
self.selectedRows = self.getAllIndexpaths()
self.multipleSelectionTableview.reloadData()
}
else
{
// isSelecting = true
sender.setImage(UIImage(named: "check"), for: .normal)
sender.isSelected = true;
self.selectedRows = self.getAllIndexpaths()
self.multipleSelectionTableview.reloadData()
}
For getAllIndexPaths Method,
func getAllIndexpaths() -> [IndexPath] {
var indexPaths: [IndexPath] = []
for j in 0..<self.multipleSelectionTableview.numberOfRows(inSection: 0) {
indexPaths.append(IndexPath(row: j, section: 0))
}
return indexPaths
}
Actually you are reloading data when check box is checked or unchecked. That's the reason the table view doesn't keep the selection.
Solution.
You need to keep track of the selected index paths. And in cellForRowAt: you need to check that if it is the checked index path the you need to make cell highlight by changing its background colour otherwise set cell background colour white or something else.
For eg.
//In cellForRowAtIndexPath
if arrSelectedIndexPath.contains(indexPath) {
// checkbox is checked, change cell bg color
} else {
// checkbox is not checked
}
arrSelectedIndexPath is an [IndexPath] an array of index paths. When check box is selected you need to insert index path in an array and when check box is unchecked then you need to delete that index path from an array.
I am confused with your logic implementation in cellForRowAtIndexpath:
First you are checking if selectedRows array contains selected index path or not and setting the UI of checkBoxBtn:
let cell = self.multipleSelectionTableview.dequeueReusableCell(withIdentifier:multiSelectionIdentifier , for: indexPath) as! MultipleSelectionCell
if self.selectedRows.contains(indexPath){
cell.checkBoxBtn.isSelected = true
cell.checkBoxBtn.setImage(UIImage.init(named: "check"), for: .normal)
} else {
cell.checkBoxBtn.isSelected = false
cell.checkBoxBtn.setImage(UIImage.init(named: "uncheck[enter image description here][1]"), for: .normal)
}
Then again you are checking for multipleSelectionStatusBtn and changing the UI of checkBoxBtn :
if self.multipleSelectionStatusBtn.isSelected == true {
self.multipleSelectionStatusBtn.isSelected = true
cell.checkBoxBtn.setImage(UIImage.init(named: "check_timesheet"), for: .normal)
} else {
self.multipleSelectionStatusBtn.isSelected = false
cell.checkBoxBtn.setImage(UIImage.init(named: "uncheck_timesheet"), for: .normal)
}
cell.checkBoxBtn.tag = indexPath.row
return cell
When tableView will reload obviously this will work in multiple selection and not in single selection.
Change
In selectAll method :
if (sender.isSelected == true)
{
sender.setImage(UIImage(named: "uncheck"), for: .normal)
sender.isSelected = false;
// isSelecting = false
self.selectedRows.removeAll()
self.multipleSelectionTableview.reloadData()
}
else
{
// isSelecting = true
sender.setImage(UIImage(named: "check"), for: .normal)
sender.isSelected = true;
self.selectedRows = self.getAllIndexpaths()
self.multipleSelectionTableview.reloadData()
}
In cellForRowAtIndexPath :
let cell = self.multipleSelectionTableview.dequeueReusableCell(withIdentifier:multiSelectionIdentifier , for: indexPath) as! MultipleSelectionCell
if self.selectedRows.contains(indexPath){
cell.checkBoxBtn.isSelected = true
cell.checkBoxBtn.setImage(UIImage.init(named: "check"), for: .normal)
} else {
cell.checkBoxBtn.isSelected = false
cell.checkBoxBtn.setImage(UIImage.init(named: "uncheck[enter image description here][1]"), for: .normal)
}
if getTimeSheetJSON[indexPath.row]["TaskName"].string == "" {
cell.checkBoxBtn.isHidden = true
} else {
cell.checkBoxBtn.isHidden = false
}
cell.checkBoxBtn.tag = indexPath.row
return cell
Hope this works as I haven't compiled your code in Xcode.
You have to store selected index path in Array Like this Way you can do this easily.
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
var selectedRow:[IndexPath] = []
#IBOutlet var tblView:UITableView!
override func viewDidLoad()
{
super.viewDidLoad()
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section:
Int) -> Int
{
return 100
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
{
var cell = tableView.dequeueReusableCell(withIdentifier: "Cell")
if cell == nil
{
cell = UITableViewCell(style: .subtitle, reuseIdentifier: "Cell")
}
cell?.textLabel?.text = String(format:"%#",indexPath.row)
if selectedRow.contains(indexPath)
{
cell?.accessoryType = .checkmark
}
else
{
cell?.accessoryType = .none
}
return cell!
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)
{
if selectedRow.contains(indexPath)
{
// For Remove Row selection
selectedRow.remove(at: selectedRow.index(of: indexPath)!)
}
else
{
selectedRow.append(indexPath)
}
tableView.reloadData()
}
// Call this method for Select All
func selectAllCall()
{
var indexPaths: [IndexPath] = []
for j in 0..<100
{
indexPaths.append(IndexPath(row: j, section: 0))
}
selectedRow.removeAll()
selectedRow.append(contentsOf: indexPaths)
tblView.reloadData()
}
}
I have a TableView with cells that when pressed anywhere in the cell, it adds a checkmark on the right. I only want the checkmark to show up if the cell is tapped on the right side. Here's the pertinent section of code from the TableViewController:
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "TaskCell", for: indexPath) as! TaskCell
let task = tasks[indexPath.row]
cell.task = task
if task.completed {
cell.accessoryType = UITableViewCellAccessoryType.checkmark;
} else {
cell.accessoryType = UITableViewCellAccessoryType.none;
}
return cell
}
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
tableView.deselectRow(at: indexPath, animated: false)
var tappedItem = tasks[indexPath.row] as Task
tappedItem.completed = !tappedItem.completed
tasks[indexPath.row] = tappedItem
tableView.reloadRows(at: [indexPath], with: UITableViewRowAnimation.none)
}
}
Is there a simple way to do that, or to do it using storyboard? My Swift skills leave a LOT to be desired. Any help would be appreciated! Thank you!
Instead of the built-in checkmark accessory type, why not provide, as accessory view, an actual button that the user can tap and that can display the checkmark? The button might, for example, display as an empty circle normally and as a circle with a checkmark in it when the user taps it.
Otherwise, you're expecting the user to guess at an obscure interface, whereas, this way, it's perfectly obvious that you tap here to mark the task as done.
Example:
To accomplish that, I created a button subclass and set the accessoryView of each cell to an instance of it:
class CheckButton : UIButton {
convenience init() {
self.init(frame:CGRect.init(x: 0, y: 0, width: 20, height: 20))
self.layer.borderWidth = 2
self.layer.cornerRadius = 10
self.titleLabel?.font = UIFont(name:"Georgia", size:10)
self.setTitleColor(.black, for: .normal)
self.check(false)
}
func check(_ yn:Bool) {
self.setTitle(yn ? "✔" : "", for: .normal)
}
override init(frame:CGRect) {
super.init(frame:frame)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
The title of the button can be the empty string or a checkmark character, thus giving the effect you see when the button is tapped. This code comes from cellForRowAt::
if cell.accessoryView == nil {
let cb = CheckButton()
cb.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
cell.accessoryView = cb
}
let cb = cell.accessoryView as! CheckButton
cb.check(self.rowChecked[indexPath.row])
(where rowChecked is an array of Bool).
You will have to define your own accessory button, and handle its own clicks.
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "TaskCell", for: indexPath) as! TaskCell
let task = tasks[indexPath.row]
cell.task = task
let checkButton = UIButtonSubclass()
...configure button with your circle and check images and a 'selected property'...
checkButton.addTarget(self, action:#selector(buttonTapped(_:forEvent:)), for: .touchUpInside)
cell.accessoryView = checkButton
checkButton.selected = task.completed //... this should toggle its state...
return cell
}
func buttonTapped(_ target:UIButton, forEvent event: UIEvent) {
guard let touch = event.allTouches?.first else { return }
let point = touch.location(in: self.tableview)
let indexPath = self.tableview.indexPathForRow(at: point)
if let task = tasks[indexPath.row] {
task.completed = !task.completed
}
tableView.reloadData() //could also just reload the row you tapped
}
Though, it has been noted that using tags to detect which row was tapped is dangerous if you start to delete rows. You can read more here https://stackoverflow.com/a/9274863/1189470
EDITTED
Removed the reference to tags per #matt