UICollectionView介紹使用

UICollectionView是一種類似于UITableView但又比UITableView功能更強大骇扇、更靈活的視圖,這是源于它將UICollectionView對cell的布局交給了UICollectionViewLayout,而且允許用戶自定義layout來進行布局。

下面是UICollectionView合并內容和布局并生成最終界面的一個流程:

當UICollectionView顯示內容時,先從Data source(數據源)獲取cell飞几,然后交給UICollectionView。再從UICollectionViewLayout獲取對應的layout attributes(布局屬性)独撇。最后屑墨,根據每個cell對應的layout attributes(布局屬性)來對cell進行布局,生成了最終的界面纷铣。而用戶交互的時候卵史,都是通過Delegate來進行交互。當然搜立,上面只是布局cell墙杯,但是UICollectionView內部還有Supplementary View和Decoration View刺桃,也可以對其進行布局刽严。

上面皇筛,我們了解了UICollectionView的工作流程色鸳,我們將UICollectionView分成視圖社痛、數據源和代理方法、UICollectionViewLayout三塊來介紹命雀。

一蒜哀、視圖

UICollectionView上面顯示內容的視圖有三種Cell視圖、Supplementary View和Decoration View吏砂。

Cell視圖

CollectionView中主要的內容都是由它展示的撵儿,它是從數據源對象獲取的。

Supplementary View

它展示了每一組當中的信息狐血,與cell類似淀歇,它是從數據源方法當中獲取的,但是與cell不同的是匈织,它并不是強制需要的浪默。例如flow layout當中的headers和footers就是可選的Supplementary View。

Decoration View

這個視圖是一個裝飾視圖缀匕,它沒有什么功能性纳决,它不跟數據源有任何關系,它完全屬于layout對象乡小。

二阔加、數據源和代理方法

1、注冊cell或者Supplementary View使其重用

在使用數據源返回cell或者Supplementary View給collectionView之前满钟,我們必須先要注冊胜榔,用來進行重用胳喷。

registerClass: forCellWithReuseIdentifier:

registerNib: forCellWithReuseIdentifier:

registerClass: forSupplementaryViewOfKind: withReuseIdentifier:

registerNib: forSupplementaryViewOfKind: withReuseIdentifier:

顯而易見,前面兩個方法是注冊cell苗分,后兩個方法注冊Supplementary View厌蔽。其中,注冊的方式有兩種摔癣,第一種是直接注冊class奴饮,它重用的時候會調用[[UICollectionView alloc] init]這樣的初始化方法創(chuàng)建cell;另外一種是注冊nib择浊,它會自動加載nib文件戴卜。

注冊的之后,我們如何重用琢岩?

在數據源方法當中返回 cell 或者 Supplementary view 的方法當中通過 dequeueReusableCellWithReuseIdentifier:forIndexPath: 或者 dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath: 方法獲取cell或者Supplementary View投剥。

示例代碼:

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

CollectionViewCell *cell = (CollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:CellReuseIdentify forIndexPath:indexPath];

cell.backgroundColor = [UIColor lightGrayColor];

cell.textLabel.text = [NSString stringWithFormat:@"(%zd,%zd)", indexPath.section, indexPath.row];

return cell;

}

2、數據源方法

數據源方法與UITableView類似担孔,主要有:

numberOfSectionsInCollectionView:

collectionView: numberOfItemsInSection:

collectionView: cellForItemAtIndexPath:

collectionView: viewForSupplementaryElementOfKind: atIndexPath:

與UITableView不同的是多加了返回Supplementary view數據源方法江锨。

3、代理方法

數據源為UICollectionView提供數據相關的內容糕篇,而代理則主要負責用戶交互啄育、與數據無關的視圖外形。主要分成兩部分:

1拌消、通過調用代理方法挑豌,管理視圖的選中、高亮

collectionView:shouldDeselectItemAtIndexPath:

collectionView:didSelectItemAtIndexPath:

