通過一個關于相冊瀏覽的簡單應用--圖片縮放,垂直滑動圖片,翻頁效果,大家將學到UIScrollView相關的知識。
#1 UIScrollView是什么
1.UIScrollView是所有滾動視圖的基類,子類有UITableView和UICollectionView,是iOS開發中最常用的組件
2.UIScrollView是UIKit中為數不多響應滑動手勢的View
使用場景:顯示不下(單張大圖),內容太多(圖文混排),滾動頭條(圖片),相冊等
3.UIScrollView專長于兩個方面:滾動和縮放(zoom in && zoom out)
#2 UIScrollViewDelegate
是什么?UIScrollViewDelegate是UIScrollView的delegate protocol,UIScrollView的功能是通過它的代理方法實現的
以后我會補充的...
#3 UIScrollView和auto layout
UIScrollView和auto layout總的來說就一個原則,必須完全定義contentSize。
1.UIScrollView的contentSize屬性
contentSize表示UIScrollView可滾動內容的大小,由UIScrollView的subview的約束來決定。
2.對于UIScrollView的subview來說,它的約束是相對于UIScrollView的contentSize來說,而不是bounds。
3.Scrollable Content Size Ambiguity問題
什么時候會出現?用scrollView和它的subview的約束來互相決定大小時。
什么意思?scrollView的subview希望以contentSize為參照來確定自己的尺寸,但是contentSize又由subview的約束來確定。最后導致的就是,auto layout不知道到底誰來決定誰,不知道如何確定兩者的尺寸。
如何解決?兩種方案。
--用UIScrollView的width和height 來決定subview的尺寸
--用UIScrollView和view之間的約束來決定subview的尺寸?
當然,如果嫌麻煩的話,在UIScrollView和UILabel間增加一個UIView,上下左右約束均為0,以保證覆蓋scrollView,另外還要給它加寬度和高度約束,以完全定義contentSize。
#4 項目練習
下載UIScrollView材料
放大圖片的實現
1.將UIScrollView拖動到Zoomed Photo View Controller里,為scrollView添加約束,上下左右的間距均為0,為image view添加相同的約束。
2.添加outlet屬性,并將這些屬性與storyboard里Zoomed Photo View Controller關聯起來。
3.添加代理方法, imageView將隨UIScrollView而擴大。
需要注意的是,返回storyboard里,將delegate連接到scrollView上。
4.計算并更新scrollView的最小縮放比例。
你需要考慮,為了擴大imageView,scrollView應縮小多大比例,才能讓imageView剛好fit ScrollView的bounds。
問題一:如何計算最小縮放比例?取寬度縮放比例和高度縮放比例的最小值。而要想計算寬度縮放比例,因為scrollView這里應該縮小,所以size.width應該小于imageView.bounds.width,所以size.width應在分子位置上。
問題二:這里為什么不計算最大縮放比例?
scrollView的minimumZoomScale,maxZoomScale,zoomScale的默認值都是1.在這個地方,scrollView是縮小,當然考慮的是它的下限--最小縮放比例。
問題三:為什么用的是bounds而不是frame?
bounds是相對于subview而言的。
5.更新image view的約束。
為了讓scrollView縮小后,imageView還是能固定在center,這里需要對imageView的前后約束加以限制。注意,這里用的是frame,不是bounds,因為這里是相對于父視圖而言的。
用yOffset和xOffset來共同確定contentOffset--視圖左上角距離坐標原點的偏移量
垂直滑動圖片的實現
1.拖控件
--拖一個View Controller出來,命名為PhotoComment View Controller,在Attributes Inspector里,不要勾選Adjust ScrollView Insets,以方便一會手動設置scrollview的insets
--分別拖一個scrollView和view出來,view設為scrollView的child。給這兩個view加約束,上下左右的間隔均為0。把view命名為containerView,給它的寬高加約束,containerView.width = superview.width,container.height = 500.
--拖一個imageView,label和textField出來。加約束。
2.建立segue
去掉Photo Scroll View Controller和Zoomed Photo View Controller之間的segue,建立Photo Scroll View Controller和PhotoComment View Controller之間的segue,Identifier命名為“showPhotoPage”
3.將storyboard與代碼關聯起來,并通過photoName來set imageView的image。
4.在CollectionViewController.swift里,添加prepareForSegue方法。當選中photo時,能將照片的名字set在PhotoComment View Controller上。
5.處理鍵盤彈起和消失所帶來的scrollView的高度變化
需要解釋的是adjustInsetForKeyboardShow方法
(1)先得到notification中userInfo字典里keyboardFrame的值(NSValue類)
(2)將這個值轉為CGRect類
(3)計算scrollView應該調整的高度。如果鍵盤顯示,adjustmentHeight ?= keyboardFrame+20,如果鍵盤不顯示,就恢復原樣。
(4)計算scrollView的contentInset和scrollIndicatorInsets的底部位置
6.點擊空白處,隱藏鍵盤
--添加方法
--拖一個Tap Gesture Recognizer到PhotoComment View Controller的root view controller里,與此方法關聯,并且也要和view關聯?
翻頁效果的實現
1.在storyboard里,拖動一個UIPageViewController,在Attributes Inspector里,把Transition Style修改為Scroll,Page Spacing設置為8,storyboard ID設為PageViewController,另外把PhotoCommentViewController的storyboard ID設為PhotoCommentViewController。
2.在PhotoCommentViewController.swift里添加以下代碼,指明photo的index。
3.新建一個文件,subclass of UIPageViewController,并命名為ManagePageViewController,并在storyboard中做相應地工作
(1)添加數組和當前索引
(2)搭建ManagePageViewController
--添加一個方法。此方法的作用在于:創建一個PhotoCommentViewController的實例page,并把ManagePageViewController中的name,index傳給這個實例。
--搭建ManagePageViewController。思路是:它由5個PhotoCommentViewController型的viewcontroller組成,所以先要調用上面的方法創建一個PhotoCommentViewController的實例,再創建這樣的數組,最后調用setViewControllers方法搭建ManageViewController。在viewDidLoad方法里添加代碼
(3)添加兩個數據源方法,向前滑動和向后滑動的時候content能相應地呈現出來。需要解釋的是:
--UIPageViewControllerDataSource讓頁面變化的時候,內容能夠相應地呈現出來。
--參數viewController顯示的是當前顯示的頁面
向前滑動,創建一個PhotoCommentViewController類的實例viewController,在保證index不為0(不是第一個頁面)且找得到的情況下,調用viewPhotoCommentController方法創建一個新的實例,作為前一個頁面。
向后滑動,index的條件變成index找得到且index不是最后一個頁面。
4.處理轉場
--刪掉之前的showPhotoPage轉場,添加Scroll View Controller到Manage Page View Controller之間的segue,并把這個segue的Identifier命名為“showPhotoPage”
--在轉場前,做一些準備。把Scroll View Controller的row屬性和photos存入ManagePage View Controller的currentIndex和photos屬性中。
5.顯示Page Control Indicator
--添加UIPageControl的兩個方法。告訴page view controller顯示的頁的數目,以及當前顯示哪一頁。
--自定義PageControl
6.將ZoomedPhotoViewController添加進來
(1)在PhotoCommentViewController.swift里添加兩個方法,點擊imageView的時候,能夠轉到ZoomedPhotoViewController。在轉場前把PhotoCommentViewController的photoName存入ZoomedPhotoViewController中。
(2)在storyboard里,建立PhotoCommentViewController和ZoomedViewController之間的segue,segue命名為“zoom”。
將PhotoCommentViewController里的image view選中,勾選User Interaction Enabled。
添加Tap Gesture Recognizer,并與openZoomedViewController方法和imageView關聯。
終于,項目完成了!!!
參考博客:
UIScrollView Tutorial: Getting Started
ScrollView 與 Autolayout - Nonomori - Let monkeys coding for iOS