簡要
在這篇文章中，我們將學習如何使用 Swift 實現一個廣告 Banner 輪播器。這個輪播器可以用來展示廣告或優惠信息，並且支持左右滑動的功能。這是一個非常常見的 UI 元件，適用於各種應用程序中的廣告展示。
正題
初始設定
為了實現這個功能，我們需要使用 `UIScrollView` 來顯示圖片，並設置 `UIScrollViewDelegate`。以下是初始化所需的變數：
– `currentIndex`：紀錄目前的索引。
– `imageArray`：儲存圖片名稱。
– `timer`：用於定時切換圖片。
– `leftImageView`、`rightImageView`、`currentImageView`：用於預載圖片，避免滑動時出現延遲。
“`swift
class ViewController: UIViewController, UIScrollViewDelegate {
let width = UIScreen.main.bounds.size.width
var currentIndex: NSInteger = 0
var leftImageView = UIImageView()
var rightImageView = UIImageView()
var currentImageView = UIImageView()
var imageArray = [String]()
var timer = Timer()
}
“`
懶加載
ScrollView
接下來，我們設置 `UIScrollView` 的範圍為手機寬度的三倍，並將三張圖片平均分布在 `scrollView` 中。
“`swift
lazy var scrollView: UIScrollView = {
let scrollView = UIScrollView()
scrollView.contentSize = CGSize(width: width * 3, height: 200)
scrollView.contentOffset = CGPoint(x: width, y: 50)
scrollView.isPagingEnabled = true
scrollView.frame = CGRect(x: 0, y: 50, width: width, height: 200)
rightImageView.frame = CGRect(x: width * 2, y: 50, width: width, height: 200)
currentImageView.frame = CGRect(x: width * 1, y: 50, width: width, height: 200)
leftImageView.frame = CGRect(x: width * 0, y: 50, width: width, height: 200)
scrollView.addSubview(rightImageView)
scrollView.addSubview(currentImageView)
scrollView.addSubview(leftImageView)
scrollView.delegate = self
return scrollView
}()
“`
PageControl
接著，我們需要一個 `UIPageControl` 來顯示當前頁碼和小圓點。
“`swift
lazy var pageControl: UIPageControl = {
let pageControl = UIPageControl()
pageControl.frame = CGRect(x: 0, y: scrollView.frame.maxY – 20, width: width, height: 20)
pageControl.backgroundColor = UIColor.clear
pageControl.currentPageIndicatorTintColor = UIColor.white
pageControl.pageIndicatorTintColor = UIColor.lightGray
pageControl.numberOfPages = imageArray.count
pageControl.currentPage = 0
return pageControl
}()
“`
更新圖片
在每次頁面變動時，我們需要更新三個 `imageView`，並將 `scrollView` 的偏移量重置回中間。
“`swift
func reloadImage() {
var leftIndex = (currentIndex – 1 + imageArray.count) % imageArray.count
var rightIndex = (currentIndex + 1) % imageArray.count
scrollView.setContentOffset(CGPoint(x: width, y: 50), animated: false)
pageControl.currentPage = currentIndex
leftImageView.image = UIImage(named: imageArray[leftIndex])
currentImageView.image = UIImage(named: imageArray[currentIndex])
rightImageView.image = UIImage(named: imageArray[rightIndex])
}
“`
Timer
我們設定一個定時器，每兩秒更新一次圖片。
“`swift
func setupTimer() {
timer = Timer.scheduledTimer(timeInterval: 2, target: self, selector: #selector(timeChanged), userInfo: nil, repeats: true)
RunLoop.current.add(timer, forMode: .common)
}
@objc func timeChanged() {
currentIndex = (currentIndex + 1) % imageArray.count
reloadImage()
}
“`
ScrollView 監聽事件
我們需要監聽 `scrollView` 的滑動事件，以便在滑動時停止自動輪播，並根據滑動方向更新 `currentIndex`。
“`swift
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
timer.invalidate()
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
if scrollView.contentOffset.x > width {
currentIndex = (currentIndex + 1) % imageArray.count
} else if scrollView.contentOffset.x < width {
currentIndex = (currentIndex - 1 + imageArray.count) % imageArray.count
}
pageControl.currentPage = currentIndex
reloadImage()
setupTimer()
}
```
viewDidLoad
在 `viewDidLoad` 中，我們將圖片加入 `imageArray`，並將 `scrollView` 和 `pageControl` 添加到主視圖中。
“`swift
override func viewDidLoad() {
super.viewDidLoad()
imageArray = [“banner1”, “banner2”, “banner3”, “banner4”, “banner5”, “banner6”, “banner7”]
self.view.addSubview(self.scrollView)
self.view.addSubview(self.pageControl)
reloadImage()
setupTimer()
}
“`
錯誤排除
– 若圖片無法顯示，請檢查圖片名稱是否正確，並確認圖片已添加至專案中。
– 若滑動效果不流暢，確保 `isPagingEnabled` 設置為 `true`。
延伸應用
這個廣告 Banner 輪播器可以擴展至其他用途，例如展示產品圖片、促銷活動等，並且可以根據需求自定義樣式和過渡效果。
Demo
GitHub 連結:
https://github.com/Bgihe/BannerTest
Q&A（常見問題解答）
**Q1: 如何更改輪播的時間間隔？**
A1: 您可以在 `setupTimer` 函數中修改 `timeInterval` 的值來調整時間間隔。
**Q2: 如何添加更多圖片？**
A2: 只需在 `imageArray` 中添加更多圖片名稱，並確保它們已包含在專案中。
**Q3: 支持點擊圖片進行導航嗎？**
A3: 是的，您可以為 `imageView` 添加點擊手勢，然後在手勢識別器中執行導航操作。
—