如何在1个TableView Swift 4中显示两种类型的单元格

Question

I want to display 2 types of cell.Both types of cell is display data from 2 different API call.So the structure is basically like this:

Type A is only appears 1 times which is from API method A ,which is the first cell of the TableView ,the rest of all are Type B which is from API method B .

In order to make this works,I done the following:

1) In StoryBoard,I set the structure of TableView like so :

MyTableView
-Type A Cell
--My others view..
-Type B Cell
--My others view..

2) Both Cell have their TableViewCell class.

3) Both Cell have their own model class to initialize the JSON come from API

And then finally in my ViewController have all this code:

All the basic code here

//The NSObject class for both type of cell
var typeAArray = [TypeA]()
var typeBAarray = [TypeB]()


override func viewDidLoad() {
   super.viewDidLoad()

   self.tableView.delegate = self
   self.tableView.dataSource = self

   self.getTypeAData()
   self.getTypeBData()
}

func getTypeAData(){
    //code to call API,parse JSON and also append to `typeAArray`
    //and reload TableView
}

func getTypeBData(){
    //code to call API,parse JSON and also append to `typeBArray`
    //and reload TableView
}

The code for TableView

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    return typeAArray.count + typeBArray.count
}

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

    if indexPath.row == 0 {
        let typeACell = tableView.dequeueReusableCell(withIdentifier: "TypeACell", for: indexPath) as! TypeATableCell   
        typeACell.data = self.typeAArray[indexPath.row] //Here I get index or of range error
        return typeACell
    }

    let  typeBCell = tableView.dequeueReusableCell(withIdentifier: "TypeBCell", for: indexPath) as! TypeBTableCell
    typeBCell.data = self.typeBArray[indexPath.row]
    return typeBCell
}

What I get so far:

Now with the setting and the code above,I get index out of range error in the part of if indexPath == 0 ,and no any data display in the TableView .

So my question is:

How to make 2 types of tableViewCell appear in 1 single TableView which the data from 2 different API method call?

Answer 1

Take numberOfSections method and do following:

func numberOfSections(in tableView: UITableView) -> Int {
    return 2
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    if section == 0 {
        return typeAArray.count
    } else {
        return typeBArray.count
    }
}

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

    if indexPath.section == 0 {
        let typeACell = tableView.dequeueReusableCell(withIdentifier: "TypeACell", for: indexPath) as! TypeATableCell
        typeACell.data = self.typeAArray[indexPath.row] //Here I get index or of range error
        return typeACell
    }

    let  typeBCell = tableView.dequeueReusableCell(withIdentifier: "TypeBCell", for: indexPath) as! TypeBTableCell
    typeBCell.data = self.typeBArray[indexPath.row]
    return typeBCell
}

Answer 2

Okay here's what's going on. Your numberOfRowsInSection returns total number of elements from both arrays A and B. Assuming that typeBArray has loaded faster than typeAArray , you'll get the total number of items equal to size of typeBArray . In cellForRowAt you assume that item at the row 0 belongs to the first data model, hence you're trying to access typeAArray[0] while it's still empty and contains no data. This leads to crash. You need to take the offset into consideration:

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

    if indexPath.row < self.typeAArray.count {
        let typeACell = tableView.dequeueReusableCell(withIdentifier: "TypeACell", for: indexPath) as! TypeATableCell
        typeACell.data = self.typeAArray[indexPath.row]
        return typeACell
    }

    let  typeBCell = tableView.dequeueReusableCell(withIdentifier: "TypeBCell", for: indexPath) as! TypeBTableCell
    typeBCell.data = self.typeBArray[indexPath.row - self.typeAArray.count]
    return typeBCell
}

But honestly, just use sections instead.

Answer 3

Obvious it should give you an error as your indexPath.row starts with 1 in your data source for TypeBTableCell and your array elements index starts with 0 for typeBArray . So it won't match with each other.

You need to reduce value for indexPath.row 1 step. Also ensure both arrays have elements in it.

Try this and see:

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    let numberOfRows = typeAArray.count + typeBArray.count
    print("typeAArray.count = \(typeAArray.count)\n")
    print("typeBArray.count = \(typeBArray.count)\n")
    print("numberOfRows = \(numberOfRows)\n")
    return numberOfRows
}


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


    var indexPathRowForB = max(0, indexPath.row - 1) 

    if indexPath.row == 0 && self.typeAArray.count > 0 {
        let typeACell = tableView.dequeueReusableCell(withIdentifier: "TypeACell", for: indexPath) as! TypeATableCell   
        typeACell.data = self.typeAArray[indexPath.row]
        return typeACell
    } else {
      print("self.typeAArray.count is zero")
      indexPathRowForB = indexPath.row
    }

    if self.typeBArray.count > 0 { 
      let  typeBCell = tableView.dequeueReusableCell(withIdentifier: "TypeBCell", for: indexPath) as! TypeBTableCell

      typeBCell.data = self.typeBArray[indexPathRowForB]
      return typeBCell

    } else {
       print("self.typeBArray.count is zero")
       // return UITableviewCell instance from here......
    }
}

Answer 4

Firstly have an array that stores all the data returned from API method A and B , instead of having 2 separate arrays which can make things a bit more complex but make sure your type A is the first item in in the array.

Then something like this:

var tableViewDataArray = [Array]()

var typeAArray = [Array]()
var typeBArray = [Array]()

override func viewDidLoad() {
    super.viewDidLoad()

    self.tableView.delegate = self
    self.tableView.dataSource = self

    self.getTableViewData()
}

func getTableViewData() {

    let queue = DispatchQueue(label: "com.company.app.queue")
    let group = DispatchGroup()

    group.enter()
    queue.async(group: group) {
        getTypeAData()
        group.leave()
    }

    queue.async(group: group) {
        getTypeBData()
        group.leave()
    }

    group.notify(queue: queue) {
        group.wait()

        tableViewDataArray.append(typeAArray)
        tableViewDataArray.append(typeBArray)

        self.tableView.reloadData()
    }
}

func getTypeAData() {

    let urlRequest: NSURLRequest = ...

    let task = self.session?.dataTaskWithRequest(urlRequest, completionHandler: { (data:NSData?, response:NSURLResponse?, error:NSError?) in

        // parse your response and append to array
        self.typeAArray.append(response)
    })
}

func getTypeBData() {

    let urlRequest: NSURLRequest = ...

    let task = self.session?.dataTaskWithRequest(urlRequest, completionHandler: { (data:NSData?, response:NSURLResponse?, error:NSError?) in

        // parse your response and append to array
        self.typeBArray.append(response)
    })
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    return tableViewDataArray.count
}

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

    let customObject = tableViewDataArray[indexPath.section]

    if indexPath.row == 0 &&
         customObject is TypeAObject {

        if let typeACell = tableView.dequeueReusableCell(withIdentifier: TypeACell.identifier, for: indexPath) as? TypeACell {

            // do any databinding here
            typeACell.customObject = customObject
            return typeACell
        }

    } else if customObject is TypeBObject {

        if let typeBcell = tableView.dequeueReusableCell(withIdentifier: TypeBCell.identifier, for: indexPath) as? TypeBCell {

            // do any databinding here
            typeBcell.customObject = customObject
            return typeBcell
        }
    }

    return UITableViewCell()
}

Note: This was done is Playground but should hopefully give you a better idea of what to do. You should also become familiar with GCD and executing async taks sequentially or concurrently (refer to these tutorials from RayWenderlich: part 1 and part 2 )