I'm always stumbling on UITableViewCell. (1)

Preface

I stumbled every time, and this time I stumbled as usual, so I'm in great trouble, so I'd like to sort out what I know. I think one of the causes of confusion is that there are so many ways to generate and configure cells that you don't know which one to use or which one you are using (at least I am). so). So, in this article, I would like to aim to briefly summarize each method. By the way, if you explain UITableView, it will be very long and it will be difficult to understand the point to focus on, so in this article I would like to focus only on cells as much as possible.

What kind of time is this time?

In the first two times, I will summarize the flow from generation to cell installation. This time, "I don't use xib!" !! Finally, I will write a little about cell reuse.

What is UITableViewCell (roughly)

There is a UITableView used to display a list in Swift, and UITableViewCell defines each list = "cell". You may or may not use xib when defining a UITableViewCell.

What is xib (super rough)

It's a guy who can arrange and design parts (UIView, labels, buttons, etc.) on the storyboard to make it feel good. You don't have to generate parts from the code, so it's good to be able to visually create the whole thing. The bad point is that I don't understand the initialization well. I feel like I'm stumbling every time because I don't really understand this guy.

Implementation method 1: When xib is not used

1-1: When neither a storyboard nor a class is created

Cell generation

Basically, it seems that it can be initialized like this.


  cell = UITableViewCell(style: .default, reuseIdentifier: "Cell")

Reference: Try creating a UITableView in 5 minutes. I don't use this method at all so I don't know the details, but it seems that you can generate cells with the default style. It seems that there are several other styles, which are summarized on this site. If you don't need to have that elaborate style, it's a good idea to use these to implement it. The reuseIdentifier attached to the back is the setting of the name to be called when the cell is reused (described later). The one I often see is the one that registers cells using a method called register, but I wonder if it can be written like this. Well I do not know.

Push the cell into the square

Then, insert the cells generated here into each cell of the table. Write as follows with a method called cellForRowAt.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
  let cell = tableView.dequeueReusableCell(withIdentifier: "Cell")
  ?? UITableViewCell(style: .default, reuseIdentifier: "Cell")

  cell.textLabel?.text = self.items[indexPath.row]

  return cell

}

Reference: Try creating a UITableView in 5 minutes. The method called dequeueReusableCell is called in the second row, which is the method used when calling the cell you named earlier. If the cell with the called name is not registered, it seems that the flow is to create a new cell and register it. The text of the cell is set in the 5th line. Apparently, there is a textLabel in the cell of the default style, and you can easily display it just by setting the text you want to display in this. If you just want to display the text, you can create it as above without creating a new class.

1-2: When using a storyboard but not creating a class (basic edition)

Register cells in the table in the storyboard

Install the UITableViewCell on the UITableView installed on the storyboard. Now, make it callable by setting an Identifier in the cell. スクリーンショット 2020-12-27 20.13.56.png

Push the cell into the square


func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    //Get TableViewCell defined in StoryBorad
    let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "NameCell", for: indexPath)
    cell.textLabel?.text = tableData[indexPath.row]
    return cell
}

Reference: [Swift] Introduction to Swift ~ Try using UITableView ~ It's the same as 1-1.

1-3: When using a storyboard but not creating a class (customization)

It seems that you can customize the cell more in the same way as 1-2.

Customize cells with storyboard

I think that the hierarchy is displayed like this when the cell is installed on the storyboard. スクリーンショット 2020-12-27 20.25.40.png Just like setting a cell on a table, setting an imageView or Label on a cell will look like this. スクリーンショット 2020-12-27 20.28.24.png スクリーンショット 2020-12-27 20.28.31.png You can see that there are various things in the contentView of the cell.

Customize the cell with code and plunge it into the square

The explanation seems to be long, so please check this site for details. Setting an image in imageView and text in Label is the same as when cells are not entangled. The way to push the cell into the square is the same as before.

By the way, what is cell reuse?

I noticed that I was trying to write it, but recently I just summarized what I can understand ... So, check this article! If you can't count on this article, check the official version!

reference

Create a UITableView in 5 minutes. [Swift] How to use tableView and tableViewCell and source code example [Swift] Introduction to Swift ~ Try using UITableView ~ Create [iPhone] UITableView with storyboard

Recommended Posts

I'm always stumbling on UITableViewCell. (1)
Yay! I'm on Rails!
Yay! I'm on Rails! Repetition