UIScrollView+UIPageControl實現(xiàn)廣告頁Banner滾動效果

接口說明

  • 實際封裝后的代碼并未用到SDWebImage氮块,僅僅傳入圖片即可了赌。如果要傳入網絡圖片割按,在接口外做,降低耦合性静浴。
/**
 初始化
 
 @param modelArray 傳入的數(shù)據(jù)模型堰氓,必須遵循 bannerInfo 協(xié)議,至少包含圖片和鏈接
 @param position 指出pageControl的位置
 @param time 每張圖展示的時間
 @param blk 當且僅當圖片有對應url時跳轉到對應網頁
 */
-(void)setParamsWithModel: (NSArray<id<bannerInfo>>*) modelArray
         pageCtrlPosition:(PAGE_CTRL_POS)position
          timeForEachPage:(NSTimeInterval)time
     tapBannerCompleteBlk:(BannerBtnCallback)blk;

Github地址

自動回滾github地址

效果

說明:圖片來源:抓的是奇點app的JSON包用來仿寫苹享。


效果圖

控件

前提:
整個滾動的效果是在一個自定義的UITableViewCell中實現(xiàn)的双絮。

  • Cell中拉入一個ScrollView填滿
  • 注意,將Bounces都去掉,避免滑動過程的彈性效果
  • 去掉水平和豎直方向上的滾動提示囤攀,所以 show H/V indicator也去掉
  • 記住要勾選 paging enabled
    scrollView設置
  • Cell中再拉入一個UIPageControl,注意這個pageControl不是scrollview的子類软免,且拉入的順序,否則會被蓋在scrollview底下不顯示:
    注意順序
  • 控件搭配的實現(xiàn)原理
    UIPageControl的使用目的焚挠,主要是指示當前滑動到的頁數(shù)或杠。整個滑動效果的實現(xiàn),主要是通過UIScrollViewdelegate宣蔚,在滑動結束的時候改變 self.pageconrol.currentpage的值來實現(xiàn)的。

具體實現(xiàn):

  • 通過AFNetworking+SDWebImage 申請到一組網絡圖片认境,存成一個NSArray胚委。這里的實現(xiàn)過程不贅述,可參看另一篇筆記叉信。
  • 我們要解決的問題就是當按頁滾動圖片時亩冬,滾動到最左/最右時,再往左/右滾動硼身,是要回到最初/最后一張的硅急。假設我們一共有n張圖片,pagecontrol中肯定要顯示n個點佳遂,但是實際我們scrollView的contentSize寬度只要3倍的寬度就好了营袜。
    • 我們假設每張圖片都作為一個按鍵的背景圖,那么其實有如下的設定:


      示意圖
    • 每一次scrollview滾動結束丑罪,會調用delegate中的函數(shù)
    -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
    
    滾動結束后要做的事包括:
    • 根據(jù)滑動的偏移量荚板,改變 pagecontrol的currentpage
    • 重載圖片
      將上面截圖中的三個UIView(其實是UIButton),removeFromSuperview,然后根據(jù)self.pagecontrol.currentpage作為下標吩屹,去傳進來的model數(shù)組中找到相應的三個連號跪另。如下圖


      說明
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市煤搜,隨后出現(xiàn)的幾起案子免绿,更是在濱河造成了極大的恐慌,老刑警劉巖擦盾,帶你破解...
    沈念sama閱讀 222,590評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件嘲驾,死亡現(xiàn)場離奇詭異,居然都是意外死亡厌衙,警方通過查閱死者的電腦和手機距淫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,157評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來婶希,“玉大人榕暇,你說我怎么就攤上這事。” “怎么了彤枢?”我有些...
    開封第一講書人閱讀 169,301評論 0 362
  • 文/不壞的土叔 我叫張陵狰晚,是天一觀的道長。 經常有香客問我缴啡,道長壁晒,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,078評論 1 300
  • 正文 為了忘掉前任业栅,我火速辦了婚禮秒咐,結果婚禮上,老公的妹妹穿的比我還像新娘碘裕。我一直安慰自己携取,他們只是感情好,可當我...
    茶點故事閱讀 69,082評論 6 398
  • 文/花漫 我一把揭開白布帮孔。 她就那樣靜靜地躺著雷滋,像睡著了一般。 火紅的嫁衣襯著肌膚如雪文兢。 梳的紋絲不亂的頭發(fā)上晤斩,一...
    開封第一講書人閱讀 52,682評論 1 312
  • 那天,我揣著相機與錄音姆坚,去河邊找鬼澳泵。 笑死,一個胖子當著我的面吹牛兼呵,可吹牛的內容都是我干的烹俗。 我是一名探鬼主播,決...
    沈念sama閱讀 41,155評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼萍程,長吁一口氣:“原來是場噩夢啊……” “哼幢妄!你這毒婦竟也來了?” 一聲冷哼從身側響起茫负,我...
    開封第一講書人閱讀 40,098評論 0 277
  • 序言:老撾萬榮一對情侶失蹤蕉鸳,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后忍法,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體潮尝,經...
    沈念sama閱讀 46,638評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,701評論 3 342
  • 正文 我和宋清朗相戀三年饿序,在試婚紗的時候發(fā)現(xiàn)自己被綠了勉失。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,852評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡原探,死狀恐怖乱凿,靈堂內的尸體忽然破棺而出顽素,到底是詐尸還是另有隱情,我是刑警寧澤徒蟆,帶...
    沈念sama閱讀 36,520評論 5 351
  • 正文 年R本政府宣布胁出,位于F島的核電站,受9級特大地震影響段审,放射性物質發(fā)生泄漏全蝶。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,181評論 3 335
  • 文/蒙蒙 一寺枉、第九天 我趴在偏房一處隱蔽的房頂上張望抑淫。 院中可真熱鬧,春花似錦姥闪、人聲如沸丈冬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,674評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至往弓,卻和暖如春疏唾,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背函似。 一陣腳步聲響...
    開封第一講書人閱讀 33,788評論 1 274
  • 我被黑心中介騙來泰國打工槐脏, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人撇寞。 一個月前我還...
    沈念sama閱讀 49,279評論 3 379
  • 正文 我出身青樓顿天,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蔑担。 傳聞我的和親對象是個殘疾皇子牌废,可洞房花燭夜當晚...
    茶點故事閱讀 45,851評論 2 361

推薦閱讀更多精彩內容