iOS-Main-細講圖片輪播

前言:在做應用程序的時候顶捷,我們考慮一下挂绰,有個細節(jié)。網絡服赎,其實不難葵蒂,做APP其實我們就是考慮的兩個方面一是數(shù)據(jù),二是UI重虑。通常AFN異步刹勃,拿過來字典轉模型,做完字典轉模型又做UI的事情嚎尤,其實AFN就是發(fā)送一個請求,回來就算完了伍宦。要么一個get,要么一個POST芽死。數(shù)據(jù)呢乏梁,分為一個本地,一個網絡关贵,最終呢遇骑,都是要轉成模型。如圖所示:
基本思路

要做什莫
第一部分:準備數(shù)據(jù)
  • 1.創(chuàng)建一個名為 "UI-圖片輪播器" 的工程揖曾,配置好環(huán)境落萎。拖入素材。
    創(chuàng)建工程炭剪,拖入素材

    [了解]:
    屬性和成員變量的區(qū)別?
    - 屬性: 提供了getter & setter / 成員變量
    - 成員變量
    - 真正保存數(shù)據(jù)的是"成員變量"
  • 2 創(chuàng)建一個數(shù)組存儲圖片url的成員變量练链,并加載數(shù)據(jù).代碼及打印結果如下:


    示例代碼

    打印結果

    若fileName = nil
第二部分:搭建界面

基本思路:封裝一個輪播器的視圖,傳入urls即可奴拦,用collectView來做媒鼓。如圖所示:

思維導圖

為了便于封裝
LoopView

創(chuàng)建類
創(chuàng)建類

導入頭文件

創(chuàng)建界面

這時候,運行會報錯
需要一個非空的layout
沒有初始化layout

為了方便外部的調用错妖,通常我們會绿鸣,把layout寫在collectView內部,如下圖:
內部封裝

第二部分:傳遞數(shù)據(jù)
思維導圖

改造init,如下圖所示:


改造init

測試數(shù)據(jù)是否傳輸成功


打斷點

為外界提供接口

如果暂氯,這回運行潮模,仍然會報錯
如下圖詳解:
圖解

再次運行:


獲取數(shù)據(jù)成功
第三部分:設置數(shù)據(jù)源
思維導圖

遵守數(shù)據(jù)源,設置協(xié)議


遵守數(shù)據(jù)源痴施,設置協(xié)議

實現(xiàn)協(xié)議->標識符->注冊


實現(xiàn)協(xié)議

標識符

注冊

為了看到顯示擎厢,我們可以給它設置一個隨機顏色
隨機顏色
第四部分:自定義Cell布局

思維導圖

創(chuàng)建一個布局的子類
創(chuàng)建布局的子類

查看父類

1

準備layout

導入頭文件改寫系統(tǒng)layout

打印出來的collectionView大小,我們寫的是一樣的晾剖,如下圖所示:
打印collectionView大小

這時候我們就會發(fā)現(xiàn):
這時候我們就會發(fā)現(xiàn)

collectionView的設置
1

2

3

發(fā)現(xiàn)
在以前用collectionView的時候锉矢,設置格子的大小,我們需要管理生命周期齿尽,但是用這個方法沽损,我們可以將屬性一次性設置好。這個方法非常犀利循头。
用了自定義布局绵估,就不用考慮,一切有關視圖生命周期的東西卡骂。

第五部分:自定義布局-->顯示圖像
思維導圖

創(chuàng)建cell


創(chuàng)建cell

初始化-打斷點測試


初始化

替換系統(tǒng)的cell,只替換了注冊中的系統(tǒng)cell
替換系統(tǒng)的cell

運行国裳,測試結果如圖:
測試結果

添加圖像視圖


添加圖像視圖-測試

更改上圖

給外界提供url接口

set方法設置

傳值
第五部分:實現(xiàn)輪播,可以左右拖拽

思維導圖

做到這個時候全跨,我們發(fā)現(xiàn)我們的輪播圖只能往右拖缝左,而不能往左拖。而,這個時候我們就要考慮渺杉,如果需要輪播圖往左拖蛇数,我們該怎么辦呢?
請看下圖的思路:
我們在圖片定位于圖片位置是越,在耳舅,左邊在加上一組:
基本思路
基本思路

我們將,圖下的數(shù)據(jù)源*2 就相當與加上了一組倚评,但是一運行浦徊,就會會造成崩潰。
加上一組 *2

會發(fā)現(xiàn)數(shù)組越界了
數(shù)組越界

越界在哪呢天梧?怎么解決呢盔性?
要想解決我們需要,我們已經把圖片分成兩組腿倚,但是因為我們有三張圖片纯出,6個位置。我們可以取模%敷燎,來解決數(shù)組越界問題暂筝,如下圖:
取模

那么怎么讓圖片往左移動呢,應該讓圖片硬贯,初始化第二組焕襟。我們找到構造函數(shù),讓它滾動過去就可以了饭豹,如下圖:

我們在運行鸵赖,發(fā)現(xiàn)還是往左滑不動,為什莫呢拄衰?
說明這里的滾動沒有生效它褪。

這里引出一個面試題,在開發(fā)中翘悉,什莫時候使用過多線程茫打,不要給我說AFN!

