iT邦幫忙

2022 iThome 鐵人賽

DAY 17
0
Mobile Development

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

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

  • 分享至 

  • xImage
  •  

繼上一篇的功能介紹及 UI 建立之後,今天這篇我要來介紹怎麼寫出新增頁面主要的功能囉!

跳轉至“新增世界時鐘”的介面

這邊要跳轉到新增其他世界時鐘的頁面

@IBAction func insert_nextVC(_ sender: Any) {
       let nextVC = globe_insertVC()
        self.navigationController?.pushViewController(nextVC, animated: true)  // 跳轉到“世界時鐘新增頁面”
        nextVC.pushvalue = self //接收跳轉世界時鐘頁面的資料
    }

建立一個 Protocol 放置新增介面所要回傳的資料

protocol AddTimeZone : AnyObject {
    func addtimezone(addtimezone : String)
}

建立一個陣列變數存放所有城市的值、新增一個變數給 Protocol

var timeZones = [String]()
weak var pushvalue : AddTimeZone?

世界時鐘新增介面

顯示其他國家城市的 TableView

在 viewDidLoad 裡面註冊 TableView ,並在裡面輸入內建的所有城市時區函式並把城市的名稱放到名為陣列陣列裡

 super.viewDidLoad()
        timeZones = NSTimeZone.knownTimeZoneNames //將所有城市的名稱放到名為陣列 “timeZones“ 的陣列裡
        let nib = UINib.init(nibName: "globe_place_cell", bundle: nil)
        tableView.register(nib, forCellReuseIdentifier: "globe_place_cell")
        tableView.dataSource = self
        tableView.delegate = self

按下 Cancel 之後要退回主畫面

 @IBAction func back(_ sender: Any) {
        self.navigationController?.popViewController(animated: true)
    }

新增世界時鐘的搜尋功能

我們要做出每輸入一個字就可以列出符合條件的城市名,使用 filter 的功能更新陣列裡面的內容,最後在用 reloadData 去更新 TableView

@IBAction func search(_ sender: Any) {
        if searchTF.text != "" {
            timeZones = NSTimeZone.knownTimeZoneNames.filter({$0.localizedCaseInsensitiveContains(searchTF.text!)})
        }
        else {
            timeZones = NSTimeZone.knownTimeZoneNames
        }
        tableView.reloadData()
    }

TableView 的監聽功能撰寫

判斷 TableView 裡面要列出幾個 Cell

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
           timeZones.count //根據目前 timeZones 裡有的內容數量去做判斷
    }

列出符合搜尋標準程式的 Cell 內容

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "globe_place_cell", for: indexPath) as? globe_place_cell
        cell?.place.text = timeZones[indexPath.row]
        return cell!
    }

當按下其中一個 Cell 之後,將資料放在名為 pushvalue 的變數(Protocol )裡面,並跳回主頁面。
(這邊的 pushvalue 主要是要把資料傳回主頁面的)

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        pushvalue?.addtimezone(addtimezone: timeZones[indexPath.row])
        
        self.navigationController?.popViewController(animated: true)
    }

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

尚未有邦友留言

立即登入留言