Table view


Add a table:
1. Search for table view and add it to the screen. (Constrain it).
2. Add a table cell from the object library into the table. Drop it into the top of the table view. A cell is the prototype of the table. Give the table cell a name at its identifier in the attributes inspector. (Double click it such that you get table view cell and not prototype cell).
3. Outlet table view into the view controller.

Populate the table view.
1. Let's say you named your table view cell tableViewCell as its identifier. Set the following as as property in the view controller.
let reuseIdentifier = "tableViewCell"
2. Create an array of strings.
3. at the view controller class:
class ViewController: UIViewController, UITableViewDataSource
4. Implement the following methods:
 //type cellforrowat
 
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: reuseIdentifier, for: indexPath)
        cell.textLabel?.text = nameOfArray[indexPath.row]
     cell.textLabel?.lineBreakMode = .byWordWrapping
        cell.textLabel?.numberOfLines = 2
        return cell
    }
 
    //type number of sections
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
 
    //type numberofrows
 
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return nameOfArray.count
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return UITableViewAutomaticDimension
    }


5. Inside viewdidload, type
Note that loading data always comes before this.
tableView.dataSource = self
(The datasource for the table view is a property in this class)


Notes:
Shows table with header and footer, single column.
Users are able to edit the values in the table.

To avoid errors when reloading data:
DispatchQueue.main.async{
                    self.PupilsTableView.reloadData()
                }


Custom Table View Cell
Notes: Display information and adjust the UI (colour, font, etc)
1. Create new file - > Cocoa touch class. It sets up the class for you.
2. Make it a subclass of UITableViewCell.
3. Give it a name in Class: MyUITableViewCell
4. Save it.
5. Go to the main storyboard. Select the table view cell. In the class inspector. Select its class to be MyUITableViewCell.
6. You can then drag and drop UI elements into the prototype cell: like the ImageView. After dragging it in, make it fill up the cell by adjusting the margins in add new constraints.
7. Select the cell, go to the size inspector and change the size, for instance 160.
8. Also set the row height to be 160 in the table view. (Click on table view in the left hand side).
9. Open assistant editor.
10. Go to the MyUITableViewCell class.
11. Control click the image view to the class and create an outlet.
12. Turn off the assistant editor.
13. Go to the view controller and look for the tableview (cell for row at function). Change the function:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell: MyTableViewCell = tableView.dequeueReusableCell(withIdentifier: reuseIdentifier, for: indexPath) as! MyTableViewCell
//can adjust according to labels etc in your MyTableViewCell file.
        cell.myImageView.image = UIImage(named: "polaroid")
        return cell
    }

Handle the table view click:
1. In viewcontroller:
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate
2. In viewDidLoad, make sure that:
myTable.delegate = self
2. Add function:
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        //actions when you click on the row
     
    }

Go through all cells inside the table:
let cells = self.NameTableView.visibleCells as! [UITableViewCell]
        for cell in cells
        {
//go through data in cell
            cell.PCSwitch.isOn = true
        }

Search bar with table view: avoid wrong row selection:
1. Create an array to hold the values of select items' tag (not index path), let's say theChosenPupils to hold pupils' ID. Each custom cell is allocated a tag, a pupils' ID.
2. In DidSelectRowAt function:
if theChosenPupils.contains(allPupils[indexPath.row].pupilID)
        {
            if let theIndex = theChosenPupils.index(of: allPupils[indexPath.row].pupilID)
            {
                theChosenPupils.remove(at: theIndex)
            }
            tableView.cellForRow(at: indexPath)?.backgroundColor = UIColor.clear
        }
        else
        {
         theChosenPupils.append(allPupils[indexPath.row].pupilID)
               tableView.cellForRow(at: indexPath)?.backgroundColor = UIColor.green
        }
3. In CellForRowAt column:
if theChosenPupils.contains(allPupils[indexPath.row].pupilID)
        {
            theCell.isthisSelected = true
            theCell.backgroundColor = UIColor.green
        }
        else
        {
            theCell.isthisSelected = false
            theCell.backgroundColor = UIColor.clear
        }
4. When selecting all cells:
 let cells = self.PCTableView.visibleCells as! [PupilsChooseTableViewCell]
        for cell in cells
        {
            cell.isthisSelected = true
            cell.backgroundColor = UIColor.green
        }
        theChosenPupils.removeAll()
        for oneP in allPupils
        {
            theChosenPupils.append(oneP.pupilID)
        }
5. Deselect:
//reload data in table
 let cells = self.PCTableView.visibleCells as! [PupilsChooseTableViewCell]
        for cell in cells
        {
            cell.isthisSelected = false
            cell.backgroundColor = UIColor.clear
        }
        theChosenPupils.removeAll()
     
6. When going through all rows, just refer to theChosenPupils array.
7. Make sure that the custom cell selection type is 'None'.

Comments

Popular posts from this blog

Setting up a playground

Go to another page