先執(zhí)行數(shù)據(jù)源方法妖混,在執(zhí)行滾動方法:
主隊列異步走到第二組:
如下圖:


1

2

這回我們就可以往左拖了...



提示
第六部分:無限輪播的實現(xiàn)
思維導圖

如果老赤,將圖片,拖拽到下圖那種情況制市,還要繼續(xù)往右拖拽怎么辦抬旺?



滾動到最后一張圖片時,將圖片定位于下圖位置:


定位-右

同樣是祥楣,當滾動到第一張時开财,還要往左滾汉柒,我們將圖片定位于下圖樣式:
定位-左

那么,我們就要監(jiān)聽它滾動的位置:

遵守協(xié)議责鳍,設置代理


遵守協(xié)議竭翠,設置代理

實現(xiàn)方法無限輪播
無限輪播

這時候,還有一個bug薇搁,當我們快速滾動時,會造成下的卡頓
原因是,當它跳到最后一張時渡八,他需要做一個contentoffset的一個切換啃洋。一當切換了,用戶的手勢就會不連貫
解決如下:
3

300

這樣怎么也不會卡了屎鳍。宏娄。。
整體思路

終于趕完了,完畢!!!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末逮壁,一起剝皮案震驚了整個濱河市孵坚,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌窥淆,老刑警劉巖李请,帶你破解...
    沈念sama閱讀 223,126評論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件钞诡,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機岛琼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評論 3 400
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來症杏,“玉大人豫尽,你說我怎么就攤上這事『鹕埃” “怎么了逆航?”我有些...
    開封第一講書人閱讀 169,941評論 0 366
  • 文/不壞的土叔 我叫張陵,是天一觀的道長渔肩。 經常有香客問我因俐,道長,這世上最難降的妖魔是什么赖瞒? 我笑而不...
    開封第一講書人閱讀 60,294評論 1 300
  • 正文 為了忘掉前任女揭,我火速辦了婚禮,結果婚禮上栏饮,老公的妹妹穿的比我還像新娘吧兔。我一直安慰自己,他們只是感情好袍嬉,可當我...
    茶點故事閱讀 69,295評論 6 398
  • 文/花漫 我一把揭開白布境蔼。 她就那樣靜靜地躺著灶平,像睡著了一般。 火紅的嫁衣襯著肌膚如雪箍土。 梳的紋絲不亂的頭發(fā)上逢享,一...
    開封第一講書人閱讀 52,874評論 1 314
  • 那天,我揣著相機與錄音吴藻,去河邊找鬼瞒爬。 笑死,一個胖子當著我的面吹牛沟堡,可吹牛的內容都是我干的侧但。 我是一名探鬼主播,決...
    沈念sama閱讀 41,285評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼航罗,長吁一口氣:“原來是場噩夢啊……” “哼禀横!你這毒婦竟也來了?” 一聲冷哼從身側響起粥血,我...
    開封第一講書人閱讀 40,249評論 0 277
  • 序言:老撾萬榮一對情侶失蹤柏锄,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后复亏,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體趾娃,經...
    沈念sama閱讀 46,760評論 1 321
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,840評論 3 343
  • 正文 我和宋清朗相戀三年蜓耻,在試婚紗的時候發(fā)現(xiàn)自己被綠了茫舶。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,973評論 1 354
  • 序言:一個原本活蹦亂跳的男人離奇死亡刹淌,死狀恐怖饶氏,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情有勾,我是刑警寧澤疹启,帶...
    沈念sama閱讀 36,631評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站蔼卡,受9級特大地震影響喊崖,放射性物質發(fā)生泄漏。R本人自食惡果不足惜雇逞,卻給世界環(huán)境...
    茶點故事閱讀 42,315評論 3 336
  • 文/蒙蒙 一荤懂、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧塘砸,春花似錦节仿、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽矾瘾。三九已至,卻和暖如春箭启,著一層夾襖步出監(jiān)牢的瞬間壕翩,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評論 1 275
  • 我被黑心中介騙來泰國打工傅寡, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留放妈,地道東北人。 一個月前我還...
    沈念sama閱讀 49,431評論 3 379
  • 正文 我出身青樓荐操,卻偏偏與公主長得像大猛,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子淀零,可洞房花燭夜當晚...
    茶點故事閱讀 45,982評論 2 361

推薦閱讀更多精彩內容

  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件膛壹、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,128評論 4 61
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,348評論 25 707
  • “人生苦難重重驾中。”——開篇第一句便直指主題模聋,這是一條困難重重的路肩民,向來少有人走,但若是“正確理解并接受链方,那么就再也...
    T0_欣閱讀 196評論 0 0
  • 《如何打造你的獨特觀點》 我們是隨波逐流還是另辟蹊徑持痰,我們要對自己對未來有清晰的規(guī)劃,創(chuàng)業(yè)不是一個草率的決定祟蚀,是我...
    約梵閱讀 195評論 0 0
  • 中秋節(jié)在東北參加完婚禮后前酿,我與舊友打車去機場患雏。 車上,問起了當?shù)胤績r罢维,司機說淹仑,市中心頂多四五千一平米,偏一點的三四...
    簡淺Jian閱讀 1,150評論 2 8