前言

時(shí)間真快，兩個(gè)月多都沒有寫東西了。這期間除了忙工作的事情，還有就是自己東搞搞西搞搞的。打算先從寬拓展路子，所以一直也在看安卓的東西。 但是iOS老本行不能忘啊~

『即刻』這個(gè)APP是我，想必也是大家十分喜歡的。在現(xiàn)在這個(gè)一言不合就開噴的網(wǎng)絡(luò)環(huán)境里，微博早已經(jīng)淪陷了，『即刻』就像是一股清流啊，但是現(xiàn)在即刻的評(píng)論區(qū)也漸漸的有評(píng)論區(qū)的“氛圍”，不知道最后會(huì)不會(huì)淪陷到和微博一樣。 扯遠(yuǎn)了~~~
優(yōu)秀的應(yīng)用總是值得我們?nèi)ツ７拢纯痰?code>首頁的推薦主題內(nèi)容滾動(dòng)效果和個(gè)人信息頁面的頭像拖動(dòng)效果，還有視頻播放等效果都值得我們?nèi)ツ７潞蛯W(xué)習(xí)。 前段時(shí)間看到的巴巴巴巴巴巴掌的模仿首頁滾動(dòng)效果的安卓代碼，并且分析實(shí)現(xiàn)的原理，于是便想著用iOS的代碼也寫一下。
上邊提到的文章地址:巴巴巴巴巴巴掌的《手摸手教你寫炫酷控件》

實(shí)現(xiàn)效果

實(shí)現(xiàn)原理

實(shí)現(xiàn)原理其實(shí)真的沒什么可以講的,真的是太簡(jiǎn)單了.大家看一下上邊的巴巴巴巴巴巴掌那篇文章,或者看下我從巴巴巴巴巴巴掌那里扣來的圖,就一目了然了.

擴(kuò)展

其實(shí)提不到擴(kuò)展,只是在巴巴巴巴巴巴掌安卓實(shí)現(xiàn)效果的基礎(chǔ)上,更加細(xì)化了一些功能.iOS這邊,本著拿來即用,接近『即刻』原生的原則,實(shí)現(xiàn)的功能如下:

• 正常滾動(dòng)效果
• 文字區(qū)域的疊影顯示
• 數(shù)據(jù)驅(qū)動(dòng)顯示
• 圖片顯示內(nèi)存優(yōu)化

實(shí)現(xiàn)說明

執(zhí)行動(dòng)畫效果是直接用的UIView自帶的動(dòng)畫方法.
我是圖片滾動(dòng)再寫到文字滾動(dòng)，然后再包含到外邊的動(dòng)態(tài)數(shù)據(jù)傳入.所以整個(gè)JiKeScrollView的項(xiàng)目結(jié)構(gòu)如下，每個(gè)文件都是一個(gè)單獨(dú)的控件，都可以單獨(dú)提取出來使用。

正常滾動(dòng)效果

這部分和實(shí)現(xiàn)原理差不多,沒什么說的.
需要注意的一個(gè)地方是:
描述文字總共占據(jù)兩行,如果當(dāng)前顯示的文字沒有占滿兩行,只占了第一行的時(shí)候,這行文字也是在第一行顯示的,而我們UIlabel的默認(rèn)顯示位置是居中的.
基本有三種可以解決這個(gè)問題的方法,我用的是加"\n"的方式

文字區(qū)域的疊影顯示

我們仔細(xì)看『即刻』的顯示效果的話,會(huì)發(fā)現(xiàn)文字滾動(dòng)時(shí)候,有這么一個(gè)細(xì)節(jié):

描述文字總共占據(jù)兩行,假如當(dāng)前的圖片描述文字只占據(jù)了第一行的時(shí)候,那么下一個(gè)要顯示文字滾動(dòng)下來的時(shí)候,當(dāng)前顯示的文字是先做幾毫米的停留的.
這樣就出現(xiàn)了下一個(gè)顯示文字的動(dòng)畫效果執(zhí)行了一半（即如果下一行是兩行文字的話，當(dāng)完整顯示處第一行文字的時(shí)候）,當(dāng)前行的文字透明度降低,才開始向下滾動(dòng),直到離開所屬的View區(qū)域,產(chǎn)生一種疊加的效果

