簡要
在本教學中，我們將學習如何在 Swift 的 `UITableView` 中實現下拉放大封面照的效果。當用戶下拉滾動時，封面圖片會隨著下拉的幅度而放大，類似於 Uber Eats 的功能。這樣的設計不僅提升了用戶體驗，也讓應用看起來更加精緻。
設置 UITableView
首先，我們需要在視圖中添加一個 `UITableView`，並在其上方新增一個 `UIImageView` 作為 header。
以下是 Swift 代碼示例：
“`swift
lazy var tableView: UITableView = {
let tableView = UITableView()
tableView.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
tableView.delegate = self
tableView.dataSource = self
tableView.register(UINib(nibName: “CoverCell”, bundle: nil), forCellReuseIdentifier: “CoverCell”)
tableView.addSubview(self.headImageView)
tableView.contentInset = UIEdgeInsets(top: 400 – 200, left: 0, bottom: 0, right: 0)
return tableView
}()
“`
設置 headImageView
接下來，我們需要設置 `headImageView`，並為其指定圖片和大小。
“`swift
lazy var headImageView: UIImageView = {
let headImageView = UIImageView()
headImageView.frame = CGRect(x: 0, y: -200, width: UIScreen.main.bounds.width, height: 200)
headImageView.contentMode = .scaleAspectFill
headImageView.image = UIImage(named: “testPhoto”) // 請確保圖片已被添加到專案中
headImageView.clipsToBounds = true
return headImageView
}()
“`
UITableView Delegate 方法
在這個部分，我們需要設置 `UITableView` 的基本數據源方法。這裡我們只簡單介紹，詳細內容可參考之前的文章。
“`swift
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 7 // 返回行數
}
func numberOfSections(in tableView: UITableView) -> Int {
return 1 // 返回區域數
}
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 300 // 返回行高
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell: CoverCell = tableView.dequeueReusableCell(withIdentifier: “CoverCell”) as! CoverCell
cell.numLabel.text = String(indexPath.item)
return cell
}
“`
監聽滾動事件
最關鍵的部分是實現 `scrollViewDidScroll` 方法，這樣我們就能根據滾動距離來放大封面圖片。
“`swift
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let offsetY = scrollView.contentOffset.y
let radius = -offsetY / 200 // 200 是 headView 的高度
if (-offsetY > 200) {
headImageView.transform = CGAffineTransform(scaleX: radius, y: radius)
var frame = headImageView.frame
frame.origin.y = offsetY
headImageView.frame = frame
}
}
“`
這樣設置後，我們的下拉放大效果就完成了，讓我們來看看效果如何。
Demo
GitHub 代碼實現
[點擊查看](https://github.com/Bgihe/TableViewHeaderTest)
https://wp.me/pcFK27-6J
Q&A（常見問題解答）
Q1: 如何自定義 header 的高度？
A1: 可以通過設置 `tableView.contentInset` 的值來調整 header 的高度。
Q2: 如何實現圖片的平滑過渡效果？
A2: 可以使用 `UIView.animate` 方法，根據滾動的距離來調整圖片的屬性。
Q3: 如果圖片不顯示，該怎麼辦？
A3: 確保圖片名稱與代碼中的名稱匹配，並且圖片已正確添加到專案中。
—