collectionView:didDeselectItemAtIndexPath:

collectionView:shouldHighlightItemAtIndexPath:

collectionView:didHighlightItemAtIndexPath:

collectionView:didUnhighlightItemAtIndexPath:

2墩崩、長按cell氓英,顯示編輯菜單 當用戶長按cell時,collection view視圖會顯示一個編輯菜單鹦筹。這個編輯菜單可以用來剪切铝阐、復制和粘貼cell。不過铐拐,要顯示這個編輯菜單需要滿足很多條件:

代理對象必須實現下面三個方法:

collectionView:shouldShowMenuForItemAtIndexPath: collectionView:canPerformAction:forItemAtIndexPath:withSender: collectionView:performAction:forItemAtIndexPath:withSender:

對于指定要編輯的cell饰迹, collectionView:shouldShowMenuForItemAtIndexPath: 方法需要返回 YES

collectionView:canPerformAction:forItemAtIndexPath:withSender: 方法中,對于剪切余舶、復制啊鸭、粘貼三種action至少有一個返回YES。其實匿值,編輯菜單是有很多種action的赠制,但是對于UICollectionView來說,它僅僅支持的剪切、復制钟些、粘貼三個烟号,所以說這個代理方法至少支持這三種的一種。

剪切政恍、復制汪拥、粘貼的方法名是:

cut: copy: paste:

當上面的條件都滿足了,用戶就可以長按cell顯示出編輯菜單篙耗,然后選擇對應的action迫筑,從而就會回調delegate的collectionView:performAction:forItemAtIndexPath:withSender: 方法去做對應的事情。

當我們想控制編輯菜單僅僅顯示復制和粘貼時宗弯,我們就可以在 collectionView:canPerformAction:forItemAtIndexPath:withSender: 方法中進行操作脯燃,具體請見下面代碼:

- (BOOL)collectionView:(UICollectionView *)collectionView canPerformAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(id)sender{

if ([NSStringFromSelector(action) isEqualToString:@"copy:"]

|| [NSStringFromSelector(action) isEqualToString:@"paste:"])

return YES;

return NO;

}

三、UICollectionViewLayout

UICollectionViewLayout 是UICollectionView比UITableView更強大原因蒙保,它是UICollectionView的精髓辕棚,它通過 UICollectionViewLayoutAttributes 類來管理 cell 、 Supplementary View 和 Decoration View 的 位置 邓厕、 transform 逝嚎、 alpha 、 hidden 等等详恼。

UICollectionViewLayout這個類只是一個基類懈糯,我們給UICollectionView使用的都是它的 子類 。系統為我們提供了一個最常用的layout為 UICollectionViewFlowLayout 单雾,我們可以使用它制作 grid view 。當UICollectionViewLayout滿足不了我們的需求時她紫,我們可以 子類化UICollectionViewLayout 或者 自定義layout 硅堆,這個內容放到我下一篇當中。

下面贿讹,我們來看看怎么使用UICollectionViewFlowLayout渐逃。 使用UICollectionViewFlowLayout之前,我們來了解它內部常用的屬性:

//同一組當中民褂,行與行之間的最小行間距茄菊,但是不同組之間的不同行cell不受這個值影響。

@property (nonatomic) CGFloat minimumLineSpacing;

//同一行的cell中互相之間的最小間隔赊堪,設置這個值之后面殖,那么cell與cell之間至少為這個值

@property (nonatomic) CGFloat minimumInteritemSpacing;

//每個cell統一尺寸

@property (nonatomic) CGSize itemSize;

//滑動反向,默認滑動方向是垂直方向滑動

@property (nonatomic) UICollectionViewScrollDirection scrollDirection;

//每一組頭視圖的尺寸哭廉。如果是垂直方向滑動脊僚,則只有高起作用;如果是水平方向滑動遵绰,則只有寬起作用辽幌。

@property (nonatomic) CGSize headerReferenceSize;

