iOS- 橫向滾動跑馬燈效果實現(xiàn)

一. demo效果如下:

二. 如何使用:

????????下載https://github.com/moonCai/MNMarqueeView.git, 將MNMarqueeView拖入項目中初始化即可。在獲取到文本標題后對MNMarqueeView對象的textList賦值享郊,然后調(diào)用run(). 在需要暫停的合適地方調(diào)用pause(),在需要視圖銷毀時調(diào)用stop()。

三. 實現(xiàn)思路大綱:

? ? 1.設(shè)置textLabelContainerView屬性院峡,作為文本控件(TextLabel)的容器視圖奔害;

? ? 2.創(chuàng)建以下對象:

? ? ? ? TextLabel對象:展示newsTitle;

????????onScreenTextLabels:?[TextLabel] ? ?記錄屏幕上的TextLabel對象;

? ??????offScreenTextLabels:[TextLabel] ? ?記錄離開textLabelContainerView的TextLabel對象(用于緩存離開屏幕的textLabel, 在下一個textLabel即將創(chuàng)建時使用绪囱。避免屏幕的內(nèi)存開辟)镶奉。

? ? 3. 設(shè)置displayLink屬性础淤,通過displayLink的定時源監(jiān)聽MNMarqueeView對象來實現(xiàn)橫向滾動:

敲黑板崭放,重點來了:

? ? ? ?通過速度 *?displayLink的持續(xù)時長來獲取偏移量。我在實現(xiàn)橫向滾動這里的思路不是直接改變每個textLabel的偏移量鸽凶。原因主要是:1.獲取每個textLabel的“年齡”(自創(chuàng)建到當(dāng)前時間的時長)較為繁瑣币砂。因此在這里借鑒系統(tǒng)組件UIScrollView的原理,改變?nèi)萜饕晥D的bounds從而改變其子視圖的位置。

? ? ? 因此,我在這里采取用定時源持續(xù)改變textLabelContainerView的bounds中x坐標的偏移量凶杖,textLabelContainerView的frame是沒有被改變的种远。因此它在屏幕上的位置固定不變,添加在其上面的子視圖持續(xù)偏移祝懂,這就是跑馬燈實現(xiàn)的原理之一票摇。

? ? ? ? ?第二個原理的著眼點在于如何給每個textLabel設(shè)置frame??

? ? ? ? ?每個textLabel被創(chuàng)建出來就馬上添加到onScreenTextLabels砚蓬,直至它的maxX小于父視圖的minX時就被移除矢门,然后被添加到offScreenTextLabels。

? ? ? ? ?第一個被創(chuàng)建的textLabel,它的frame的x坐標是textLabelContainerView的bounds的l.frame.origin.x =?textLabelContainerView.bounds.maxX灰蛙。之后被創(chuàng)建的textLabel的frame.origin.x 被賦值為onScreenTextLabels最后一個元素的frame的maxX + 文本之間的間隔祟剔。

? ? ? ? 此外,值得一說的是offScreenTextLabels摩梧。上文中有提及它起到的作用是復(fù)用物延。具體的原理是借鑒UITableView的復(fù)用機制。我在需要創(chuàng)建textLabel時仅父,調(diào)用offScreenTextLabels的popLast()叛薯。也就是,如果最后一個元素存在就取出使用笙纤,offScreenTextLabels在取出后自動移除耗溜,如果最后一個元素不存在就新創(chuàng)建。

? ? ? ? 最后要說的是一個細節(jié)處理:跑馬燈左右兩端的漸變模糊視圖省容。顯而易見抖拴,這么做的目的是為了柔和文本從移除父控件的視覺感受。漸變寬度和漸變色都留了接口腥椒,詳情見demo中代碼阿宅。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市寞酿,隨后出現(xiàn)的幾起案子家夺,更是在濱河造成了極大的恐慌,老刑警劉巖伐弹,帶你破解...
    沈念sama閱讀 206,723評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拉馋,死亡現(xiàn)場離奇詭異榨为,居然都是意外死亡,警方通過查閱死者的電腦和手機煌茴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,485評論 2 382
  • 文/潘曉璐 我一進店門随闺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蔓腐,你說我怎么就攤上這事矩乐。” “怎么了回论?”我有些...
    開封第一講書人閱讀 152,998評論 0 344
  • 文/不壞的土叔 我叫張陵散罕,是天一觀的道長。 經(jīng)常有香客問我傀蓉,道長欧漱,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,323評論 1 279
  • 正文 為了忘掉前任葬燎,我火速辦了婚禮误甚,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘谱净。我一直安慰自己窑邦,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,355評論 5 374
  • 文/花漫 我一把揭開白布壕探。 她就那樣靜靜地躺著冈钦,像睡著了一般。 火紅的嫁衣襯著肌膚如雪李请。 梳的紋絲不亂的頭發(fā)上派继,一...
    開封第一講書人閱讀 49,079評論 1 285
  • 那天,我揣著相機與錄音捻艳,去河邊找鬼驾窟。 笑死,一個胖子當(dāng)著我的面吹牛认轨,可吹牛的內(nèi)容都是我干的绅络。 我是一名探鬼主播,決...
    沈念sama閱讀 38,389評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼嘁字,長吁一口氣:“原來是場噩夢啊……” “哼恩急!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起纪蜒,我...
    開封第一講書人閱讀 37,019評論 0 259
  • 序言:老撾萬榮一對情侶失蹤衷恭,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后纯续,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體随珠,經(jīng)...
    沈念sama閱讀 43,519評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡灭袁,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,971評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了窗看。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片茸歧。...
    茶點故事閱讀 38,100評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖显沈,靈堂內(nèi)的尸體忽然破棺而出软瞎,到底是詐尸還是另有隱情,我是刑警寧澤拉讯,帶...
    沈念sama閱讀 33,738評論 4 324
  • 正文 年R本政府宣布涤浇,位于F島的核電站,受9級特大地震影響魔慷,放射性物質(zhì)發(fā)生泄漏芙代。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,293評論 3 307
  • 文/蒙蒙 一盖彭、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧页滚,春花似錦召边、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,289評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至幻林,卻和暖如春贞盯,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背沪饺。 一陣腳步聲響...
    開封第一講書人閱讀 31,517評論 1 262
  • 我被黑心中介騙來泰國打工躏敢, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人整葡。 一個月前我還...
    沈念sama閱讀 45,547評論 2 354
  • 正文 我出身青樓件余,卻偏偏與公主長得像,于是被迫代替她去往敵國和親遭居。 傳聞我的和親對象是個殘疾皇子啼器,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,834評論 2 345

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