相冊瀏覽的簡單應用(UIScrollView)

通過一個關于相冊瀏覽的簡單應用--圖片縮放,垂直滑動圖片,翻頁效果,大家將學到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和view之間的約束來決定subview的尺寸

當然,如果嫌麻煩的話,在UIScrollView和UILabel間增加一個UIView,上下左右約束均為0,以保證覆蓋scrollView,另外還要給它加寬度和高度約束,以完全定義contentSize。

#4 項目練習

下載UIScrollView材料

放大圖片的實現

1.將UIScrollView拖動到Zoomed Photo View Controller里,為scrollView添加約束,上下左右的間距均為0,為image view添加相同的約束。

添加UIScrollView和相應的約束

2.添加outlet屬性,并將這些屬性與storyboard里Zoomed Photo View Controller關聯起來。

ZoomPhotoViewController.swift

3.添加代理方法, imageView將隨UIScrollView而擴大。

需要注意的是,返回storyboard里,將delegate連接到scrollView上。

添加代理方法

4.計算并更新scrollView的最小縮放比例。

你需要考慮,為了擴大imageView,scrollView應縮小多大比例,才能讓imageView剛好fit ScrollView的bounds。

計算并更新scrollView的最小縮放比例

問題一:如何計算最小縮放比例?取寬度縮放比例和高度縮放比例的最小值。而要想計算寬度縮放比例,因為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--視圖左上角距離坐標原點的偏移量

為imageView的leading和trailing constraint計算offset
在縮放后,更新約束


垂直滑動圖片的實現

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出來。加約束。

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。

PhotoComment View Controller.swift

4.在CollectionViewController.swift里,添加prepareForSegue方法。當選中photo時,能將照片的名字set在PhotoComment View Controller上。

CollectionViewController.swift

5.處理鍵盤彈起和消失所帶來的scrollView的高度變化

PhotoCommentViewController.swift

需要解釋的是adjustInsetForKeyboardShow方法

(1)先得到notification中userInfo字典里keyboardFrame的值(NSValue類)

(2)將這個值轉為CGRect類

(3)計算scrollView應該調整的高度。如果鍵盤顯示,adjustmentHeight ?= keyboardFrame+20,如果鍵盤不顯示,就恢復原樣。

(4)計算scrollView的contentInset和scrollIndicatorInsets的底部位置

6.點擊空白處,隱藏鍵盤

--添加方法

PhotoCommentViewController.swift

--拖一個Tap Gesture Recognizer到PhotoComment View Controller的root view controller里,與此方法關聯,并且也要和view關聯?

Tap Gesture Recognizer

翻頁效果的實現

1.在storyboard里,拖動一個UIPageViewController,在Attributes Inspector里,把Transition Style修改為Scroll,Page Spacing設置為8,storyboard ID設為PageViewController,另外把PhotoCommentViewController的storyboard ID設為PhotoCommentViewController。

2.在PhotoCommentViewController.swift里添加以下代碼,指明photo的index。

PhotoCommentViewController.swift

3.新建一個文件,subclass of UIPageViewController,并命名為ManagePageViewController,并在storyboard中做相應地工作

(1)添加數組和當前索引

ManagePageViewController.swift

(2)搭建ManagePageViewController

--添加一個方法。此方法的作用在于:創建一個PhotoCommentViewController的實例page,并把ManagePageViewController中的name,index傳給這個實例。

ManagePageViewController.swift

--搭建ManagePageViewController。思路是:它由5個PhotoCommentViewController型的viewcontroller組成,所以先要調用上面的方法創建一個PhotoCommentViewController的實例,再創建這樣的數組,最后調用setViewControllers方法搭建ManageViewController。在viewDidLoad方法里添加代碼

ManagePageViewController.swift

(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屬性中。

CollectionViewController.swift

5.顯示Page Control Indicator

--添加UIPageControl的兩個方法。告訴page view controller顯示的頁的數目,以及當前顯示哪一頁。

ManagePageViewController.swift

--自定義PageControl

AppDelegate.swift

6.將ZoomedPhotoViewController添加進來

(1)在PhotoCommentViewController.swift里添加兩個方法,點擊imageView的時候,能夠轉到ZoomedPhotoViewController。在轉場前把PhotoCommentViewController的photoName存入ZoomedPhotoViewController中。

PhotoCommentViewController.swift

(2)在storyboard里,建立PhotoCommentViewController和ZoomedViewController之間的segue,segue命名為“zoom”。

將PhotoCommentViewController里的image view選中,勾選User Interaction Enabled。

添加Tap Gesture Recognizer,并與openZoomedViewController方法和imageView關聯。

終于,項目完成了!!!

參考博客:

UIScrollView Tutorial: Getting Started

UIScrollView 實踐經驗

ScrollView 與 Autolayout - Nonomori - Let monkeys coding for iOS

UIScrollView屬性及其代理方法 - 簡書

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,180評論 4 61
  • 我大體對某一個時間節點,一群人接近瘋狂的搶購某種東西毫不感冒,況且網絡上各種紅包返券讓人看了就頭疼,我數學不好,線...
    summershine閱讀 731評論 0 3
  • 當第一次收到這張照片的時候,我震驚了,“娛樂場的客人因為一把投注了360萬。自己八點輸莊家九點,血氣攻心,暈倒在地...
    安親閱讀 388評論 2 0
  • 今年有兩部日劇是做到刷屏的,一部是早前的《我的危險妻子》,另一部就是這周剛完結的《賢者之愛》。細想一下,這兩部片子...
    悲觀主義的花朵FOP閱讀 472評論 0 0
  • 前幾天被好友問起最喜歡的食物,我想都沒想說,當然是……說到一半忽然卡克了。如果問起我喜歡吃什么,絕對可以如數家...
    貓小埋閱讀 209評論 0 0