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