UICollectionView詳解之基礎(chǔ)使用介紹

UICollectionView簡介

UICollectionView在iOS6.0以后引進,與UITableView比較相似。但是UICollectionView將布局完全交給UICollectionViewLayout蓖扑,而且允許用戶自定義layout來進行布局唉铜。使其功能比UITableView更加強大、布局更加靈活律杠,迅速在各大APP廣泛使用潭流。

本篇將對UICollectionView的使用進行簡單介紹,主要包括UICollectionView的視圖組成柜去、數(shù)據(jù)源灰嫉、常用代理方法以及UICollectionViewFlowLayout的使用。下一遍將會詳細講解UICollectionViewLayout的自定義布局诡蜓。

UICollectionView的視圖組成:

UICollectionView由cell視圖熬甫、Supplementary View和Decoration View三部分組成。

cell視圖

這個大家應(yīng)該都很清楚蔓罚,UICollectionView主要內(nèi)容展示的視圖

Supplementary View

對于每組section的信息視圖椿肩,類似于UITableView的header或者footer

Decoration View

裝飾視圖,好像很少使用

cell視圖跟Supplementary View使用是需要先進行注冊以便實現(xiàn)復用:

注冊cell的方法豺谈,第一個是代碼創(chuàng)建郑象,第二個是xib創(chuàng)建
- (void)registerClass:(nullable Class)cellClass forCellWithReuseIdentifier:(NSString *)identifier;
- (void)registerNib:(nullable UINib *)nib forCellWithReuseIdentifier:(NSString *)identifier;

注冊Supplementary View的方法,第一個是代碼創(chuàng)建茬末,第二個是xib創(chuàng)建
- (void)registerClass:(nullable Class)viewClass forSupplementaryViewOfKind:(NSString *)elementKind withReuseIdentifier:(NSString *)identifier;
- (void)registerNib:(nullable UINib *)nib forSupplementaryViewOfKind:(NSString *)kind withReuseIdentifier:(NSString *)identifier;

在數(shù)據(jù)源回調(diào)中復用的方法:
- (__kindof UICollectionViewCell *)dequeueReusableCellWithReuseIdentifier:(NSString *)identifier forIndexPath:(NSIndexPath *)indexPath;
- (__kindof UICollectionReusableView *)dequeueReusableSupplementaryViewOfKind:(NSString *)elementKind withReuseIdentifier:(NSString *)identifier forIndexPath:(NSIndexPath *)indexPath;

***上面方法的的kind和elementKind參數(shù)用來區(qū)分是頭部視圖還是尾部視圖

UICollectionView的數(shù)據(jù)源代理方法:

//必須實現(xiàn)的數(shù)據(jù)源代理
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;


