iT邦幫忙

2022 iThome 鐵人賽

DAY 18
0
Mobile Development

從零開始的IOS開發日常系列 第 18

[鐵人賽 Day 18] Swift 仿刻 IOS 內建的 Clock - 世界時鐘(3)主頁面程式碼介紹

  • 分享至 

  • xImage
  •  

今天這篇要介紹的主頁面的程式碼撰寫!

將空白的 NavigationController 隱藏

因為我們放 Navigation Bar 的時候,他會在 Navigation Bar 上面新增一個空白的 NavigationController 我們要將他不顯示出來
(由於是要在畫面呈現之前作用,所以我們把它放到 viewWillAppear 裡面)

self.navigationController?.isNavigationBarHidden = true

TableView 的撰寫

由於我們需要用到 TableView 來列出其他城市的時鐘資訊,所以我們必須在 viewDidLoad 裡面註冊 TableView

 let nib = UINib.init(nibName: "globe_list_cell", bundle: nil)
        tableview.register(nib, forCellReuseIdentifier: "globe_list_cell")
        tableview.delegate = self
        tableview.dataSource = self

按 “+” 跳到“新增其他城市的頁面”並接收“新增其他城市的頁面”的資料

@IBAction func insert_nextVC(_ sender: Any) {
       let nextVC = globe_insertVC()
        self.navigationController?.pushViewController(nextVC, animated: true)
        nextVC.pushvalue = self
    }

當按下 “Edit” 按鈕的時候要進入編輯模式

我先在 Class 裡先宣告一個計數變數

var edit_count = 0

因為要判斷按一下編輯模式,再按一下要跳回來,所以我設定每按一次 “Edit” 計數變數就加一,如果計數變數是奇數,就是編輯模式,反之正常模式

 @IBAction func edit(_ sender: Any) {
        edit_count += 1
        if edit_count % 2 == 1 {
            edit.title = "Done"
            tableview.setEditing(true, animated: false)
        }
        else {
            edit.title = "Edit"
            tableview.setEditing(false, animated: false)
        }
        tableview.reloadData()
    }

在 “extension” 裡要輸入的 TableView 和 Protocol 內容

由於我們在“新增其他城市的頁面”有用到 Protocol 要把直接過來,所以我們在這裡要也要打一個 Protocol 去接收值

func addtimezone(addtimezone : String) {
        timezones.append(addtimezone)
        tableview.reloadData()
    }

再來就是要放進 TableView 的相關 Function !

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        timezones.count  //從陣列裡的資料個數來判斷要印出幾個 Cell
    }
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "globe_list_cell", for: indexPath) as? globe_list_cell
        let timezone = TimeZone.init(identifier:timezones[indexPath.row])  //根據 timezones 陣列裡的第幾個要素 去取得那個城市的時區
    
        timeformatter.amSymbol = "AM"
        timeformatter.pmSymbol = "PM"
        timeformatter.dateFormat = "h:mm a"
                                            設定時間顯示的格式
    
        timeformatter.timeZone = timezone
        cell?.time.text = timeformatter.string(from: Date())                        
            //將取得到的時間放到 cell 的時間 label 裡
    
    
        if tableView.isEditing == true {
            cell?.time.isHidden = true
        }
        else {
            cell?.time.isHidden = false
        }                                //判斷如果進入編輯模式的話,時間會隱藏
    
        cell?.place.text = timezones[indexPath.row].components(separatedBy: "/").last     
                                //由於顯示出來的城市名稱只需要斜線後面的資料,因此可以用個個函式來截出想要的結果
        
        let second : Int = timeformatter.timeZone.secondsFromGMT()/3600
        cell?.time_diff.text = "\(second) Hours"
                              //這邊運用函式來取得距離格林威治的時間差  
                                    
        return cell!
    }
    

編輯模式的 TableView Function

    func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
        if editingStyle == .delete {
            timezones.remove(at: indexPath.row)
            tableView.deleteRows(at: [indexPath], with: .fade)
        }
    }

每30秒要更新一次世界時鐘的資料

由於資料放到 TableView 不會自動更新他自己的時間資料,所以我們必須設定一個函式讓他自動更新

self.timer = Timer.scheduledTimer(timeInterval: 30, target: self, selector:#selector(reload_tableview), userInfo: nil, repeats: true)

我們也必須要寫一個 Function 來 reload TableView 的資料!

這樣子一個世界時鐘的功能就完成囉!


上一篇
[鐵人賽 Day 17] Swift 仿刻 IOS 內建的 Clock - 世界時鐘(2)新增頁面程式碼介紹
下一篇
[鐵人賽 Day 19] Swift 仿刻 IOS 內建的 Clock - 鬧鐘 (1) 功能及介面介紹
系列文
從零開始的IOS開發日常30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言