UICollectionview的使用詳解

  1. 三個(gè)代理<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>
    前兩個(gè)的用法和tableView的很像寺渗,第三個(gè)是布局的協(xié)議大猛。(注意:頭視圖尾視圖都是由代理方法獲得历涝,而且需要寫(xiě)注冊(cè)诅需,缺少了也不行漾唉。) 注冊(cè)以后,就不需要再去管理復(fù)用的問(wèn)題了堰塌。這點(diǎn)就很簡(jiǎn)單赵刑。這個(gè)如果用好的話(huà),會(huì)非常的簡(jiǎn)單蔫仙。
  2. item(即cell)的布局原理(類(lèi)似tableView)
  3. header/footer View的布局原理
    都是繼承于UICollectionReusableView料睛,并且必須要從dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:這個(gè)代理方法中獲取,而且根據(jù)不同的kind作為headerView或者footerView摇邦,切記:collectionView中頭部視圖和尾部視圖也需要注冊(cè)

下面直接上代碼恤煞,看注釋即可:

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>{

}
@property (strong, nonatomic)UICollectionView *collectionView;

@end

ViewController.m

#import "ViewController.h"
#import "NewSceneCollectionHeaderView.h"
#import "NewSceneCollectionFooterView.h"
#import "NewSceneCollectionViewCell.h"

@interface ViewController ()

@end

//cell、header施籍、footerView 標(biāo)識(shí)
static NSString *cellIdentifier = @"NewSceneCollectionViewCell";
static NSString *headerIdentifier = @"NewSceneCollectionHeaderView";
static NSString *footerIdentifier = @"NewSceneCollectionFooterView";

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //創(chuàng)建布局對(duì)象
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    //flowlaout的屬性居扒,確定是水平滾動(dòng),還是垂直滾動(dòng)
    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    
    //接下來(lái)就在創(chuàng)建collectionView的時(shí)候初始化丑慎,就很方便了(能直接帶上layout)
    self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 200, 320, 280) collectionViewLayout:flowLayout];
    self.collectionView.backgroundColor = [UIColor grayColor]; 
    
    //指定數(shù)據(jù)源和代理
    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;
    
    //添加到主頁(yè)面上去 
    [self.view addSubview:self.collectionView];
    
    //collectionCell的注冊(cè)
    [self.collectionView registerClass:[NewSceneCollectionViewCell class] forCellWithReuseIdentifier:cellIdentifier];
    
    //collection頭視圖的注冊(cè)喜喂。  注意:奇葩的地方來(lái)了,頭視圖和尾部視圖也得注冊(cè)
    [self.collectionView registerClass:[NewSceneCollectionHeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerIdentifier];
    [self.collectionView registerClass:[NewSceneCollectionFooterView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:footerIdentifier];
    
    /*另一種方式
    //從Xib上注冊(cè)
    UINib *nib = nil;
    nib = [UINib nibWithNibName:cellIdentifier bundle:nil];
    [self.collectionView registerNib:nib
                 forCellWithReuseIdentifier:cellIdentifier];
    //注冊(cè)headerview和footerview
    nib = [UINib nibWithNibName:headerIdentifier bundle:nil];
    [self.collectionView registerNib:nib forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerIdentifier];
    nib = [UINib nibWithNibName:footerIdentifier bundle:nil];
    [self.collectionView registerNib:nib forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footerIdentifier];
    */
    [self.view addSubview:self.collectionView];
}

/********************************************************
 *UICollectionViewDataSource/Delegate/DelegateFlowLayout
 ********************************************************/
#pragma mark  UICollectionViewDataSource/Delegate

//返回多少組(section)竿裂,此方法不寫(xiě)默認(rèn)是1組(跟tableview類(lèi)似)
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 2;
}

#pragma mark required
//每組返回多少個(gè)Item玉吁,這個(gè)Item類(lèi)似tableview中的cell
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 10;
}

//返回cell,這里構(gòu)建Item(即cell)
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    //這里是自定義的cell
    NewSceneCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    cell.backgroundColor = [UIColor redColor];
    return cell;
}

