UICollectionView(二)實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的UICollectionView

UICollectionView的學(xué)習(xí)可以對(duì)比著UITableView來瓤帚,因?yàn)檫@兩個(gè)類很相似描姚,實(shí)現(xiàn)途徑也很相似。它們都是datasource和delegate設(shè)計(jì)模式的:datasource為view提供數(shù)據(jù)源戈次,告訴view要顯示些什么東西以及如何顯示它們轩勘,delegate提供一些樣式的小細(xì)節(jié)以及用戶交互的相應(yīng)。

  1. UICollectionViewDataSource
    numberOfSectionsInCollectionView //section的數(shù)量
    numberOfItemsInSection //每個(gè)section對(duì)應(yīng)的items的數(shù)量
    cellForItemAtIndexPath //對(duì)應(yīng)每個(gè)位置的item應(yīng)該如何顯示
    viewForSupplementaryElementOfKind //對(duì)應(yīng)每組section的Supplementary View應(yīng)該如何顯示
    對(duì)于Decoration Views怯邪,提供方法并不在UICollectionViewDataSource中绊寻,而是直接UICollectionViewLayout類中的(因?yàn)樗鼉H僅是視圖相關(guān),而與數(shù)據(jù)無關(guān))悬秉。

  2. UICollectionViewDelegate
    數(shù)據(jù)無關(guān)的view的外形啊澄步,用戶交互啊什么的,由UICollectionViewDelegate來負(fù)責(zé):

  • cell的高亮
  • cell的選中狀態(tài)
  • 可以支持長(zhǎng)按后的菜單
    關(guān)于用戶交互和泌,UICollectionView也做了改進(jìn)村缸。每個(gè)cell現(xiàn)在有獨(dú)立的高亮事件和選中事件的delegate,用戶點(diǎn)擊cell的時(shí)候武氓,現(xiàn)在會(huì)按照以下流程向delegate進(jìn)行詢問:
    -collectionView:shouldHighlightItemAtIndexPath: 是否應(yīng)該高亮梯皿?
    -collectionView:didHighlightItemAtIndexPath: 如果1回答為是搪柑,那么高亮
    -collectionView:shouldSelectItemAtIndexPath: 無論1結(jié)果如何,都詢問是否可以被選中索烹?
    -collectionView:didUnhighlightItemAtIndexPath: 如果1回答為是工碾,那么現(xiàn)在取消高亮
    -collectionView:didSelectItemAtIndexPath: 如果3回答為是,那么選中cell
    狀態(tài)控制要比以前靈活一些百姓,對(duì)應(yīng)的高亮和選中狀態(tài)分別由highlightedselected兩個(gè)屬性表示渊额。
  1. 關(guān)于Cell
    相對(duì)于UITableViewCell來說,UICollectionViewCell沒有這么多花頭垒拢。首先UICollectionViewCell不存在各式各樣的默認(rèn)的style旬迹,這主要是由于展示對(duì)象的性質(zhì)決定的,因?yàn)閁ICollectionView所用來展示的對(duì)象相比UITableView來說要來得靈活求类,大部分情況下更偏向于圖像而非文字奔垦,因此需求將會(huì)千奇百怪。因此SDK提供給我們的默認(rèn)的UICollectionViewCell結(jié)構(gòu)上相對(duì)比較簡(jiǎn)單尸疆,由下至上:
  • 首先是cell本身作為容器view

  • 然后是一個(gè)大小自動(dòng)適應(yīng)整個(gè)cell的backgroundView椿猎,用作cell平時(shí)的背景

  • 再其上是selectedBackgroundView,是cell被選中時(shí)的背景

  • 最后是一個(gè)contentView寿弱,自定義內(nèi)容應(yīng)被加在這個(gè)view上

    這次Apple給我們帶來的好康是被選中cell的自動(dòng)變化犯眠,所有的cell中的子view,也包括contentView中的子view症革,在當(dāng)cell被選中時(shí),會(huì)自動(dòng)去查找view是否有被選中狀態(tài)下的改變噪矛。比如在contentView里加了一個(gè)normal和selected指定了不同圖片的imageView,那么選中這個(gè)cell的同時(shí)這張圖片也會(huì)從normal變成selected残炮,而不需要額外的任何代碼雷袋。

  1. 關(guān)于重用
    為了得到高效的View辞居,對(duì)于cell的重用是必須的,避免了不斷生成和銷毀對(duì)象的操作鸠删,這與在UITableView中的情況是一致的贼陶。但值得注意的時(shí)巧娱,在UICollectionView中禁添,不僅cell可以重用桨踪,Supplementary View和Decoration View也是可以并且應(yīng)當(dāng)被重用的。在iOS5中铺峭,Apple對(duì)UITableView的重用做了簡(jiǎn)化汽纠,以往要寫類似這樣的代碼:

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"MY_CELL_ID"]; 
    if (!cell) { //如果沒有可重用的cell,那么生成一個(gè)  
        cell = [[UITableViewCell alloc] init]; 
    } //配置cell莉炉,blablabla 
    return cell
    