//每一組尾部視圖的尺寸增淹。如果是垂直方向滑動,則只有高起作用乌企;如果是水平方向滑動虑润,則只有寬起作用。

@property (nonatomic) CGSize footerReferenceSize;

//每一組的內容縮進

@property (nonatomic) UIEdgeInsets sectionInset;

上面是UICollectionViewFlowLayout內部的屬性加酵,這些屬性都是統一設置拳喻,若是統一設置無法滿足需求,可以實現 UICollectionViewDelegateFlowLayout 方法虽画,進行對應的設置舞蔽。

了解了UICollectionViewFlowLayout主要屬性,我們再來看看使用步驟:

1码撰、生成一個UICollectionViewFlowLayout對象給collection view

2渗柿、通過itemSize來配置cell的寬和高

3、如果有需要通過設置minimumInteritemSpacing來設置每個cell之間的間距脖岛,通過minimumLineSpacing來設置同一組當中不同行之間cell的行距朵栖。

4、如果想要組頭視圖或者組尾視圖柴梆,指定它們的大小

5陨溅、設置layout的滑動方向

6、如果統一設置無法滿足需求绍在,實現UICollectionViewDelegateFlowLayout方法來進行設置门扇。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市偿渡,隨后出現的幾起案子臼寄,更是在濱河造成了極大的恐慌,老刑警劉巖溜宽,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件吉拳,死亡現場離奇詭異,居然都是意外死亡适揉,警方通過查閱死者的電腦和手機留攒,發(fā)現死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來嫉嘀,“玉大人炼邀,你說我怎么就攤上這事〖粑辏” “怎么了汤善?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我红淡,道長不狮,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任在旱,我火速辦了婚禮摇零,結果婚禮上,老公的妹妹穿的比我還像新娘桶蝎。我一直安慰自己驻仅,他們只是感情好,可當我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布登渣。 她就那樣靜靜地躺著噪服,像睡著了一般。 火紅的嫁衣襯著肌膚如雪胜茧。 梳的紋絲不亂的頭發(fā)上粘优,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天,我揣著相機與錄音呻顽,去河邊找鬼雹顺。 笑死,一個胖子當著我的面吹牛廊遍,可吹牛的內容都是我干的嬉愧。 我是一名探鬼主播,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼喉前,長吁一口氣:“原來是場噩夢啊……” “哼没酣!你這毒婦竟也來了?” 一聲冷哼從身側響起卵迂,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤裕便,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后狭握,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡疯溺,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年论颅,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片囱嫩。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡恃疯,死狀恐怖,靈堂內的尸體忽然破棺而出墨闲,到底是詐尸還是另有隱情今妄,我是刑警寧澤,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站盾鳞,受9級特大地震影響犬性,放射性物質發(fā)生泄漏。R本人自食惡果不足惜腾仅,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一乒裆、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧推励,春花似錦鹤耍、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至跌造,卻和暖如春杆怕,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背鼻听。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工财著, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人撑碴。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像醉拓,于是被迫代替她去往敵國和親伟姐。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內容

  • 什么是UICollectionView亿卤? UICollectionView是一種新的數據展示方式愤兵,簡單來說可以把他...
    凌峰Mical閱讀 43,321評論 11 201
  • 最近將 UICollectionView 進行了一個全面的學習及總結,參考了網上大量的文章排吴,把官方文檔進行了大概翻...
    varlarzh閱讀 21,442評論 3 94
  • 翻譯自“Collection View Programming Guide for iOS” 0 關于iOS集合視...
    lakerszhy閱讀 3,867評論 1 22
  • //聯系人:石虎 QQ: 1224614774昵稱:嗡嘛呢叭咪哄 什么是UICollectionView UICo...
    石虎132閱讀 3,411評論 0 15
  • 涼風微微吹過秆乳,金黃的楓葉灑滿了一地,神女園內一片好風景钻哩。 “師父!”只見一個身著淡黃色短裙的女孩跑進神女園屹堰,很是...
    楚瑤玲閱讀 82評論 0 0