//可選數(shù)據(jù)源代理
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath;
處理移動相關(guān)(詳細使用看demo)
- (BOOL)collectionView:(UICollectionView *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(9_0);
- (void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath*)destinationIndexPath NS_AVAILABLE_IOS(9_0);

UICollectionView的常用代理方法:

//點擊cell高亮相關(guān)
- (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath;
- (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath;
- (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath;


//cell選中相關(guān)
- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath;
- (BOOL)collectionView:(UICollectionView *)collectionView shouldDeselectItemAtIndexPath:(NSIndexPath *)indexPath; // called when the user taps on an already-selected item in multi-select mode
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath;
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath;


//cell以及Supplementary View繪制相關(guān)
- (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(8_0);
- (void)collectionView:(UICollectionView *)collectionView willDisplaySupplementaryView:(UICollectionReusableView *)view forElementKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(8_0);
- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath;
- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingSupplementaryView:(UICollectionReusableView *)view forElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;
***這幾個方法可以添加簡易的動畫,例如添加如下幾句代碼厂榛,cell加載的時候?qū)蟹趴s等效果。
- (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(8_0)
{
    cell.contentView.alpha = 0;
    cell.transform = CGAffineTransformRotate(CGAffineTransformMakeScale(0, 0), 0);

    [UIView animateKeyframesWithDuration:.5 delay:0.0 options:0 animations:^{
        
        /**
         *  分步動畫   第一個參數(shù)是該動畫開始的百分比時間  第二個參數(shù)是該動畫持續(xù)的百分比時間
         */
        [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.8 animations:^{
            cell.contentView.alpha = .5;
            cell.transform = CGAffineTransformRotate(CGAffineTransformMakeScale(1.2, 1.2), 0);
        }];
        [UIView addKeyframeWithRelativeStartTime:0.8 relativeDuration:0.2 animations:^{
            cell.contentView.alpha = 1;
            cell.transform = CGAffineTransformRotate(CGAffineTransformMakeScale(1, 1), 0);

        }];

    } completion:^(BOOL finished) {
        
    }];
}

//長按顯示菜單相關(guān):(demo中有詳細使用)
- (BOOL)collectionView:(UICollectionView *)collectionView shouldShowMenuForItemAtIndexPath:(NSIndexPath *)indexPath;
- (BOOL)collectionView:(UICollectionView *)collectionView canPerformAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender;
- (void)collectionView:(UICollectionView *)collectionView performAction:(SEL)action forItemAtIndexPath:(NSIndexPath *)indexPath withSender:(nullable id)sender;

//轉(zhuǎn)場相關(guān)(下一篇會講解)
- (nonnull UICollectionViewTransitionLayout *)collectionView:(UICollectionView *)collectionView transitionLayoutForOldLayout:(UICollectionViewLayout *)fromLayout newLayout:(UICollectionViewLayout *)toLayout;

UICollectionViewFlowLayout && UICollectionViewLayout:

UICollectionView之所以比UITableView強大丽惭,主要在于其精髓UICollectionViewLayout的布局击奶。它通過 UICollectionViewLayoutAttributes 類來管理 cell 、 Supplementary View 和 Decoration View 的 位置 责掏、 transform 柜砾、 alpha 、 hidden 等等换衬。先看看系統(tǒng)為我們提供的UICollectionViewFlowLayout布局的使用吧痰驱。

UICollectionViewFlowLayout 的常用屬性

//決定了每行的間隔
@property (nonatomic) CGFloat minimumLineSpacing;
//決定了Item之間的間隔
@property (nonatomic) CGFloat minimumInteritemSpacing;
//cell的大小(如果實現(xiàn)的代理該設(shè)置無效)
@property (nonatomic) CGSize itemSize;
//cell大小的預計算
@property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0); // defaults to CGSizeZero - setting a non-zero size enables cells that self-size via -preferredLayoutAttributesFittingAttributes:
//布局的方向
@property (nonatomic) UICollectionViewScrollDirection scrollDirection; // default is UICollectionViewScrollDirectionVertical
//頭視圖跟尾視圖的大型帧(橫向的時候担映,headerReferenceSize.width有效,headerReferenceSize.height無效叫潦∮辏縱向時相反)
@property (nonatomic) CGSize headerReferenceSize;
@property (nonatomic) CGSize footerReferenceSize;
//間距
@property (nonatomic) UIEdgeInsets sectionInset;

// Set these properties to YES to get headers that pin to the top of the screen and footers that pin to the bottom while scrolling (similar to UITableView).
@property (nonatomic) BOOL sectionHeadersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);
@property (nonatomic) BOOL sectionFootersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);

UICollectionViewFlowLayout 的代理方法

//基本就是上面的屬性通過代理的方法返回
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;

下一篇UICollectionViewLayout的自定義

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子短蜕,更是在濱河造成了極大的恐慌泛源,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件忿危,死亡現(xiàn)場離奇詭異,居然都是意外死亡没龙,警方通過查閱死者的電腦和手機铺厨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來硬纤,“玉大人解滓,你說我怎么就攤上這事◇菁遥” “怎么了洼裤?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長溪王。 經(jīng)常有香客問我腮鞍,道長,這世上最難降的妖魔是什么莹菱? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任移国,我火速辦了婚禮,結(jié)果婚禮上道伟,老公的妹妹穿的比我還像新娘迹缀。我一直安慰自己,他們只是感情好蜜徽,可當我...
    茶點故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布祝懂。 她就那樣靜靜地躺著,像睡著了一般拘鞋。 火紅的嫁衣襯著肌膚如雪砚蓬。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天掐禁,我揣著相機與錄音怜械,去河邊找鬼。 笑死傅事,一個胖子當著我的面吹牛缕允,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蹭越,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼障本,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起驾霜,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤案训,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后粪糙,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體强霎,經(jīng)...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年蓉冈,在試婚紗的時候發(fā)現(xiàn)自己被綠了城舞。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡寞酿,死狀恐怖家夺,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情伐弹,我是刑警寧澤拉馋,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站惨好,受9級特大地震影響煌茴,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜日川,卻給世界環(huán)境...
    茶點故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一景馁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧逗鸣,春花似錦合住、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至卿樱,卻和暖如春僚害,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背繁调。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工萨蚕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人蹄胰。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓岳遥,卻偏偏與公主長得像,于是被迫代替她去往敵國和親裕寨。 傳聞我的和親對象是個殘疾皇子浩蓉,可洞房花燭夜當晚...
    茶點故事閱讀 42,901評論 2 345

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