[iOS study] scroll view delegate分頁和圖片縮放-清明上河圖

研究 UIScrollViewDelegate protocol 的相關功能，從故宮網上截了清明上河圖做範例練習。

取自故宮的清明上河圖之其中一部

在storyboard將imageView放入scrollView(detail), 再將scrollView(detail)放入view，再將view放入scrollView(page)

view的width, height設定不能超過10000, 但是scrollView的contentSize可以

Main.storyboard: error: Illegal Configuration: Interface Builder does not support UIView sizes larger than 10,000 by 10,000.

將imageView, scrollView(detail), scrollView(page), pageControl拉出outlet

@IBOutlet weak var pageControl: UIPageControl!
@IBOutlet weak var pageScroll: UIScrollView!
@IBOutlet var detailScroll: [UIScrollView]!
@IBOutlet var imageView: [UIImageView]!

利用 page control 的小圓點顯示目前在第幾頁

捲動分頁時，pageControl的圓點隨之變動

要設定分頁scrollView的delegate,

可寫程式也可在storyboard設定，這裡在storyboard拉取：

需在viewcontroller加上protocol的UIScrollViewDelegate

class ViewController: UIViewController,UIScrollViewDelegate

再設定遵從的func,

可以查到跟捲動相關的func 如下：

Responding to Scrolling and Dragging
func scrollViewDidScroll(UIScrollView)
Tells the delegate when the user scrolls the content view within the receiver.
func scrollViewWillBeginDragging(UIScrollView)
Tells the delegate when the scroll view is about to start scrolling the content.
func scrollViewWillEndDragging(UIScrollView, withVelocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>)
Tells the delegate when the user finishes scrolling the content.
func scrollViewDidEndDragging(UIScrollView, willDecelerate: Bool)
Tells the delegate when dragging ended in the scroll view.
func scrollViewShouldScrollToTop(UIScrollView) -> Bool
Asks the delegate if the scroll view should scroll to the top of the content.
func scrollViewDidScrollToTop(UIScrollView)
Tells the delegate that the scroll view scrolled to the top of the content.
func scrollViewWillBeginDecelerating(UIScrollView)
Tells the delegate that the scroll view is starting to decelerate the scrolling movement.
func scrollViewDidEndDecelerating(UIScrollView)
Tells the delegate that the scroll view has ended decelerating the scrolling movement.

由於我用清明上河圖為範例，所以想讓分頁圖片保持連續而不勾選paging Enabled, protocol也直接選用scrollViewDidScroll

設定在下一頁捲動3分之2時,小圓點就切換，語法如下：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
let frameWidth = Int(pageScroll.frame.size.width)
let contentOffsetX = Int(pageScroll.contentOffset.x) + frameWidth / 3
let currentPage = contentOffsetX / frameWidth
pageControl.currentPage = currentPage
}

pageControl的圓點左右變動時，scrollView分頁隨之變動

@IBAction func pageControlFunc(_ sender: UIPageControl) {
pageScroll.contentOffset.x = detailScroll[sender.currentPage].frame.origin.x
}

實作可分頁和縮放大小的照片瀏覽頁面

用pageScroll設定了可捲動分頁，接下來用detailScroll設定可縮放大小的照片瀏覽頁面。

detailScroll的縮放比例跟delegate同樣有用程式跟用storyboard兩種方法，這次用程式設定：

override func viewDidLoad() {
super.viewDidLoad()
for i in 0...11{
detailScroll[i].delegate = self
detailScroll[i].maximumZoomScale = 5
detailScroll[i].minimumZoomScale = 1
detailScroll[i].zoomScale = 1
}
}

遵從選用跟縮放相關的func

Managing Zooming
func viewForZooming(in: UIScrollView) -> UIView?
Asks the delegate for the view to scale when zooming is about to occur in the scroll view.

在程式內return imageView即可呈現縮放效果。

但因我的分頁不勾選paging Enabled，所以縮放時畫面會有點奇怪

因此需在return前多加一行程式：

func viewForZooming(in scrollView: UIScrollView) -> UIView? {
pageScroll.contentOffset.x = detailScroll[pageControl.currentPage].frame.origin.x
return imageView[pageControl.currentPage]
}

如此縮放一張圖時，pageScroll位置為指定在該張圖的scrollView

這樣就可以觀看清明上河圖的細節了

（只是不曉得為何我的最後一頁圖無法縮放）

github:

yolanda0213h/scrollDelegate