4 add another table view

Original link:current page

Now I need to show the log files' attribution, by creating another TableView in the Basic Chat Scene.

1. change the old Table View height

select the Table View in the Main.storyboard, in Sections Inspector, change the Bottom Space to:,
set the value “200”.

The Basic Chat Scene would be looked like this

2. add a new Table View at the target location

From Library, drag a Table View to the blank space, then add the missing constraints

1. Press , drag a line from the inside of new Table View to the inside of the old, choose the Vertical Spcaing.

2. Press , drag a line from the inside of new Table View to the left outside, choose the Leading Space to Container.

3. like step 2, just change the direction to the right, and choose the Trailing Space to Container.
4. like step 2, just change the direction to the bottom, and choose the Verical Spacing to Bottom Layout Guide.

Then in Size inspector, change all the constraints to “0”.

The Basic Chat Scene would be like this

3. add a new Table View Cell into new Table View

From Library, drag a Table View Cell into new Table View, then drag three Label into the Table View Cell, like the Scene below

Change the Label text to show what they meaning.

1. Change top-left Label text to “FileName”
2. Change bottom-left Label text to “Size”
3. Change right Label text to “ModifyTime”

So far, we had already add the table view now, next we need to code.

Create new swift file

File → New → File
Select Cocoa Touch Class, Next,
fill “Class” with “FileBrowserCellTableViewCell”,
“Subclass of” choose the “UITABLEViewCell”,

Next and Create.

Change table view cell attribution

In Editor, choose the Main.storyboard, select the Table View Cell at the left of Document outline,

Change the class to “FileBrowerCellTableViewCell”

Change the identifier to “FileCell”

Add Label View to Table View Cell

Select the File Name

Press ^ and drag from the UILabel File Name to FileBrowserCellTableViewCell.swift

input the name “FileName”, class “UILebel”, then click Connect you will get

    @IBOutlet weak var FileName: UILabel!

In the same way, you can get

    @IBOutlet weak var Size: UILabel!
    @IBOutlet weak var ModifyTime: UILabel!

Associate Table View and code

Switch to Assistant editor .

Open “BLECentralViewController.swift” and “Main.storyboard”, press ^, drag the new Table View into the top of class BLECentralViewController

Fill the Name with “fileTableView”, then click Connect

Add Code

In class BLECentralViewController:
Add a variable fileList, to store the log files' url list

    var fileList: [URL] = []

In function viewDidLoad(), add the fileTableView initial code

        self.fileTableView.delegate = self
        self.fileTableView.dataSource = self

Add a function refreshFileView

    func refreshFileView() {
        let logfile = logFile()
        fileList = logfile.getUrls() ?? []

At the end of function refreshAction, add


the logfile.getUrls is a api to get the files' url list. Add the code into class DataLog in Datalog.swift

    func getUrls() -> [URL]? {
        let paths = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)
        let directoryPath = paths[0].appendingPathComponent(Constants.logPath, isDirectory: true)
        return try? FileManager.default.contentsOfDirectory(at: directoryPath, includingPropertiesForKeys: nil, options: FileManager.DirectoryEnumerationOptions.skipsHiddenFiles)

Change the functions tableView(tableView, numberOfRowsInSection) to

    //Table View Functions
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        var count:Int?
        if tableView == self.baseTableView {
            count = self.peripherals.count
        if tableView == self.fileTableView {
            count = fileList.count
        return count!

Change the functions tableView(tableView, cellForRowAt indexPath) to

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        var cell:UITableViewCell?
        if tableView == self.baseTableView {
            //Connect to device where the peripheral is connected
            let cell = tableView.dequeueReusableCell(withIdentifier: "BlueCell") as! PeripheralTableViewCell
            let peripheral = self.peripherals[indexPath.row]
            let RSSI = self.RSSIs[indexPath.row]
            if peripheral.name == nil {
                cell.peripheralLabel.text = "nil"
            } else {
                cell.peripheralLabel.text = peripheral.name
            cell.rssiLabel.text = "RSSI: \(RSSI)"
            return cell
        if tableView == self.fileTableView {
            let cell = tableView.dequeueReusableCell(withIdentifier: "FileCell") as! FileBrowserCellTableViewCell
            let path = fileList[indexPath.row].path
            if let info = try? FileManager.default.attributesOfItem(atPath: path) {
                cell.FileName.text = FileManager.default.displayName(atPath: path)
                cell.Size.text = String((info[FileAttributeKey.size] as! Int) / 1024) + " K"
                let date = info[FileAttributeKey.modificationDate] as! Date
                let formatter = DateFormatter()
                formatter.dateFormat = "yyyy.MM.dd-hh.mm.ss"
                cell.ModifyTime.text = formatter.string(from: date)
            return cell
        return cell!

Ok, let's run the application at iOS device


  • Last modified: 2018/12/14 15:02