iOS 的 UIScrollView
可以說是十分強(qiáng)大,巧妙地運(yùn)用它可以得到一些意想不到的效果。本文將舉幾個 ScrollView 不常見運(yùn)用的例子悬包。
自帶信息應(yīng)用
這個界面既可以上下卷動医咨,也可以左右滑動拉出發(fā)送時間。
P.S. 氣死寶寶了狭握,我做了一組精美的 gif,但是大小都超出簡書限制.....無語慕嚷,大家就腦補(bǔ)一下效果吧哥牍。
這個效果大體看一下就非常像一個很大的 ScrollView,可以四個方向都能滑動喝检。但是 UITableView
只能上下滾動嗅辣,硬要修改那就是大手術(shù),不推薦這樣做挠说。因此我想到的方法是先創(chuàng)建一個 ScrollView澡谭,將其 contentSize
設(shè)置為 TableView 的 contentSize
,并將其寬度再設(shè)置大一個像素,這樣左右方向也可以滑動了蛙奖。然后監(jiān)聽 ScrollView 的滾動事件潘酗,將其 contentOffset.y
綁定到 TableView 的 contentOffset.y
上, 那么 contentOffset.x
就可以來設(shè)置每個 cell 的內(nèi)部效果了雁仲。
下面我們看看代碼:
前半部分很簡單仔夺,就是一個 TableView 的初始化,下面是我們的重點(diǎn)攒砖,我創(chuàng)建了一個 UIScrollView
缸兔,讓其 frame 與 TableView 的一致,Inset 也需要一致吹艇,然后設(shè)置代理來監(jiān)聽滾動事件惰蜜。
那么最后一句是什么意思呢?
因為 ScrollView 會攔截其下面的 View 的觸摸事件受神,這樣我們的 Cell 就無法被選中了抛猖。因此我們必須讓 ScrollView 的 userInteractionEnabled
屬性為 false
,這樣它就不響應(yīng)并攔截觸摸事件了鼻听,但是誰來讓它滑動呢财著?好在 iOS 把它內(nèi)部的一個 UIPanGestureRecognizer
開放了出來,我們就可以將其嫁接到 TableView 的身上精算,這樣 TableView 就既可以響應(yīng)點(diǎn)擊瓢宦,也可以響應(yīng)滾動了。
緊接著灰羽,我們需要知道 TableView 的內(nèi)容有多大,這個大小需要計算鱼辙,那么什么時候這個大小會被計算完呢廉嚼?就是在下面這個代理方法被調(diào)用時:
我們更新 ScrollView 的
contentSize
。
然后我們監(jiān)聽 ScrollView 的滾動事件:
這就應(yīng)該很簡單了倒戏,分別將 x怠噪、y 應(yīng)用到響應(yīng)的屬性即可,y 軸就給 TableView杜跷,讓其可以上下卷動傍念,x 軸就給每個 cell,讓其做自己的處理葛闷。
最終效果如下:(不動右鍵新標(biāo)簽打開)
主頁面 Spotlight 效果
先看最終效果:(不動右鍵新標(biāo)簽打開)
實(shí)現(xiàn)和上面差不多憋槐,開頭聲明部分一致,代理方法如下:
這里為了實(shí)現(xiàn)吸附效果淑趾,我用到了 scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>)
這個方法阳仔,它的作用是通知代理用戶已經(jīng)松開手指,現(xiàn)在視圖將會以一個速度卷動到一個目標(biāo)位置扣泊,并且這個目標(biāo)位置是可以用指針修改的近范。所以我只需判斷一下視圖將會滾動到什么位置嘶摊,如果超過一個臨界值,就讓它完全滾動出來评矩,否則就滾動回去叶堆。
本文通過這兩個小例子希望能起到拋磚引玉的作用,其實(shí)許多效果的實(shí)現(xiàn)都可以牽扯到 ScrollView 的運(yùn)用斥杜。最后還是推薦大家關(guān)注一下 WWDC蹂空,很多 Session 都很有啟發(fā)性。
參考 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