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

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

If you haven't read the second article, please take a look there too! The GitHub repository will be ** here **.

Then it will be a continuation of the last time.

Last time, I implemented some functions, but I think there were some issues. This time we will implement it.

The following were raised as issues. ** ・ The posting time part is not properly described. ** ** -> Originally hh: mm: ss YYYY / MM / dd notation -> All tweets are at the same time ** ・ The same values ​​for likes and retweets ・ If there is no reply, the lower part is grayed out. -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 **

Let's implement it one by one.

First, give each tweet information about time, likes, and retweets. This time I will create a type that stores the contents of Tweet and make that type an array.

Defines the TweetModel type.

Properties for keeping the content of tweets, likes, and the number of retweets, The time when tweeting is HH: mm: ss yyyy/MM/dd I have defined a method to display in format.

TweetModel.swift

import Foundation

struct TweetModel {
    var name: String
    var content: String
    var time: TimeInterval
    var good: Double
    var retweet: Double
    var quoteRetweet: Double
    
    func chengeDateFormatter(time: TimeInterval) -> String {
        let date = Date(timeIntervalSince1970: time)
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "HH:mm:ss yyyy/MM/dd"
        
        let dateString = dateFormatter.string(from: date)
        return dateString
    }
}

Modify the array item and change it to the array that stores the TweetModel type.

ViewController.swift

    var tweetArray = [
        TweetModel(name: "Ichiro Yamada", content: "It is a good weather today. I would like to dry the laundry in the morning.", time: Date().timeIntervalSince1970 - 12345678, good: 10, retweet: 2, quoteRetweet: 1),
        TweetModel(name: "Jiro Yamada", content: "Good morning.", time: Date().timeIntervalSince1970 - 1234567, good: 1000, retweet: 10, quoteRetweet: 7),
        TweetModel(name: "Saburo Yamada", content: "Breakfast is fried egg and bread.", time: Date().timeIntervalSince1970 - 123456, good: 20392, retweet: 1232, quoteRetweet: 1221),
        TweetModel(name: "Takeru Sato", content: "Thank you for the movie "Rurouni Kenshin".", time: Date().timeIntervalSince1970 - 12345, good: 100022, retweet: 12911, quoteRetweet: 1292),
        TweetModel(name: "Aragaki Yui", content: "It's a shame to run away, but it's useful", time: Date().timeIntervalSince1970 - 1234, good: 1212121, retweet: 21321, quoteRetweet: 12131),
        TweetModel(name: "Natsume Soseki", content: "I am a cat", time: Date().timeIntervalSince1970 - 123, good: 1200, retweet: 12, quoteRetweet: 12),
        TweetModel(name: "Lee Park", content: "As much as possible", time: Date().timeIntervalSince1970 - 12, good: 2112, retweet: 2112, quoteRetweet: 2112),
        TweetModel(name: "Wu Fengming", content: "Grind", time: Date().timeIntervalSince1970 - 1, good: 1000000, retweet: 100000, quoteRetweet: 100000)
    ]

Besides, the processing of the array reference described in cellForRowAt and didSelectRowAt, Changed to refer to tweetArray from item.

Now each tweet has its own information.

The next function to be implemented is "** If there is no reply, the lower part is grayed out **".

Graying out undisplayed cells is actually easy, It can be implemented by changing the style of TableView.

Changed from .plain to .grouped.

DetailViewController.swift

let tableView = UITableView(frame: self.view.bounds, style: .grouped)

The simulator at this point looks like this:

At first glance, it looks okay, but there is one problem. ** There is a gray gap above the tweet. ** **

It is not desirable to have a gray gap above, so we will take this action.

It was an event I had never encountered, so I investigated various things. Apparently, the following two are required, so please add them!

There was no change in either one.

sectionHeaderHeight changes the height of the TableView header. If you specify 0, it will be affected by other objects, so I set it to 0.1.

viewForHeaderInSection returns a UIView and displays it in the header, I'm removing the header by returning UIView () without specifying anything.

ViewController.swift

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.sectionHeaderHeight = 0.1
    }

    func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        return UIView()
    }

With these descriptions, the situation is as follows.

The next function to be implemented is "** There is no option button (...) on the upper right **".

First, design the UI.

