iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 10
0
Software Development

利用Swift 4開發iOS App,Daily Work List系列 第 10

Day 10. Develop Add Event Page View Controller 1

  • 分享至 

  • xImage
  •  

建立好Storyboard和SQLiteManager後,我們來開發後台程式吧

Storyboard Connect with Swift File

先建立一個名為AddEventViewController的Swift檔案
https://ithelp.ithome.com.tw/upload/images/20181010/201119169Md4NJxqZo.png

接著回到Main.storyboard畫面,選取 Add Event View Controller,設置他的Custom Class為AddEventViewController
https://ithelp.ithome.com.tw/upload/images/20181010/20111916hNXzDMhEXF.png

接著,我們只要按右上角,兩個圈圈的那個顯示模式(Assistant Editor)
https://ithelp.ithome.com.tw/upload/images/20181010/20111916QxCVc6L2fq.png

就可以同時看到Storyboard在左邊的視窗、AddEventViewController在右邊的視窗囉!
https://ithelp.ithome.com.tw/upload/images/20181010/20111916oIhto8G9rW.png

如此一來,我們要拖拉都會方便很多很多,我們先建立一個Cancel功能讓使用者取消新增Event,把這個View關掉

  1. 先選取最左上角的Cancel Button
  2. 點擊「右」鍵,會出現屬於此物件的相關Connections資料
  3. 按住selector旁的圈圈,拖拉到ViewController裡,挑個喜歡的位置後放開
    https://ithelp.ithome.com.tw/upload/images/20181010/20111916MjAxCGu3fa.png
  4. 名稱為cancel,類型為UIBarButtonItme,xcode會幫忙建立出這個function
    https://ithelp.ithome.com.tw/upload/images/20181010/20111916LpAC4nC8Eo.png
  5. 把對應的程式碼寫入就可以完成
dismiss(animated: true, completion: nil)

https://ithelp.ithome.com.tw/upload/images/20181010/20111916ju2CPJh8c6.png

然後,這邊我們先另外新增一個Tap行為(單點的),預計是當使用這點擊這個Add New Event頁面上的任意地方,要把編輯的鍵盤、選單...收起來

  1. 於右下角找到Tap Gesture Recognizer 拖拉至View下面
  2. 接著設定屬於他的Connections
  3. 但這次我們換一個方式拖拉加入,將右側選單選至Connections Inspector,就可以看到跟剛剛我們對Cancel Button按右鍵後一樣的內容喔
  4. 一樣於selector右側的圈圈拖拉至AddEventViewController
  5. 新增一個Action 名稱endText
  6. 程式內容:
view.endEditing(true)

https://ithelp.ithome.com.tw/upload/images/20181010/20111916FIeQqkss8f.png

再來我們來設定Name的輸入框,取名為NameText,為UITextField物件
在New Referencing Outlet右側的圈圈,點選後拉至喜歡的位置放開,一樣填完名稱、類型就可以了
https://ithelp.ithome.com.tw/upload/images/20181010/20111916O64E7eMxKh.png

用一樣的方法把其他欄位也加進去吧
https://ithelp.ithome.com.tw/upload/images/20181010/20111916DiufRxlLOT.png

如此就完成了畫面物件和程式碼的關聯,不得不說,熟練起來,操作這個真的會快很多呢~之後的開發大部分都會在純代碼囉

CLGeocoder

礙於後面篇幅的分配,這邊先提一下Place欄位的相關開發,CLGeocoder這是一個好的方法,可以協助將地址查詢到對應的座標值

在AddEventViewController裡加上

import CoreLocation

設定變數,placeText為剛剛拖拉出來的物件,另外新增兩個Double

@IBOutlet weak var placeText: UITextField!
var lat: Double? = nil
var lng: Double? = nil

接著在viewDidLoad()裡加上

// 加入事件,當place有異動,就查詢其結果的座標
placeText.addTarget(self, action: #selector(changePlace), for: .editingDidEnd)

最後加上function

@objc func changePlace() {
    // check address
    if placeText.text != "" {
        let geoCoder = CLGeocoder()
        geoCoder.geocodeAddressString(placeText.text!) { (placemarks, error) in
            guard
                let placemarks = placemarks,
                let location = placemarks.first?.location
                else {
                    // 如果沒有找到座標要顯示錯誤訊息
                    self.confirmAlert("Error Place. Please enter valid address.")
                    return
            }
            
            // 將找到的座標對應到變數中紀錄
            self.lat = location.coordinate.latitude
            self.lng = location.coordinate.longitude
        }
    }
}

// 顯示提示訊息框,固定標題為「Warn!」、顯示訊息為參數傳入、按鈕為「OK」
@objc func confirmAlert(_ message: String) {
    let alertViewController = UIAlertController(title: "Warn!", message: message, preferredStyle: .alert)
    alertViewController.addAction(UIAlertAction(title: NSLocalizedString("OK", comment: "Default action"), style: .default, handler: { _ in
    }))
    self.present(alertViewController, animated: true, completion: nil)
}

上一篇
Day 9. Talking About Local iOS Data Storage
下一篇
Day 11. Talking About Enum, Struct and Class
系列文
利用Swift 4開發iOS App,Daily Work List31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言