#pragma mark  optional
//自定義header/footerView
// The view that is returned must be retrieved from a call to -dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:
//這里返回的view必須要從dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:這個(gè)方法中獲取腻异,而且根據(jù)不同的kind作為headerView或者footerView进副,切記:collectionView中頭部視圖和尾部視圖也需要注冊(cè)
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    UICollectionReusableView *reusableView = nil;
    if (UICollectionElementKindSectionHeader == kind) {
        //這里是自定義的頭視圖
        NewSceneCollectionHeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:headerIdentifier forIndexPath:indexPath];
        headerView.backgroundColor = [UIColor whiteColor]; 
        return headerView;
    }
    if (UICollectionElementKindSectionFooter == kind {
        //這里是自定義的尾視圖               
        NewSceneCollectionFooterView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:footerIdentifier forIndexPath:indexPath];
        footerView.backgroundColor = [UIColor whiteColor]; 
        return footerView;
    }
    return reusableView;
}

#pragma mark --UICollectionViewDelegateFlowLayout

//布局確定每個(gè)Item 的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{    
    return CGSizeMake(100, 100);
}

//布局確定每個(gè)section內(nèi)的Item距離section四周的間距 UIEdgeInsets
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    return UIEdgeInsetsMake(10, 10, 10, 10);
}

//返回每個(gè)section內(nèi)上下兩個(gè)Item之間的間距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
    return 10; 
}
//返回每個(gè)section內(nèi)左右兩個(gè)Item之間的間距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
    return 10;
}

//返回headerView的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
    CGFloat width = CGRectGetWidth(collectionView.bounds);
    CGFloat height = width + 86;
    return CGSizeMake(width, height);
}

//返回footerView的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
    CGFloat width = CGRectGetWidth(collectionView.bounds);
    CGFloat height = 144;
    return CGSizeMake(width, height);
}

#pragma mark --UICollectionViewDelegate

//UICollectionView被選中時(shí)調(diào)用的方法
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NewSceneCollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    cell.backgroundColor = [UIColor greenColor];
    NSLog(@"item======%ld",(long)indexPath.item);
    NSLog(@"row=======%ld",(long)indexPath.row);
    NSLog(@"section===%ld",(long)indexPath.section);
}

//返回這個(gè)UICollectionView是否可以被選擇
-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    return YES;
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市悔常,隨后出現(xiàn)的幾起案子影斑,更是在濱河造成了極大的恐慌,老刑警劉巖机打,帶你破解...
    沈念sama閱讀 212,718評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件矫户,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡残邀,警方通過(guò)查閱死者的電腦和手機(jī)皆辽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)芥挣,“玉大人膳汪,你說(shuō)我怎么就攤上這事【判悖” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 158,207評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵粘我,是天一觀的道長(zhǎng)鼓蜒。 經(jīng)常有香客問(wèn)我痹换,道長(zhǎng),這世上最難降的妖魔是什么都弹? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,755評(píng)論 1 284
  • 正文 為了忘掉前任娇豫,我火速辦了婚禮,結(jié)果婚禮上畅厢,老公的妹妹穿的比我還像新娘冯痢。我一直安慰自己,他們只是感情好框杜,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,862評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布浦楣。 她就那樣靜靜地躺著,像睡著了一般咪辱。 火紅的嫁衣襯著肌膚如雪振劳。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 50,050評(píng)論 1 291
  • 那天油狂,我揣著相機(jī)與錄音历恐,去河邊找鬼。 笑死专筷,一個(gè)胖子當(dāng)著我的面吹牛弱贼,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播磷蛹,決...
    沈念sama閱讀 39,136評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼吮旅,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了弦聂?” 一聲冷哼從身側(cè)響起鸟辅,我...
    開(kāi)封第一講書(shū)人閱讀 37,882評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎莺葫,沒(méi)想到半個(gè)月后匪凉,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,330評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡捺檬,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,651評(píng)論 2 327
  • 正文 我和宋清朗相戀三年再层,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片堡纬。...
    茶點(diǎn)故事閱讀 38,789評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡聂受,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出烤镐,到底是詐尸還是另有隱情蛋济,我是刑警寧澤,帶...
    沈念sama閱讀 34,477評(píng)論 4 333
  • 正文 年R本政府宣布炮叶,位于F島的核電站碗旅,受9級(jí)特大地震影響渡处,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜祟辟,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,135評(píng)論 3 317
  • 文/蒙蒙 一医瘫、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧旧困,春花似錦醇份、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,864評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至馍悟,卻和暖如春畔濒,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背锣咒。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,099評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工侵状, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人毅整。 一個(gè)月前我還...
    沈念sama閱讀 46,598評(píng)論 2 362
  • 正文 我出身青樓趣兄,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親悼嫉。 傳聞我的和親對(duì)象是個(gè)殘疾皇子艇潭,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,697評(píng)論 2 351

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