A new button has been added to the upper right of the custom cell. I will write the processing when this button is pressed in the file of the custom cell.

This time I'll just print it to the log with print ().

The next function to be implemented is the implementation for "** Reply content is not implemented **".

Change the contents of TweetModel type a little. Added var reply: [TweetModel]. If there is a reply, the TweetModel type element will be stored in this array reply.

TweetModel.swift

    var name: String
    var content: String
    var time: TimeInterval
    var good: Double
    var retweet: Double
    var quoteRetweet: Double
    var reply: [TweetModel]

Since we added a property to the type, the contents of the tweetArray also change.

Finally, reply: [] has been added. If there is a reply, the value will be entered here.

ViewController.swift

    var tweetArray = [
        TweetModel(name: "Ichiro Yamada",
                   content: "It is a good weather today. I would like to dry the laundry in the morning.",
                   time: Date().timeIntervalSince1970 - 12345678,
                   good: 10,
                   retweet: 2,
                   quoteRetweet: 1,
                   reply: [])
    ]

This time we will add it in viewDidLoad.

ViewController.swift

    override func viewDidLoad() {
        super.viewDidLoad()
        let reply1 = TweetModel(name: "Jiro Yamada", content: "It's true, isn't it?", time: Date().timeIntervalSince1970 - 1234567, good: 11, retweet: 1, quoteRetweet: 2, reply: [])
        let reply2 = TweetModel(name: "Saburo Yamada", content: "This is rain.", time: Date().timeIntervalSince1970 - 12345634, good: 12, retweet: 4, quoteRetweet: 2, reply: [])
        let reply3 = TweetModel(name: "Lord Biao", content: "Bah! !! !!", time: Date().timeIntervalSince1970 - 5, good: 120031020, retweet: 1032000, quoteRetweet: 1122, reply: [])
        let reply4 = TweetModel(name: "King", content: "It ’s the general of the world.", time: Date().timeIntervalSince1970 - 1, good: 1223456543, retweet: 123123, quoteRetweet: 123123, reply: [])
        tweetArray[0].reply.append(reply1)
        tweetArray[0].reply.append(reply2)
        tweetArray[7].reply.append(reply3)
        tweetArray[7].reply[0].reply.append(reply4)
    }

With the previous didSelectRowAt I haven't passed a value to the reply property of DetailViewController.swift, so Add the process of passing the value of reply in the array to reply of DetailVC.

ViewController.swift

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let detailVC = storyboard?.instantiateViewController(identifier: "detailView") as! DetailViewController

        detailVC.reply = tweetArray[indexPath.row].reply
        
        navigationController?.pushViewController(detailVC, animated: true)
    }

DetailViewController.swift has the following declaration. var reply: [TweetModel] = []

This reply property contains the reply to the tapped cell.

The TableView is also configured on the screen after tapping the cell, From the first cell to the fourth cell, the details of the tweet you tapped are displayed, The 5th and subsequent items will be the reply information.

Since the reply is implemented in the default case, modify the inside of the default case.

With let past = reply [count -4] .time The reply time is acquired by Time interval type.

Get the current time with let now = Date (). TimeIntervalSince1970 With cell.time.text = reply [count -4] .timeCheck (now: now, past: past) Checking the difference between the current time and the time at the time of posting.

reply [count -4] is The value of count when reading a reply is at least 4, so by subtracting 4 from that It is possible to read from the 0th array.

DetailViewController.swift

        default:
            tableView.register(UINib(nibName: "CustomTableViewCell", bundle: nil), forCellReuseIdentifier: "customCell")
            let cell = tableView.dequeueReusableCell(withIdentifier: "customCell", for: indexPath) as! CustomTableViewCell
            let past = reply[count - 4].time
            let now = Date().timeIntervalSince1970
            cell.name.text = reply[count - 4].name
            cell.time.text = reply[count - 4].timeCheck(now: now, past: past)
            cell.content.text = reply[count - 4].content
            count += 1
            return cell
        }

The actual behavior after implementing these processes is as follows.

I was able to confirm that the reply was displayed firmly.

This is the end of the implementation of the timeline.

There are still many things that can be implemented, but Once you start implementing it, it won't end, so I'd like to do this.

Thank you for watching until the end!