簡要
在這篇文章中，我們將學習如何在 Swift 中實現一個下拉放大封面照的效果，並讓頂部圖片隨著滾動而變化。我們將使用 `UIScrollViewDelegate` 的 `scrollViewDidScroll` 方法來達成這個效果，並展示一個簡單的範例，讓你可以輕鬆地應用在自己的專案中。這種效果在許多應用中都能看到，例如原生的 Uber Eats 應用。
基本設置
首先，我們需要設置 `UITableView` 和一個自定義的 `topView` 來顯示一些餐廳的資訊。以下是設置的範例程式碼：
“`swift
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(self.tableView)
self.view.addSubview(self.topView)
}
“`
接著，我們會定義一個 `topView`，這個視圖將包含標題、分類和其他資訊：
“`swift
lazy var topView: UIView = {
let topView = UIView()
topView.frame = CGRect(x: 15, y: 100, width: UIScreen.main.bounds.width – 30, height: 200)
topView.backgroundColor = UIColor.white
let titleLabel = UILabel()
titleLabel.frame = CGRect(x: 20, y: 25, width: topView.frame.width – 40, height: 75)
titleLabel.font = UIFont.systemFont(ofSize: 23)
titleLabel.numberOfLines = 2
titleLabel.text = “麥當勞 S161中復興二 McDonald’s Fu Sing II, Taichung”
topView.addSubview(titleLabel)
let stateLabel = UILabel()
stateLabel.frame = CGRect(x: 20, y: titleLabel.frame.maxY, width: topView.frame.width – 40, height: 20)
stateLabel.font = UIFont.systemFont(ofSize: 13)
stateLabel.text = “美式美食・$”
topView.addSubview(stateLabel)
let otherLabel = UILabel()
otherLabel.frame = CGRect(x: 20, y: stateLabel.frame.maxY + 20, width: topView.frame.width – 40, height: 20)
otherLabel.textColor = UIColor.darkGray
otherLabel.font = UIFont.systemFont(ofSize: 13)
otherLabel.text = “5-15分鐘 4.8(500+) 15.00TWD 費用”
topView.addSubview(otherLabel)
return topView
}()
“`
scrollViewDidScroll 方法
接下來，我們將實現 `scrollViewDidScroll` 方法來處理滾動事件，讓 `topView` 和封面照隨著滾動進行變化。
“`swift
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let offsetY = scrollView.contentOffset.y
let radius = -offsetY / 200
if (-offsetY > 200) {
headImageView.transform = CGAffineTransform(scaleX: radius, y: radius)
var frame = headImageView.frame
frame.origin.y = offsetY
headImageView.frame = frame
}
let topViewX: CGFloat = 15 * radius
topView.frame = CGRect(x: topViewX, y: 100 – 200 – offsetY, width: UIScreen.main.bounds.width – topViewX * 2, height: 200)
// 透明度和標題行數的調整
if radius > 0 {
titleLabel.numberOfLines = 2
stateLabel.alpha = radius
otherLabel.alpha = radius
} else {
titleLabel.numberOfLines = 1
stateLabel.alpha = 0
otherLabel.alpha = 0
}
}
“`
這段程式碼會根據滑動距離調整 `topView` 的位置和大小，並控制標題的透明度和行數，使其隨著滾動效果而變化。
Demo
完成效果
最終效果將會是當用戶下拉時，底部的封面照會放大，並且 `topView` 的內容會隨著滾動而變化，實現一個流暢的用戶體驗。
GitHub Repository: TableViewHeaderTest
Q&A（常見問題解答）
**Q1: 如何調整封面照的大小？**
A1: 你可以調整 `headImageView` 的初始框架或在 `scrollViewDidScroll` 方法中更改縮放因子來改變封面照的大小。
**Q2: 如何改變標題的字體和顏色？**
A2: 在 `titleLabel` 的配置中，使用 `UIFont.systemFont(ofSize: )` 方法來設置字體大小，使用 `titleLabel.textColor` 屬性來設置顏色。
**Q3: 這個效果可以應用在哪些場合？**
A3: 這個下拉放大效果適合用於餐廳、旅遊或其他需要展示封面照片的應用中，可以提升用戶的視覺體驗。
—
這樣的內容優化不僅提升了文章的完整性與實用性，還遵循了 SEO 最佳實踐，幫助文章在搜尋引擎中獲得更好的排名。