Day 26｜Xcode 擴充功能：PickerView & NASA 等待動畫與 UI 優化

2025 iThome 鐵人賽

DAY 26

Mobile Development

Swift iOS 開發新手村：從入門到 AI 聊天室系列第 26 篇

17th鐵人賽

melodia

團隊nutc imac

2025-10-10 00:48:52

72 瀏覽

分享至

昨天，我們成功讓 App 連上 NASA 伺服器並顯示了天文圖片，完成了一個完整的互動流程！但妳可能也發現了一個小缺憾：按下按鈕後，畫面會「凍結」一下才出現圖片，使用者根本不知道發生了什麼事。

一個專業的 App，必須隨時讓使用者清楚目前的狀態。今天，我們就要來為這個 App 加上畫龍點睛的一筆——讀取中的等待動畫！我們將學習如何使用 UIActivityIndicatorView，在網路請求的空檔提供視覺回饋，並進一步優化我們的程式碼，讓 App 體驗更上一層樓。

今日學習重點

提升使用者體驗：了解為何需要「等待提示」，並學會使用 UIActivityIndicatorView
管理動畫生命週期：掌握在網路請求開始時啟動動畫、結束後停止動畫的邏輯
重構非同步程式碼：將 loadImage 函式升級為使用 完成回呼（completion handler） 的版本，實現更清晰的職責分離
清楚地處理錯誤：在網路請求失敗時，於介面上向使用者顯示明確的錯誤訊息。

一、新增元件並建立 IBOutlet

先在 .xib 上放置（可參考先前的教學文章）：

Activity Indicator View → 顯示「讀取中」的動畫
Label，並建立 IBOutlet → 顯示資料或錯誤訊息

@IBOutlet weak var lbInfo: UILabel!
@IBOutlet weak var aivWait: UIActivityIndicatorView!

Activity Indicator View 可於右側屬性設定勾選 Hides When Stopped，這樣停止動畫會自動隱藏。

二、修改 fetchData() 加入動畫

在發送 API 請求前啟動動畫，下載完成或失敗後停止動畫：

func fetchData() {
    guard let year = selectedYear,
          let month = selectedMonth,
          let day = selectedDay else { return }
        
    let dateString = String(format: "%04d-%02d-%02d", year, month, day)
    print("Fetch NASA data for date: \(dateString)")
        
    // 顯示等待動畫
    lbInfo.text = "讀取中..."
    aivWait.isHidden = false
    aivWait.startAnimating()
    imgNASA.image = nil // 先清空舊圖片
        
    NetworkManager.shared.fetchNASAData(for: dateString) { [weak self] result in
        DispatchQueue.main.async {
            guard let self = self else { return }
            
            switch result {
            case .success(let nasaData):
                // 更新文字
                self.lbInfo.text = "\(nasaData.date)\n\(nasaData.title)"
                    
                // 下載圖片 → 設定到 UIImageView → 停止動畫
                self.loadImage(from: nasaData.url) { image in
                    self.imgNASA.image = image
                    self.aivWait.stopAnimating()
                    self.aivWait.isHidden = true
                }
                    
            case .failure(let error):
                self.lbInfo.text = "讀取失敗：\(error.localizedDescription)"
                self.aivWait.stopAnimating()
                self.aivWait.isHidden = true
            }
        }
    }
}

startAnimating()：顯示旋轉動畫
stopAnimating()：停止動畫，若勾選 Hides When Stopped 會自動隱藏
API 請求期間告知使用者目前狀態為「讀取中...」
成功下載圖片後更新 ImageView，再停止動畫

三、優化 loadImage() 顯示

將圖片下載與 UI 更新拆開，使用 completion callback：

func loadImage(from urlString: String, completion: @escaping (UIImage?) -> Void) {
    guard let url = URL(string: urlString) else {
        print("URL 格式錯誤")
        completion(nil)
        return
    }
        
    URLSession.shared.dataTask(with: url) { data, _, error in
        if let error = error {
            print("下載圖片失敗: \(error.localizedDescription)")
            DispatchQueue.main.async {
                completion(nil)
            }
            return
        }
            
        guard let data = data, let image = UIImage(data: data) else {
            print("圖片資料為空或無法轉換成 UIImage")
            DispatchQueue.main.async {
                completion(nil)
            }
            return
        }
            
        // 成功下載，回傳圖片
        DispatchQueue.main.async {
            completion(image)
        }
    }.resume()
}