前言
時間真快，兩個月多都沒有寫東西了。這期間除了忙工作的事情，還有就是自己東搞搞西搞搞的。打算先從寬拓展路子，所以一直也在看安卓的東西。 但是iOS老本行不能忘啊~
『即刻』這個APP是我，想必也是大家十分喜歡的。在現在這個一言不合就開噴的網絡環境里，微博早已經淪陷了，『即刻』就像是一股清流啊，但是現在即刻的評論區也漸漸的有評論區的“氛圍”，不知道最后會不會淪陷到和微博一樣。 扯遠了~~~
優秀的應用總是值得我們去模仿，即刻的首頁的推薦主題內容滾動效果和個人信息頁面的頭像拖動效果，還有視頻播放等效果都值得我們去模仿和學習。 前段時間看到的巴巴巴巴巴巴掌的模仿首頁滾動效果的安卓代碼，并且分析實現的原理，于是便想著用iOS的代碼也寫一下。
上邊提到的文章地址:巴巴巴巴巴巴掌的《手摸手教你寫炫酷控件》
實現效果
實現原理
實現原理其實真的沒什么可以講的,真的是太簡單了.大家看一下上邊的巴巴巴巴巴巴掌那篇文章,或者看下我從巴巴巴巴巴巴掌那里扣來的圖,就一目了然了.
擴展
其實提不到擴展,只是在巴巴巴巴巴巴掌安卓實現效果的基礎上,更加細化了一些功能.iOS這邊,本著拿來即用,接近『即刻』原生的原則,實現的功能如下:
- 正常滾動效果
- 文字區域的疊影顯示
- 數據驅動顯示
- 圖片顯示內存優化
實現說明
執行動畫效果是直接用的UIView自帶的動畫方法.
我是圖片滾動再寫到文字滾動，然后再包含到外邊的動態數據傳入.所以整個JiKeScrollView的項目結構如下，每個文件都是一個單獨的控件，都可以單獨提取出來使用。
正常滾動效果
這部分和實現原理差不多,沒什么說的.
需要注意的一個地方是:
描述文字總共占據兩行,如果當前顯示的文字沒有占滿兩行,只占了第一行的時候,這行文字也是在第一行顯示的,而我們UIlabel的默認顯示位置是居中的.
基本有三種可以解決這個問題的方法,我用的是加"\n"的方式
文字區域的疊影顯示
我們仔細看『即刻』的顯示效果的話,會發現文字滾動時候,有這么一個細節:
描述文字總共占據兩行,假如當前的圖片描述文字只占據了第一行的時候,那么下一個要顯示文字滾動下來的時候,當前顯示的文字是先做幾毫米的停留的.
這樣就出現了下一個顯示文字的動畫效果執行了一半（即如果下一行是兩行文字的話，當完整顯示處第一行文字的時候）,當前行的文字透明度降低,才開始向下滾動,直到離開所屬的View區域,產生一種疊加的效果
上邊的諜影實現效果也很簡單，我們只需要把當前文字的開始執行動畫效果的時間延遲值設置為下一行動畫執行從開始到結束時間的1/2.
這里還有一點需要注意的是:
我把當前行和下一行顯示的動畫執行效果分開了,但是動畫整體執行時間是以下一行為準的.也就是說當前行的執行時間(延遲時間+動畫從開始到結束的時間)必須和下一行動畫執行時間(不包括它的延遲時間)相同.
數據驅動顯示
這個名字有點大了,其實就是就考慮到我們在實際使用時候怎么方便一點.我這里的邏輯是:
先傳入初始化的信息,代碼如下:
_myJikeScrollView.myFirstShowImageLinkArray = @[
@[@"11",@"12"],
@[@"13",@"14"],
@[@"15",@"16"]
];
_myJikeScrollView.myFirstShowLabelDesArray = @[
@[@"左邊初始描述文字1",@"左邊初始描述文字2"],
@[@"中間初始描述文字3",@"中間初始描述文字4"],
@[@"右邊初始描述文字5",@"右邊初始描述文字6"]
];
如果想要執行滾動的時候,我們只需要傳入下一組數據就行了,如下代碼:
_myJikeScrollView.myNextShowImageLinkArray = self.tempImageLinkDataArray[dataShowIndex];
_myJikeScrollView.myNextShowLabelDesArray = self.tempImageDesDataArray[dataShowIndex];
其實我們仔細觀察『即刻』點擊'換一換',左邊是有個圓形指針再轉的,我想這個時候是在請求下下次我們要顯示的數據.這樣便可以保持每次次點擊'換一換'之后能夠馬上有數據滾動.
圖片顯示內存優化
這個是個問題,在快要寫完的時候,我發現程序開跑之后程序吃緊的厲害.這么一個只作為控件顯示的部分,跑起來就到了38M多. 之前一段時間就看到業界前輩們有關于圖片優化處理,集中發布過各種,借此機會,正好優化下.
其他注意
怎么知道三個部分動畫最終執行完畢的呢? 其實我沒有可以的增加總體結束的標識.因為我前邊說過，我是從小到大做的，在做單個UIImageView和UILabel展示的時候，就考慮到了如果單個控件連續點擊的執行問題. 肯定要保證當前執行的動畫完成之后再執行下一個動畫. 增加狀態標識，如果動畫正在執行，那么按鈕的點擊事件是不響應的.
Demo
因為完整代碼有點多,所以Demo中分為了三部分,除了完整代碼,還有是把基礎組件單個使用的的JiKeScrollImageViewVC和JiKeScrollLabelVC.
代碼地址:JiKeScrollView
交流
希望能和大家交流技術
GitHub:https://github.com/lilongcnc
Blog:http://www.lilongcnc.cc
