iOS 的 UIScrollView 可以說是十分強大,巧妙地運用它可以得到一些意想不到的效果。本文將舉幾個 ScrollView 不常見運用的例子。
自帶信息應用
這個界面既可以上下卷動,也可以左右滑動拉出發送時間。
P.S. 氣死寶寶了,我做了一組精美的 gif,但是大小都超出簡書限制…..無語,大家就腦補一下效果吧。
這個效果大體看一下就非常像一個很大的 ScrollView,可以四個方向都能滑動。但是 UITableView 只能上下滾動,硬要修改那就是大手術,不推薦這樣做。因此我想到的方法是先創建一個 ScrollView,將其 contentSize 設置為 TableView 的 contentSize,並將其寬度再設置大一個像素,這樣左右方向也可以滑動了。然后監聽 ScrollView 的滾動事件,將其 contentOffset.y 綁定到 TableView 的 contentOffset.y 上, 那么 contentOffset.x 就可以來設置每個 cell 的內部效果了。
下面我們看看代碼:
前半部分很簡單,就是一個 TableView 的初始化,下面是我們的重點,我創建了一個 UIScrollView,讓其 frame 與 TableView 的一致,Inset 也需要一致,然后設置代理來監聽滾動事件。
那么最后一句是什么意思呢?
因為 ScrollView 會攔截其下面的 View 的觸摸事件,這樣我們的 Cell 就無法被選中了。因此我們必須讓 ScrollView 的 userInteractionEnabled 屬性為 false,這樣它就不響應並攔截觸摸事件了,但是誰來讓它滑動呢?好在 iOS 把它內部的一個 UIPanGestureRecognizer 開放了出來,我們就可以將其嫁接到 TableView 的身上,這樣 TableView 就既可以響應點擊,也可以響應滾動了。
緊接着,我們需要知道 TableView 的內容有多大,這個大小需要計算,那么什么時候這個大小會被計算完呢?就是在下面這個代理方法被調用時:
我們更新 ScrollView 的 contentSize。
然后我們監聽 ScrollView 的滾動事件:
這就應該很簡單了,分別將 x、y 應用到響應的屬性即可,y 軸就給 TableView,讓其可以上下卷動,x 軸就給每個 cell,讓其做自己的處理。
最終效果如下:(不動右鍵新標簽打開)
(囧,圖超過了微信的最大限制 2 MB,貼不了,請大家腦補吧 )
實現和上面差不多,開頭聲明部分一致,代理方法如下:
這里為了實現吸附效果,我用到了 scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer) 這個方法,它的作用是通知代理用戶已經松開手指,現在視圖將會以一個速度卷動到一個目標位置,並且這個目標位置是可以用指針修改的。所以我只需判斷一下視圖將會滾動到什么位置,如果超過一個臨界值,就讓它完全滾動出來,否則就滾動回去。
本文通過這兩個小例子希望能起到拋磚引玉的作用,其實許多效果的實現都可以牽扯到 ScrollView 的運用。最后還是推薦大家關注一下 WWDC,很多 Session 都很有啟發性。
參考 Session:
WWDC 2014 – Session 235: Advanced Scrollviews and Touch Handling Techniques
WWDC 2013 – Session 217: Exploring Scroll Views on iOS 7
WWDC 2012 – Session 223: Enhancing User Experience with Scroll Views
WWDC 2011 – Session 104: Advanced ScrollView Techniques