而如果我們?cè)赥ableView向數(shù)據(jù)源請(qǐng)求數(shù)據(jù)之前使用-registerNib:forCellReuseIdentifier:方法為@“MY_CELL_ID"注冊(cè)過nib的話碴犬,就可以省下每次判斷并初始化cell的代碼,要是在重用隊(duì)列里沒有可用的cell的話羞福,runtime將自動(dòng)幫我們生成并初始化一個(gè)可用的cell蚯涮。
這個(gè)特性很受歡迎,因此在UICollectionView中Apple繼承使用了這個(gè)特性张峰,并且把其進(jìn)行了一些擴(kuò)展棒旗。使用以下方法進(jìn)行注冊(cè):

  • -registerClass:forCellWithReuseIdentifier:
  • -registerClass:forSupplementaryViewOfKind:withReuseIdentifier:
  • -registerNib:forCellWithReuseIdentifier:
  • -registerNib:forSupplementaryViewOfKind:withReuseIdentifier:

相比UITableView有兩個(gè)主要變化:一是加入了對(duì)某個(gè)Class的注冊(cè),這樣即使不用提供nib而是用代碼生成的view也可以被接受為cell了饶深;二是不僅只是cell敌厘,Supplementary View也可以用注冊(cè)的方法綁定初始化了朽合。在對(duì)collection view的重用ID注冊(cè)后饱狂,就可以像UITableView那樣簡(jiǎn)單的寫cell配置了:
- (UICollectionView)collectionView:(UICollectionView)cv cellForItemAtIndexPath:(NSIndexPath*)indexPath {
MyCell *cell = [cv dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”]; // Configure the cell's content
cell.imageView.image = ...
return cell;
}

需要吐槽的是休讳,對(duì)collection view尿孔,取重用隊(duì)列的方法的名字和UITableView里面不一樣了,在Identifier前面多加了Reuse五個(gè)字母婆咸,語(yǔ)義上要比以前清晰芜辕,命名規(guī)則也比以前嚴(yán)謹(jǐn)了..不知道Apple會(huì)不會(huì)為了追求完美而把UITableView中的命名不那么好的方法deprecate掉。

  1. UICollectionViewLayout
    終于到UICollectionView的精髓了侵续。這也是UICollectionView和UITableView最大的不同。UICollectionViewLayout可以說是UICollectionView的大腦和中樞需五,它負(fù)責(zé)了將各個(gè)Cell宏邮、Supplementary View和Decoration Views進(jìn)行組織缸血,為它們?cè)O(shè)定各自的屬性,包括但不限于:
  • 位置
  • 尺寸
  • 透明度
  • 層級(jí)關(guān)系
  • 形狀
  • 等等等等…

Layout決定了UICollectionView是如何顯示在界面上的飒炎。在展示之前笆豁,一般需要生成合適的UICollectionViewLayout子類對(duì)象,并將其賦予CollectionView的collectionViewLayout屬性煞赢。
Apple為我們提供了一個(gè)最簡(jiǎn)單可能也是最常用的默認(rèn)layout對(duì)象: UICollectionViewFlowLayout扩氢。Flow Layout簡(jiǎn)單說是一個(gè)直線對(duì)齊的layout。

**itemSize**
首先一個(gè)重要的屬性是itemSize朦肘,它定義了每一個(gè)item的大小双饥。通過設(shè)定itemSize可以全局地改變所有cell的尺寸,如果想要對(duì)某個(gè)cell制定尺寸趴生,可以使用-collectionView:layout:sizeForItemAtIndexPath:方法昏翰。
    @property (nonatomic) CGSize itemSize;
    -collectionView:layout:sizeForItemAtIndexPath:

