iT邦幫忙

2025 iThome 鐵人賽

DAY 24
0
Mobile Development

我將成為Swift之強者系列 第 24

Day24- 天氣 API 實作:XIB及程式碼展示(上)

  • 分享至 

  • xImage
  •  

Day24 - 天氣 API 實作:XIB展示

今天我們要來介紹天氣 App 介面部分的設計,也就是各個畫面的 XIB 佈局。雖然邏輯在前幾篇都已經完成,但畫面的呈現同樣重要,因為它決定了使用者操作的直覺性與整體體驗。


MainViewController

https://ithelp.ithome.com.tw/upload/images/20251008/20178625dGqbdqVW7X.png
在主畫面中,我們放置了 1 個 Button1 個 PickerView。PickerView 主要讓使用者可以從列表中選擇台灣的縣市,而 Button 則用來確認選擇並跳轉至下一個畫面。這個畫面看似簡單,但它是整個資料流程的開端。


SecondViewController

https://ithelp.ithome.com.tw/upload/images/20251008/201786252zTbv5uZGC.png
第二個畫面包含 1 個 Button1 個 Label1 個 TableView。Label 用來顯示當前選擇的城市名稱,而 TableView 則負責列出該地區未來幾個時段的天氣資料。返回按鈕讓使用者能輕鬆回到上一頁,整體設計乾淨、明確。


SecondTableViewCell

https://ithelp.ithome.com.tw/upload/images/20251008/20178625KPtgAWsFbi.png
最後是自訂的 Cell,內含 5 個 Label5 個 ImageView,分別顯示時間、溫度、天氣狀況與舒適度等資訊。這個 Cell 是整個介面的關鍵,負責將 API 資料清楚呈現給使用者,完成整個天氣資訊展示的最後一步。


上一篇
Day23 - 天氣 API 實作:自訂 TableView Cell 顯示天氣資訊
系列文
我將成為Swift之強者24
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言