iOS UIScrollView 你可能不知道的奇技淫巧

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末果录,一起剝皮案震驚了整個濱河市上枕,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌弱恒,老刑警劉巖辨萍,帶你破解...
    沈念sama閱讀 211,290評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異返弹,居然都是意外死亡锈玉,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2 385
  • 文/潘曉璐 我一進(jìn)店門义起,熙熙樓的掌柜王于貴愁眉苦臉地迎上來拉背,“玉大人,你說我怎么就攤上這事默终∫喂祝” “怎么了?”我有些...
    開封第一講書人閱讀 156,872評論 0 347
  • 文/不壞的土叔 我叫張陵齐蔽,是天一觀的道長两疚。 經(jīng)常有香客問我,道長含滴,這世上最難降的妖魔是什么诱渤? 我笑而不...
    開封第一講書人閱讀 56,415評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮谈况,結(jié)果婚禮上勺美,老公的妹妹穿的比我還像新娘。我一直安慰自己碑韵,他們只是感情好赡茸,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,453評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著泼诱,像睡著了一般坛掠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,784評論 1 290
  • 那天屉栓,我揣著相機(jī)與錄音舷蒲,去河邊找鬼。 笑死友多,一個胖子當(dāng)著我的面吹牛牲平,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播域滥,決...
    沈念sama閱讀 38,927評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼纵柿,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了启绰?” 一聲冷哼從身側(cè)響起昂儒,我...
    開封第一講書人閱讀 37,691評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎委可,沒想到半個月后渊跋,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,137評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡着倾,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,472評論 2 326
  • 正文 我和宋清朗相戀三年拾酝,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片卡者。...
    茶點(diǎn)故事閱讀 38,622評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡蒿囤,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出崇决,到底是詐尸還是另有隱情材诽,我是刑警寧澤,帶...
    沈念sama閱讀 34,289評論 4 329
  • 正文 年R本政府宣布嗽桩,位于F島的核電站岳守,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏碌冶。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,887評論 3 312
  • 文/蒙蒙 一涝缝、第九天 我趴在偏房一處隱蔽的房頂上張望扑庞。 院中可真熱鬧,春花似錦拒逮、人聲如沸罐氨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽栅隐。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間租悄,已是汗流浹背谨究。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留泣棋,地道東北人胶哲。 一個月前我還...
    沈念sama閱讀 46,316評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像潭辈,于是被迫代替她去往敵國和親鸯屿。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,490評論 2 348

推薦閱讀更多精彩內(nèi)容