Description:
這個實作是透過UIScrollView並搭配UIPageControl來達成圖片左右滑動之效果。
UIScrollView是一個允許開發者一次預先載入數倍於手機畫面尺寸的view controller。
假設要預覽的影像圖有五張,因實際視圖範圍是一次載入五張圖而可見視圖範圍是一張圖,因此再搭配更新UIPageControl所產生出的頁數點可讓人誤以為是分五次看圖而不是一次看到橫向列出的五張圖。
以下是為使用UIScrollView的概念圖,紅色區為可視範圍但整體範圍卻是五倍於可視範圍:
Component:
Highlight function:
UIScrollView宣告方法:
var imgList: [UIImage] = [
UIImage(named: "01.jpg")!,
UIImage(named: "02.jpg")!,
UIImage(named: "03.jpg")!,
UIImage(named: "04.jpg")!,
UIImage(named: "05.jpg")!
]
fullSize = UIScreen.main.bounds.size
scrollView = UIScrollView()
scrollView.contentSize = CGSize(width: fullSize.width * CGFloat(imgList.count), height: fullSize.height)
UIScrollView顯示的方式是一次性的將欲預覽之圖片全部載入,因此用來顯示圖之UIImageView也須依照圖片數量來宣告。
for index in 0...imgList.count - 1 {
let imgView = UIImageView(image: imgList[index])
scrollView.addSubview(imgView)
}
UIPageControl宣告方式:
pageControl = UIPageControl()
pageControl.numberOfPages = imgList.count // page number
透過UIScrollViewDelegate protocol function來更新頁數:
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
// Update page number when user slide
let page = Int(scrollView.contentOffset.x / scrollView.frame.size.width)
pageControl.currentPage = page
}
Additional:
UIScrollView常用的member function介紹:
// 是否顯示滑動條
scrollView.showsHorizontalScrollIndicator = false
scrollView.showsVerticalScrollIndicator = false
scrollView.bounces = true // 滑動超過單張圖範圍時是否使用彈回效果
scrollView.isPagingEnabled = true // 以一頁為單位滑動
UIPageControl常用的member function介紹:
pageControl.currentPage = 0 // 起始頁面
pageControl.currentPageIndicatorTintColor = UIColor.black // 目前所在頁數的點點顏色
pageControl.pageIndicatorTintColor = UIColor.lightGray // 其餘頁數的點點顏色
Reference:
Source code on Github