我們都知道UITableview有一個tableHeaderFooterView,這樣我們在布局頁面的時候,如果頂部有輪播圖,可以直接把輪播圖設置為tableView的HeaderFooterView,用起來很好用,但是,當我們用上CollectionView的時候,發現collectionView並沒有HeaderFooterView這個屬性,可是此時我們頁面的架構是以colletctionView來實現的,而且collectionViewHeaderView也是有用到,如果有這樣的需求,這里提供2種解決方案把:
-
第一種方案:騰出一組作為collectionView的HeaderView,內容下移一組,也就是把section = 0這一組變相設置為headerView,內容依次下移,優勢在於不需要添加任何視圖,僅在原有colectionView的基礎上操作,但是呢,由於第一組被強行占用,所有后面數據源在賦值的時候有可能要小心數組的訪問不要越界。
-
第二種方案:這種方案也比較簡單,跟第一組方案的優勢在於,真的是給collectionView添加了一個頭,collectionView訪問期間,不需要考慮的其它任何因素。
我的思路是利用collectionView的contentInset和scrollViewInset屬性,讓collectionView的滾動區域和內容區域向下偏移一定的距離,這樣,頂部就騰出空間,這個空間可以用來填補我們想要設置的header(可能是輪播圖),創建一個自定義view,設置view的frame,然后讓view的空間完全填充上面利用偏移騰出的空間,就可以完美解決上述問題了

define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>
@property (nonatomic, strong) UICollectionView *collectionView;
@end
@implementation ViewController
-(UICollectionView *)collectionView{
if (!_collectionView) {
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.itemSize = CGSizeMake(100, 100);
layout.minimumInteritemSpacing = 10;
layout.minimumLineSpacing = 10;
layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
_collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
_collectionView.delegate = self;
_collectionView.dataSource = self;
_collectionView.backgroundColor = [UIColor whiteColor];
[_collectionView registerClass:[TYCustomCell class] forCellWithReuseIdentifier:@"TYCustomCell"];
[_collectionView registerClass:[TYHeaderFooterView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"];
[_collectionView registerClass:[TYHeaderFooterView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
//設置滾動范圍偏移200
_collectionView.scrollIndicatorInsets = UIEdgeInsetsMake(200, 0, 0, 0);
//設置內容范圍偏移200
_collectionView.contentInset = UIEdgeInsetsMake(200, 0, 0, 0);
_collectionView.alwaysBounceVertical = YES;
}
return _collectionView;
}
-
(void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.[self setupUI];
}
-(void)setupUI{
//給collectionView添加子控件 這里是作為頭部 記得設置y軸為負值
UIView *header = [[UIView alloc] initWithFrame:CGRectMake(0, -200, SCREEN_WIDTH, 200)];
header.backgroundColor = [UIColor cyanColor];
[self.collectionView addSubview:header];
//添加內容到視圖上
[self.view addSubview:self.collectionView];
}
pragma mark - CollectonViewDataSource Delegate
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 9;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
TYCustomCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"TYCustomCell" forIndexPath:indexPath];
cell.backgroundColor = [UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1];
return cell;
}
//設置頭部
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) { //header
TYHeaderFooterView *header = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];
header.backgroundColor = [UIColor redColor];
return header;
}else if([kind isEqualToString:UICollectionElementKindSectionFooter]){ //footer
TYHeaderFooterView *footer = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer" forIndexPath:indexPath];
footer.backgroundColor = [UIColor blueColor];
return footer;
}
return [UICollectionReusableView new];
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
return CGSizeMake(SCREEN_WIDTH, 44);
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{
return CGSizeMake(SCREEN_WIDTH, 44);
}