作業#50 CollectionView+ScrollView+PageControl-切換與縮放照片

目的：使用ScrollView縮放照片以及運用ScrollViewDelegate變更PageControl讓使用者知道目前的照片數

說到縮放圖片我第一個想到最近台灣在Netflix上非常紅的台劇-華燈初上，在很多論壇都能看到有人利用放大圖片來觀察劇照中的細節來尋找兇手破案，這次就來練習製作出可以看多張劇照+角色照片且可以縮放來看的App

原本是打算用ScrollView包ScrollView來呈現切換照片以及縮放照片，但Peter在文章說用CollectionView或PageViewController顯示照片會比較好，而且照片數量多的時候用CollectionView也會比ScrollView來的好，所以這篇文章我會用CollectionView來製作顯示多張照片，並切在CollectionView的Item內放上ScrollView來縮放照片

本篇文章會用到

1. CollectionView來顯示多張在照片，每張照片跟畫面等大
2. 運用ScrollViewDelegate縮放照片以及改變PageControl顯示第幾張照片

CollectionView

照片有分成劇照＆演員兩種，但基本上內容都一樣所以我以其中一種來分享

storyboard

在每個cell裡放一個scrollView然後設定autoLayout跟ContentView一樣大，接著放進UIImageView然後跟content layout guide設定top、bottom、leading、trailing都對齊

程式

FlowLayout

設定每個Item跟畫面等大，且每個Item中間相連

CollectionViewDataSource

ScrollViewDelegate

CollectionView裡也有ScrollView所以也有辦法使用ScrollViewDelegate的function，然後變更PageControl的currentPage

CollectionViewDelegate

用willDisplay來處理即將顯示的Item，顯示後生成要顯示的StagePhotoCollectionViewCell，使用CollectionViewCell的function，設定item內的scrollView的zoom

CollectionViewCell

圖片置中-updateContentInset

1. 先獲得當下要顯示的圖片的高度
2. ScrollView的高度減掉圖片的高度再去乘以scrollView的顯示比例最後除以二，要乘上顯示比例是因為要把縮放加進去
3. 然後設定contentInset，用max()去挑最大的值顯示，因為有可能放大到超過ScrollView的bounds，那這樣會變負數那顯示0即可

更新ScrollView的zoom

1. 設定最大最小以及預設比例
2. 最後要更新圖片置中，因為這會CollectionView的willDisplay時使用，當下需要初始圖片的ContentInset

縮放圖片-UIScrollViewDelegate

viewForZooming

要縮放的圖片

scrollViewDidZoom

縮放後用目前的比例去變更contentInset

操作畫面

參考連結：

#76 scroll view delegate — 分頁和圖片縮放

scroll view 決定捲動範圍的 Content Layout Guide

利用 scroll view & contentInset 縮放置中圖片

iOS 14 進化的 page control

Peter CollectionView做法GitHub連結：

GitHub - AppPeterPan/CollectionViewPageAndZoom

GitHub連結：

GitHub - PogaHuang/Homework50LightTheNight