高雄公共運輸App：Part5-高雄捷運、輕軌站點查詢 & 捷運系統圖
顯示所有站點、顯示詳細資訊包含出口位置以及出口資訊
Published in
Feb 25, 2022
想要獲得捷運的動態資訊需要跟PTX平台申請帳號，帳號申請完需要一點時間審核，趁這個時間先來完成其他功能，文章會主要分享之前比較沒做過的東西，例如將不同table進行關聯，以及複習一下對圖片進行縮放
功能
- 顯示紅線、橘線、輕軌所有站點
- 顯示指定站點資訊、出口位置、出口資訊
- 顯示捷運系統圖並且可進行縮放
作法
- 將Airtable內不同的table進行關聯去儲存每個站點的出口詳細資訊
- 使用ScrollViewDelegate對圖片進行縮放
Airtable
因為一個站點會不只一個出口所以我打算做出一個所有出口點的table再讓同一個站點的出口跟站點進行關聯
先做出一個所有出口資訊的table
＊所有出口資訊來自高雄捷運官網
創建一個field，並選擇類型是Link to stationExit
在後面加入Lookup這個類型，然後選擇要連結的是哪個table然後哪筆資料
把資料都連結好後打開Postman看看JSON的資料格式，並把需要的資料型別都加入到KmrtLocationApi中
#因為輕軌沒有多出口的問題所以有些資料會沒有，所以型別是optional
關於不同table之間做關聯可以參考下方連結：
捷運系統營運圖縮放
先在畫面上加入一個ScrollView，並在ScrollView中加入一個ImageView，讓ImageView跟ScrollView的Content Layout Guide上下左右都對齊
＊圖片來源：高雄捷運官網
加入ScrollViewDelegate(按著Control拉)
- 加入UIScrollViewDelegate
- 在ViewDidLoad先設定好ScrollView
- updateContentInset：為了在縮放的過程中讓圖片保持置中，先得到圖片高度，再用整個『畫面高度-圖片高度＊縮放比例並除以二』進行計算，圖片上方應該空出多少，最後設定scrollView的contentInset，top這邊設定max()是讓算出來的空間跟0選一個大的顯示，因為圖片可能會放大到超過整個螢幕這樣算出來的空間可能是負數，這樣就要顯示這樣scrollView上方就不需要留空了
- updateZoom：設定整個scrollView的縮放比例，那在這呼叫一次updateContentInset，初始的時候圖片也是置中
- UIScrollViewDelegate-viewForZooming：哪個view進行縮放
- UIScrollViewDelegate-scrollViewDidZoom：在每次縮放滾動的時候呼叫updateContentInset，讓圖片置中
關於使用scrollView進行圖片縮放可參考下方連結：
心得
這次的功能實現其實不難但搜集資料真的麻煩很多，沒有API的情況下想說乾脆自己來用Airtable建立資料好了，順便練習做不同table的關聯，想不到搜集所有站點、出口的資料會用到這麼多時間，接下來要來趕快通過審核製作能夠顯示捷運班次動態資訊的功能了，謝謝大家
GitHub連結：
