前言:在做應用程序的時候顶捷，我們考慮一下挂绰，有個細節(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
這樣怎么也不會卡了屎鳍。宏娄。。
整體思路
終于趕完了,完畢!!!
