MyDaily 開發(fā)過程2 --UICollectionView

前言

上一篇文章MyDaily 開發(fā)過程1 -- UIScrollView中介紹了有關(guān)UIScrollView的使用方法穴豫。但是一個(gè)App里只有文字沒有圖片怎么能行呢?尤其是作為一個(gè)高(da)富(diao)帥(si)程序猿,有圖片沒有美女簡(jiǎn)直是不能原諒的錯(cuò)誤呀浑测。于是在這個(gè)看臉的世界芥颈,我在App里滿足了自己的愿望。啥也不說了先上圖角钩!

美女鎮(zhèn)樓

聽說美女鎮(zhèn)樓你們都會(huì)點(diǎn)贊(滿滿的都是套路)吝沫!
然而這和今天要說的UICollectionView有什么關(guān)系嗎?別著急彤断,一個(gè)美女怎么夠野舶?因此....

一大波美女正向你走來

美女當(dāng)然是越多越好,所以UICollectionView在這里就派上了用場(chǎng)宰衙。
讓我們看看動(dòng)圖的效果吧平道!

美女合集.gif

好了下面就讓我們認(rèn)識(shí)一下UICollectionView吧!

正文

一供炼,UICollectionView簡(jiǎn)介

The UICollectionView class manages an ordered collection of data items and presents them using customizable layouts. Collection views provide the same general function as table views except that a collection view is able to support more than just single-column layouts. Collection views support customizable layouts that can be used to implement multi-column grids, tiled layouts, circular layouts, and many more. You can even change the layout of a collection view dynamically if you want.

從這段Apple官方給出的定義我們可以知道以下幾點(diǎn)內(nèi)容

  • UICollectionView 是用來管理和顯示一系列有序數(shù)據(jù)的一屋。
  • UICollectionView和UITableView具有很多相同的功能,但是UICollectionView可以顯示多列布局袋哼。
  • UICollectionView支持自定義布局冀墨,因此你可以使用能它顯示多列網(wǎng)格,平鋪布局涛贯,環(huán)形布局....
  • 你可以動(dòng)態(tài)的改變UICollectionView的布局如果你閑著沒事做诽嘉。
    從上面幾點(diǎn)我看出來了一點(diǎn),UICollectionView很牛X!
    所以UICollectionView要怎么使用呢?
二,UICollectionView基本元素介紹
1.png

2.png

從這兩張圖中大家可以看到虫腋,在顯示的頁面當(dāng)中有三個(gè)元素是我們需要知道的骄酗。

  • Cells
  • Supplementary Views
  • Decoration Views

個(gè)人理解Cells是用來顯示你想要展示的數(shù)據(jù)的,也就是說無論是圖片悦冀,文字或者其他的數(shù)據(jù)趋翻,你都可以用Cells來展示。
Supplementary Views就如同它的名字一樣盒蟆,補(bǔ)充視圖踏烙。你可以使用它來展示你想要補(bǔ)充說明的信息,比如不同Section的名字历等。
Decoration Views讨惩,我認(rèn)為這就是一個(gè)背景裝飾視圖。

三募闲,如何創(chuàng)建UICollectionView
1, 我們要遵循一些UICollectionView的協(xié)議
  • UICollectionViewDelegate
  • UICollectionViewDataSource
    看著是不是很眼熟步脓,其實(shí)這兩個(gè)協(xié)議中的方法也和UITableVeiw中的方法差不多。
2, 開始創(chuàng)建UICollectionView對(duì)象
  • initWithFrame:collectionViewLayout:
    在這里我要解釋一下layOut對(duì)象浩螺,我們想要?jiǎng)?chuàng)建UICollectionView對(duì)象就必須要告訴collectionView以什么方式布局靴患,因此layOut對(duì)象就如同一個(gè)布局文件,告訴collectionView應(yīng)該如何放置Cells要出。
