For e-commerce apps, there is often a need like the one shown in the following figure — the head of the list shows a rotating AD space that can scroll along with the list below.

One way to do this is to wrap a scrollView around the list, with the top of the scroll placed at the same level as the list. But this increases the level of view nesting and code redundancy.

Another way to do this is to add a header to the list, as described below.

TableView implements the header

Implementing the header for a UITableView is simple, just set the tableHeaderView property for the list, as shown below

 self.tableView.tableHeaderView = self.topHeaderView;
Copy the code

CollectionView implementation header

UICollectionView does not have a similar tableHeaderView property. To implement a table header, there are roughly two ways

List margins

Using in-list margins, display the table header at the in-list margin position

/ / set the list head padding for top view highly _collectionView. ContentInset = UIEdgeInsetsMake (self topHeaderViewHeightValue, 0, 0, 0). / / the header is added to the list, inside margin position show [_collectionView addSubView: self. TopHeaderView];Copy the code

UICollectionViewDelegateFlowLayout agency head to tail

Tip: in the actual development, if there are complex back into operation, the drop-down refresh, dynamic adjustment operations such as header height, padding method, are not recommended to use UICollectionViewDelegateFlowLayout agent implementation is better

Using UICollectionViewDelegateFlowLayout, realize UICollectionElementKindSectionHeader header, the concrete implementation steps are as follows (in the same way, Also can realize UICollectionElementKindSectionHeader tail components)

  1. addUICollectionViewDelegateFlowLayoutThe agent
// add UICollectionViewDelegateFlowLayout
@interface XXXViewController()<UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>
Copy the code
  1. Registry Header (header view)
- (UICollectionView *) collectionView { if (! _collectionView) { UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init]; / /... _collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.width, self.view.height-[self p_customNaviBarHeight]) collectionViewLayout:flowLayout]; / / cell [_collectionView registerClass: [LPKLandPageCollectionViewCell class] forCellWithReuseIdentifier: [nsstrings stringWithFormat:@"%@",NSStringFromClass([LPKLandPageCollectionViewCell class])]]; [_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"doubleNineHeader"]; [_collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"doubleNineHeader"]; return _collectionView; }Copy the code
  1. Implementing the header view
-(UICollectionReusableView *)collectionView :(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{ UICollectionReusableView *headerView =nil; If (kind = = UICollectionElementKindSectionHeader) {/ / head view headerView = [_collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"doubleNineHeader" forIndexPath:indexPath]; headerView.backgroundColor = [UIColor clearColor]; [headerView addSubview:self.headerTitleView]; } else if (kind = = UICollectionElementKindSectionFooter) {/ / rear view / /... } return headerView; }Copy the code
  1. Set the header view height (this method will be in the listfillDataCall both before and after, so you can dynamically adjust the header view height based on the fill data.)
// Set the header view height -(CGSize)collectionView (UICollectionView *)collectionView Layout (UICollectionViewLayout *) collectionViewLayout referenceSizeForHeaderInSection: (NSInteger) section {CGFloat sectionHeaderHeight = 0.0; sectionHeaderHeight = self.isShowHeaderTitleInfo ? kIphone6Scale(42):kIphone6Scale(15); return CGSizeMake(self.view.width, sectionHeaderHeight); }Copy the code