[Swift] I implemented a Twitter timeline in UITableView (Part 2)

This article is [Swift] I implemented a Twitter timeline in UITableView (Part 1) It will be a continuation of.

If you haven't read the first article, please take a look there as well. The GitHub repository will be ** here **.

Then it will be a continuation of the last time.

Next, ** implement the screen transition destination **.

When you press a tweet on Twitter, not only the person who tweeted and the content of the tweet, but also The time of tweeting and the number of likes and retweets are listed. Below that, a reply to the tweet is posted.

Since these may be implemented in tableView, I will also implement it with tableView.

As a specification, ** ・ Implement with TableView ・ The first cell describes more detailed information about the content of the tweet. The second cell shows the number of retweets and quoted retweets ・ The third cell displays the number of likes ・ The fourth cell displays the reply, like, retweet, and share buttons. ・ The 5th and subsequent cells display the reply to the tweet ** I would like to go with that feeling.

First of all, we will implement TableView, Since it is described in the same way as ViewController.swift, the explanation is omitted.

Next, ** the first cell describes more detailed information about the tweet content **, I used to use one custom cell earlier, but this time it doesn't.

The reason is that the display methods of cells 1 to 4 are all different. So it's a rough technique, but I created custom cells for Nos. 1 to 4. (Lol)

First is the first custom cell.

Objects for displaying the icon, name, tweet content, and time are placed. Basically, what you are doing is the same as the first custom cell, just by changing the placement position.

The identifier is also described here so that it can be referred to when generating a cell.

The second cell ** shows the number of retweets and quoted retweets **.

The second cell looks like this:

Unlike the first one, the processing is described in the custom cell.

The content of the process is If the number of retweets exceeds 10,000, It is a process to display 10,000 items instead of 10,000 items.

For the retweetCount property from the generator when generating a cell The number of actual retweets will be passed.

Next, write the process in the setSelected () method that is called when the cell is created.

If the value of retweetCount is 10000 or more, the inside of the if statement is executed. After dividing retweetCount by 10000, it is rounded down to two decimal places.

If 123456 retweets have been made. 123456 / 10000 = 12.3456

After that, it is truncated at the second decimal place, so it becomes 12.3.

Finally, assign the result value to the retweetResult property. At this time, if you divide by 10000, "10,000" is added to the end of the word.

CustomSecondView.swift

class CustomSecondCell: UITableViewCell {

    @IBOutlet weak var retweet: UIButton!
    @IBOutlet weak var quoteRetweet: UIButton!
    
    var retweetCount = 0.0
    var quoteRetweetCount = 0.0
    var retweetResult = ""
    var quoteRetweetResult = ""
    
    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        
        if retweetCount >= 10000 {
            retweetCount /= 10000
            retweetCount = floor(retweetCount * 10) / 10
            retweetResult = String("\(retweetCount)Ten thousand")
        } else {
            retweetResult = String(retweetCount)
        }
        
        if quoteRetweetCount >= 10000 {
            quoteRetweetCount /= 10000
            quoteRetweetCount = floor(quoteRetweetCount * 10) / 10
            quoteRetweetResult = String("\(quoteRetweetCount)Ten thousand")
        } else {
            quoteRetweetResult = String(quoteRetweetCount)
        }
        
        retweet.setTitle(retweetResult, for: .normal)
        quoteRetweet.setTitle(quoteRetweetResult, for: .normal)
    }
}

The third cell is almost the same as the second cell, so I will omit it. The fourth cell is also omitted because it just places the button.

From the 5th onward, the custom cell (CustomTableViewCell) created first will be reused.

This completes the definition of the cells that are displayed when you tap the tweet.

Next, we will describe the process of actually displaying the cell.

First, numberOfRowsInSection {} This method returns the number of cells.

As for the number of cells, the number of replies + 1st to 4th cells are required, so write as follows.

I was planning to define an array reply where replies are stored, so It is described as return reply.count + 4.

Since it is ** + 4, at least the details of the tweet and the cells of likes and retweets are displayed. ** **

DetailViewController.swift

    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return reply.count + 4
    }

It will be the process when the cell is generated next. First of all, we have defined the variables needed to display the details of the tweet.

var reply: [Int] = [], but At this time, I have not implemented it yet, so I declared it appropriately. (Excuse me···)

var count = 0 is a variable to count how many times a cell has been created.

cellForRowAt is executed, but First, the Switch statement performs conditional branching according to the value of the count property.

At first it is of course 0, so case 0: is executed.

I don't think it is necessary to explain the processing inside the case, so I will omit it. ** If you don't understand, please see the previous article! ** **

** The value of the count property is incremented, All the details of tweets that should be displayed absolutely are displayed. ** **

After that, if the process still continues, use the Default case The contents of the reply will be displayed in the cell.

DetailViewController.swift

class DetailViewController: UIViewController,UITableViewDelegate, UITableViewDataSource {
    
    var reply: [Int] = []
    var count = 0
    var name = ""
    var content = ""
    var time = ""
    var retweet = 0.0
    var quoteRetweet = 0.0
    var good = 0.0
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        switch count {
        case 0:
            tableView.register(UINib(nibName: "CustomFirstCell", bundle: nil), forCellReuseIdentifier: "CustomFirstCell")
            let cell = tableView.dequeueReusableCell(withIdentifier: "CustomFirstCell", for: indexPath) as! CustomFirstCell
            cell.name.text = name
            cell.content.text = content
            cell.time.text = time
            count += 1
            return cell
        case 1:
            tableView.register(UINib(nibName: "CustomSecondCell", bundle: nil), forCellReuseIdentifier: "CustomSecondCell")
            let cell = tableView.dequeueReusableCell(withIdentifier: "CustomSecondCell", for: indexPath) as! CustomSecondCell
            cell.retweetCount = retweet
            cell.quoteRetweetCount = quoteRetweet
            count += 1
            return cell
        case 2:
            tableView.register(UINib(nibName: "CustomThirdCell", bundle: nil), forCellReuseIdentifier: "CustomThirdCell")
            let cell = tableView.dequeueReusableCell(withIdentifier: "CustomThirdCell", for: indexPath) as! CustomThirdCell
            cell.goodCount = good
            count += 1
            return cell
        case 3:
            tableView.register(UINib(nibName: "CustomFourthCell", bundle: nil), forCellReuseIdentifier: "CustomFourthCell")
            let cell = tableView.dequeueReusableCell(withIdentifier: "CustomFourthCell", for: indexPath) as! CustomFourthCell
            count += 1
            return cell
        default:
            tableView.register(UINib(nibName: "CustomTableViewCell", bundle: nil), forCellReuseIdentifier: "customCell")
            let cell = tableView.dequeueReusableCell(withIdentifier: "customCell", for: indexPath) as! CustomTableViewCell
            cell.name.text = name
            cell.time.text = time
            cell.content.text = content
            return cell
        }
    }
}

The actual state of the simulator as described so far is as follows.

I think it has gradually become the ideal shape.

Where the details of the tweet can be displayed I would like to finish the content of Part 2!

It sounds good, but there are currently the following improvements. ** ・ The posting time part is not properly described. ** ** -> Originally written as hh: mm: ss YYYY / MM / dd, but now -> All tweets are at the same time ** ・ Likes, retweets, etc. are all the same ・ If there is no reply, gray out the part -There is no option button (...) on the upper right. ** ** -> The one that can be blocked or hidden by pressing -The content of the reply is not implemented

I hope to update these contents next time.

Thank you for watching until the end.

Click here for more -> [Swift] I implemented a Twitter timeline in UITableView (Part 3)