**間隔**
可以指定item之間的間隔和每一行之間的間隔,和size類似浸踩,有全局屬性统求,也可以對(duì)每一個(gè)item和每一個(gè)section做出設(shè)定:
    @property (CGSize) minimumInteritemSpacing
    @property (CGSize) minimumLineSpacing
    -collectionView:layout:minimumInteritemSpacingForSectionAtIndex:
    -collectionView:layout:minimumLineSpacingForSectionAtIndex:

**滾動(dòng)方向**
由屬性scrollDirection確定scroll view的方向,將影響Flow Layout的基本方向和由header及footer確定的section之間的寬度
    @property (nonatomic) UICollectionViewScrollDirection scrollDirection; 

**Header和Footer尺寸**
同樣地分為全局和部分折剃。需要注意根據(jù)滾動(dòng)方向不同像屋,header和footer的高和寬中只有一個(gè)會(huì)起作用。垂直滾動(dòng)時(shí)section間寬度為該尺寸的高因苹,而水平滾動(dòng)時(shí)為寬度起作用篇恒。
   @property (CGSize) headerReferenceSize
   @property (CGSize) footerReferenceSize
   -collectionView:layout:referenceSizeForHeaderInSection:
   -collectionView:layout:referenceSizeForFooterInSection: 

**縮進(jìn)**
    @property UIEdgeInsets sectionInset; 
    -collectionView:layout:insetForSectionAtIndex:
  1. 總結(jié)
    一個(gè)UICollectionView的實(shí)現(xiàn)包括兩個(gè)必要部分:UICollectionViewDataSource和UICollectionViewLayout,和一個(gè)交互部分:UICollectionViewDelegate款筑。而Apple給出的UICollectionViewFlowLayout已經(jīng)是一個(gè)很強(qiáng)力的layout方案了奈梳。

  2. 參考資料:
    WWDC 2012 Session筆記——205 Introducing Collection Views

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末攘须,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子于宙,更是在濱河造成了極大的恐慌,老刑警劉巖捞魁,帶你破解...
    沈念sama閱讀 216,651評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谱俭,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡县貌,警方通過查閱死者的電腦和手機(jī)凑懂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門征候,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人兆解,你說我怎么就攤上這事跑揉∠志埽” “怎么了望侈?”我有些...
    開封第一講書人閱讀 162,931評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)侥猬。 經(jīng)常有香客問我捐韩,道長(zhǎng),這世上最難降的妖魔是什么荤胁? 我笑而不...
    開封第一講書人閱讀 58,218評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮垢油,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘召娜。我一直安慰自己惊楼,他們只是感情好秸讹,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,234評(píng)論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著弧可,像睡著了一般劣欢。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上校套,一...
    開封第一講書人閱讀 51,198評(píng)論 1 299
  • 那天牧抵,我揣著相機(jī)與錄音,去河邊找鬼妹孙。 笑死获枝,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的嚣崭。 我是一名探鬼主播萨西,決...
    沈念sama閱讀 40,084評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼葱跋!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起稍味,我...
    開封第一講書人閱讀 38,926評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤荠卷,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后掂碱,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體慎冤,經(jīng)...
    沈念sama閱讀 45,341評(píng)論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,563評(píng)論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了披诗。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,731評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡剥槐,死狀恐怖掂咒,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情绍刮,我是刑警寧澤,帶...
    沈念sama閱讀 35,430評(píng)論 5 343
  • 正文 年R本政府宣布岁歉,位于F島的核電站膝蜈,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏非剃。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,036評(píng)論 3 326
  • 文/蒙蒙 一备绽、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧肺素,春花似錦、人聲如沸猴伶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)雇盖。三九已至栖忠,卻和暖如春贸街,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背薛匪。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工逸尖, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人娇跟。 一個(gè)月前我還...
    沈念sama閱讀 47,743評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像盹沈,于是被迫代替她去往敵國(guó)和親乞封。 傳聞我的和親對(duì)象是個(gè)殘疾皇子岗憋,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,629評(píng)論 2 354

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