iOS開發 ----- UICollectionView

UICollectionView

簡介

和tableView類似的控件,但更零活,tableView是以行爲單位的,而collectionView是item,可大可小,對於複雜的佈局來說,更加零活

代理

UICollectionViewDataSource
UICollectionViewDelegate
UICollectionViewDelegateFlowLayout

使用方法步驟

1. 指定佈局

//首先用 UICollectionViewFlowLayout來指定方向,水平或者垂直
    UICollectionViewFlowLayout * flow = [[UICollectionViewFlowLayout alloc]init];

    /*    
     UICollectionViewScrollDirectionVertical,
     UICollectionViewScrollDirectionHorizontal
     */
    //設置爲縱向滾動
    flow.scrollDirection = UICollectionViewScrollDirectionVertical;

2. 初始化

_collertionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height) collectionViewLayout:flow];

3. 遵守代理協議

    _collertionView.delegate = self;
    _collertionView.dataSource = self;

4. 使用某個指定的cell,提前聲明

[_collertionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"cellID"];

5. 聲明標頭,標尾,可以從xib文件聲明佈局,手寫代碼也是沒問題的

    [_collertionView registerNib:[UINib nibWithNibName:@"HeaderCollectionReusableView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
    [_collertionView registerNib:[UINib nibWithNibName:@"HeaderCollectionReusableView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter
             withReuseIdentifier:@"footer"];

6. 相關代理協議

6.1分區

-(NSInteger)numberOfSectionsInCollectionView:(nonnull UICollectionView *)collectionView
{
    return 2;
}
````




<div class="se-preview-section-delimiter"></div>

######6.2每個區有多少item





<div class="se-preview-section-delimiter"></div>

-(NSInteger)collectionView:(nonnull UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 10;
}

<div class="se-preview-section-delimiter"></div>

######6.3每個item的寬高




<div class="se-preview-section-delimiter"></div>

//靠左側的座標原點是左上角
//靠右邊的座標原點是右上角
-(CGSize)collectionView:(nonnull UICollectionView )collectionView layout:(nonnull UICollectionViewLayout )collectionViewLayout sizeForItemAtIndexPath:(nonnull NSIndexPath *)indexPath
{

    return CGSizeMake(150, 150);

}

<div class="se-preview-section-delimiter"></div>

######6.4 創建單元格 和tableView不同的時,這裏時直接從隊列裏拿,不用重新創建,要保證id和註冊的時候一樣




<div class="se-preview-section-delimiter"></div>

-(UICollectionViewCell )collectionView:(nonnull UICollectionView )collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath
{
//不用判斷
static NSString * cellID = @”cellID”;
MyCollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];

cell.label.text = [NSString stringWithFormat:@"第%ld個",indexPath.row];
cell.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"10_%ld.jpg",indexPath.row]];



return cell;

}

<div class="se-preview-section-delimiter"></div>

######6.5 邊距調整




<div class="se-preview-section-delimiter"></div>

-(UIEdgeInsets)collectionView:(nonnull UICollectionView )collectionView layout:(nonnull UICollectionViewLayout )collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(5, 5, 5, 5);
}

<div class="se-preview-section-delimiter"></div>

######6.5 設置標頭,標尾 標頭標尾有特定的id,調用系統的來設置




<div class="se-preview-section-delimiter"></div>

-(UICollectionReusableView )collectionView:(nonnull UICollectionView )collectionView viewForSupplementaryElementOfKind:(nonnull NSString )kind atIndexPath:(nonnull NSIndexPath )indexPath
{

HeaderCollectionReusableView * view = nil;
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
    static NSString * header = @"header";
    view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader
                                              withReuseIdentifier:header
                                                     forIndexPath:indexPath];
    view.label.text = @"1";
}else
{
    static NSString * footer = @"footer";
    view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter
                                              withReuseIdentifier:footer
                                                     forIndexPath:indexPath];
    view.label.text = @"2";
}
return view;

}

<div class="se-preview-section-delimiter"></div>

######6.6 設置標頭的大小





<div class="se-preview-section-delimiter"></div>

-(CGSize)collectionView:(nonnull UICollectionView *)collectionView
layout:(nonnull UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
return CGSizeMake(375, 40);
}

<div class="se-preview-section-delimiter"></div>

######6.7設置標尾的大小




<div class="se-preview-section-delimiter"></div>

-(CGSize)collectionView:(nonnull UICollectionView )collectionView layout:(nonnull UICollectionViewLayout )collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
return CGSizeMake(375, 40);
}

<div class="se-preview-section-delimiter"></div>

######6.8 選中某一個item的方法




<div class="se-preview-section-delimiter"></div>

-(void)collectionView:(nonnull UICollectionView )collectionView didSelectItemAtIndexPath:(nonnull NSIndexPath )indexPath
{
NSLog(@”%ld”,indexPath.row);
}

“`