上邊的諜影實(shí)現(xiàn)效果也很簡(jiǎn)單，我們只需要把當(dāng)前文字的開始執(zhí)行動(dòng)畫效果的時(shí)間延遲值設(shè)置為下一行動(dòng)畫執(zhí)行從開始到結(jié)束時(shí)間的1/2.

這里還有一點(diǎn)需要注意的是:

我把當(dāng)前行和下一行顯示的動(dòng)畫執(zhí)行效果分開了,但是動(dòng)畫整體執(zhí)行時(shí)間是以下一行為準(zhǔn)的.也就是說當(dāng)前行的執(zhí)行時(shí)間(延遲時(shí)間+動(dòng)畫從開始到結(jié)束的時(shí)間)必須和下一行動(dòng)畫執(zhí)行時(shí)間(不包括它的延遲時(shí)間)相同.

數(shù)據(jù)驅(qū)動(dòng)顯示

這個(gè)名字有點(diǎn)大了,其實(shí)就是就考慮到我們?cè)趯?shí)際使用時(shí)候怎么方便一點(diǎn).我這里的邏輯是:

先傳入初始化的信息,代碼如下:

_myJikeScrollView.myFirstShowImageLinkArray = @[
                                                @[@"11",@"12"],
                                                @[@"13",@"14"],
                                                @[@"15",@"16"]
                                                ];
_myJikeScrollView.myFirstShowLabelDesArray = @[
                                               @[@"左邊初始描述文字1",@"左邊初始描述文字2"],
                                               @[@"中間初始描述文字3",@"中間初始描述文字4"],
                                               @[@"右邊初始描述文字5",@"右邊初始描述文字6"]
                                               ];

如果想要執(zhí)行滾動(dòng)的時(shí)候,我們只需要傳入下一組數(shù)據(jù)就行了,如下代碼:

_myJikeScrollView.myNextShowImageLinkArray = self.tempImageLinkDataArray[dataShowIndex];
_myJikeScrollView.myNextShowLabelDesArray = self.tempImageDesDataArray[dataShowIndex];

其實(shí)我們仔細(xì)觀察『即刻』點(diǎn)擊'換一換',左邊是有個(gè)圓形指針再轉(zhuǎn)的,我想這個(gè)時(shí)候是在請(qǐng)求下下次我們要顯示的數(shù)據(jù).這樣便可以保持每次次點(diǎn)擊'換一換'之后能夠馬上有數(shù)據(jù)滾動(dòng).

圖片顯示內(nèi)存優(yōu)化

這個(gè)是個(gè)問題,在快要寫完的時(shí)候,我發(fā)現(xiàn)程序開跑之后程序吃緊的厲害.這么一個(gè)只作為控件顯示的部分,跑起來就到了38M多. 之前一段時(shí)間就看到業(yè)界前輩們有關(guān)于圖片優(yōu)化處理,集中發(fā)布過各種,借此機(jī)會(huì),正好優(yōu)化下.

其他注意

怎么知道三個(gè)部分動(dòng)畫最終執(zhí)行完畢的呢? 其實(shí)我沒有可以的增加總體結(jié)束的標(biāo)識(shí).因?yàn)槲仪斑呎f過，我是從小到大做的，在做單個(gè)UIImageView和UILabel展示的時(shí)候，就考慮到了如果單個(gè)控件連續(xù)點(diǎn)擊的執(zhí)行問題. 肯定要保證當(dāng)前執(zhí)行的動(dòng)畫完成之后再執(zhí)行下一個(gè)動(dòng)畫. 增加狀態(tài)標(biāo)識(shí)，如果動(dòng)畫正在執(zhí)行，那么按鈕的點(diǎn)擊事件是不響應(yīng)的.

Demo

因?yàn)橥暾a有點(diǎn)多,所以Demo中分為了三部分,除了完整代碼,還有是把基礎(chǔ)組件單個(gè)使用的的JiKeScrollImageViewVC和JiKeScrollLabelVC.

JiKeScrollLabelVC

JiKeScrollImageViewVC

代碼地址:JiKeScrollView

交流

希望能和大家交流技術(shù)

GitHub:https://github.com/lilongcnc
Blog:http://www.lilongcnc.cc