3鸳君,創(chuàng)建Cells和Supplementary View
  • registerClass:forCellWithReuseIdentifier:
    使用代碼創(chuàng)建Cell
  • registerNib:forCellWithReuseIdentifier:
    使用Nib創(chuàng)建Cell
  • registerClass:forSupplementaryViewOfKind:withReuseIdentifier:
    使用代碼創(chuàng)建Supplementary View
  • registerNib:forSupplementaryViewOfKind:withReuseIdentifier:
    使用Nib創(chuàng)建Supplementary Viw
  • dequeueReusableCellWithReuseIdentifier:forIndexPath:
    返回一個(gè)重復(fù)使用的Cell對(duì)象
  • dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:
    返回一個(gè)重復(fù)使用的Supplementary View對(duì)象
4,實(shí)現(xiàn)協(xié)議中的方法

協(xié)議中的方法比較多,根據(jù)自己的需要進(jìn)行實(shí)現(xiàn)患蹂,要說明的是UICollectionViewDataSource中的這幾個(gè)方法是必須要實(shí)現(xiàn)的

  • collectionView:numberOfItemsInSection:
    設(shè)置每個(gè)Section中的Cell數(shù)量
  • collectionView:cellForItemAtIndexPath:
    為每個(gè)Cell設(shè)置要顯示的數(shù)據(jù)

最后千萬不要忘記這幾行代碼
collectionView.dataSource = self;
collectionView.delegate = self;
設(shè)置好要實(shí)現(xiàn)協(xié)議的代理之后或颊,一定要記住在數(shù)據(jù)獲取完畢后使用
[collectionView reloadData] 來刷新Cell

結(jié)語

在這里我就不貼出自己的代碼了,因?yàn)槲蚁肴绻鞘褂眠^UITableVeiw的同學(xué)看到以上的解釋應(yīng)該很快就能夠使用UICollectionView传于。個(gè)人認(rèn)為要想很好的使用UICollectionVeiw關(guān)鍵還是要能夠創(chuàng)造自定義布局囱挑。如果大家對(duì)于我展示的布局比較感興趣可以猛戳這里。你可以下載MyDaily這個(gè)項(xiàng)目的所有代碼沼溜。我還會(huì)不斷更新這個(gè)項(xiàng)目平挑,加入一些新的功能。最后如果你覺得篇文章對(duì)你有一分錢的幫助的話請(qǐng)給我點(diǎn)個(gè)贊系草,謝謝大家通熄!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市找都,隨后出現(xiàn)的幾起案子唇辨,更是在濱河造成了極大的恐慌,老刑警劉巖能耻,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件赏枚,死亡現(xiàn)場(chǎng)離奇詭異亡驰,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)嗡贺,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門隐解,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人诫睬,你說我怎么就攤上這事∨劣浚” “怎么了摄凡?”我有些...
    開封第一講書人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)蚓曼。 經(jīng)常有香客問我亲澡,道長(zhǎng),這世上最難降的妖魔是什么纫版? 我笑而不...
    開封第一講書人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任床绪,我火速辦了婚禮,結(jié)果婚禮上其弊,老公的妹妹穿的比我還像新娘癞己。我一直安慰自己,他們只是感情好梭伐,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開白布痹雅。 她就那樣靜靜地躺著,像睡著了一般糊识。 火紅的嫁衣襯著肌膚如雪绩社。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,821評(píng)論 1 290
  • 那天赂苗,我揣著相機(jī)與錄音愉耙,去河邊找鬼。 笑死拌滋,一個(gè)胖子當(dāng)著我的面吹牛朴沿,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播鸠真,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼悯仙,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了吠卷?” 一聲冷哼從身側(cè)響起锡垄,我...
    開封第一講書人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎祭隔,沒想到半個(gè)月后货岭,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體路操,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年千贯,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了屯仗。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡搔谴,死狀恐怖魁袜,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情敦第,我是刑警寧澤峰弹,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站芜果,受9級(jí)特大地震影響鞠呈,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜右钾,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一蚁吝、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧舀射,春花似錦窘茁、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至浩淘,卻和暖如春捌朴,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背张抄。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工砂蔽, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人署惯。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓左驾,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親极谊。 傳聞我的和親對(duì)象是個(gè)殘疾皇子诡右,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

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