IOS uses uicollectionview to achieve the list header stretch effect

Time:2020-2-24

The example of this article shares the specific code of the display of the zoom effect of the IOS implementation list for your reference. The specific content is as follows

First look at the renderings

I suddenly found that it was very difficult before I did it. After I did it, I felt that So Easy had such feelings

Do this and rewriteUICollectionViewFlowLayoutJust a few ways

OC version

Create a class customcollectionviewflowlayout to inherit uicollectionviewflowlayout

//
// CustomCollectionViewFlowLayout.m
// 
//
// Created by GongHui_YJ on 16/8/4.
//Copyright © 2016 Yangjian. All rights reserved
//

#import "CustomCollectionViewFlowLayout.h"

@implementation CustomCollectionViewFlowLayout

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
  return YES;
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {

  UICollectionView *collectionView = [self collectionView];
  UIEdgeInsets insets = [collectionView contentInset];
  CGPoint offset = [collectionView contentOffset];
  CGFloat minY = -insets.top;

  NSArray *attributes = [super layoutAttributesForElementsInRect:rect];

  if (offset.y < minY) {

    CGSize headerSize = [self headerReferenceSize];
    CGFloat deltaY = fabsf(offset.y - minY);

    for (UICollectionViewLayoutAttributes *attrs in attributes) {

      if ([attrs representedElementKind] == UICollectionElementKindSectionHeader) {

        CGRect headerRect = [attrs frame];
        headerRect.size.height = MAX(minY, headerSize.height + deltaY);
        headerRect.origin.y = headerRect.origin.y - deltaY;
        [attrs setFrame:headerRect];
        break;
      }
    }
  }

  return attributes;
}

@end

Use import first header file in controller

//Create a collectionview
  CustomCollectionViewFlowLayout *flowLayout=[[CustomCollectionViewFlowLayout alloc] init];
  [flowLayout setSectionInset:UIEdgeInsetsMake(0, 0, 10, 0)];
  [flowLayout setItemSize:CGSizeMake(kScreenWidth / collectionCellW, kScreenWidth / collectionCellW)];
  [flowLayout setHeaderReferenceSize:CGSizeMake(kScreenWidth, userInfoImageViewH)];
  [flowLayout setFooterReferenceSize:CGSizeMake(kScreenWidth, 83)];
  [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
  [flowLayout setMinimumInteritemSpacing:0.0];
  [flowLayout setMinimumLineSpacing:0.0];

  self.homeCollectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight - 44)collectionViewLayout:flowLayout];
  self.homeCollectionView.backgroundColor = kViewBackgroundColor;
  self.homeCollectionView.alwaysBounceVertical = YES;
  self.homeCollectionView.showsVerticalScrollIndicator = NO;
  //Set up proxy
  self.homeCollectionView.delegate = self;
  self.homeCollectionView.dataSource = self;
  [self.view addSubview:self.homeCollectionView];

  //Registry header
  [self.homeCollectionView registerClass:[YJHeaderCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kCollectionHeaderView];

  //End of registry
  [self.homeCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kCollectionFooterView];

Swift version

Like swift, you don’t need to import header files

//
// CustomCollectionViewFlowLayout.swift
// 
//
// Created by GongHui_YJ on 16/8/4.
//Copyright © 2016 Yangjian. All rights reserved
//

import UIKit

class CustomCollectionViewFlowLayout: UICollectionViewFlowLayout {

  override func shouldInvalidateLayoutForBoundsChange(newBounds: CGRect) -> Bool {
    return true
  }

  override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    let collectionView = self.collectionView
    let insets = collectionView?.contentInset
    let offset = collectionView?.contentOffset
    let minY = -((insets?.top)!)

    let attributesArray = super.layoutAttributesForElementsInRect(rect)
    if offset!.y < minY {
      let headerSize = self.headerReferenceSize
      let deltaY = CGFloat(fabsf(Float((offset?.y)! - CGFloat(minY))))

      for attrs:UICollectionViewLayoutAttributes in attributesArray! {

        if attrs.representedElementKind == UICollectionElementKindSectionHeader {
          var headerRect = attrs.frame
          headerRect.size.height = max(minY, headerSize.height + deltaY)
          headerRect.origin.y = headerRect.origin.y - deltaY
          attrs.frame = headerRect
          break
        }
      }
    }

    return attributesArray
  }

}

Implementation of viewdidload method in controller

let customFlowLayout = CustomCollectionViewFlowLayout()
  customFlowLayout.headerReferenceSize = CGSizeMake(kScreenWidth, 203)
  customFlowLayout.footerReferenceSize = CGSizeMake(kScreenWidth, 83)
  customFlowLayout.minimumInteritemSpacing = 0
  customFlowLayout.minimumLineSpacing = 0
  customFlowLayout.itemSize = CGSizeMake(kScreenWidth / 3.000006, kScreenWidth / 3.00006)
  customFlowLayout.sectionInset = UIEdgeInsetsMake(0, 0, 10, 0)

  self.homeCollectionView.setCollectionViewLayout(customFlowLayout, animated: true)
  self.homeCollectionView.backgroundColor = kViewBackgroundColor
  self.homeCollectionView.alwaysBounceVertical = true
  let nib = UINib(nibName: "CommonCollectionViewCell", bundle: nil)
  self.homeCollectionView.registerNib(nib, forCellWithReuseIdentifier: cellId)

  //Registry header and footer
  let headerNib = UINib(nibName: "HeaderCollectionReusableView", bundle: nil)
  self.homeCollectionView.registerNib(headerNib, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: collectionHeaderId)

  self.homeCollectionView.registerClass(UICollectionReusableView.classForCoder(), forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: collectionFooterId)

Note:Do not implement the proxy method of uicollectionviewdelegateflowlayout.

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.