1. Case demonstration

This case Demo demonstrates that the list head has the effect of stretching, with a good user experience. When the offsetY of the list is less than 0, the image at the top will scale the width and height of the head accordingly, following the gesture drop down. As shown below:

1.gif

Second, knowledge reserve

2.1, custom UICollectionViewFlowLayout

Custom UICollectionViewFlowLayout is the essence of UICollectionView powerful functions, it is in charge to each Cell, Supplementary View and Decoration Views of organization and management, The presentation of content can be highly customized.

2.2, layoutAttributesForElementsInRect: method

This is the most important methods in UICollectionViewFlowLayout layout class, at the same time may also be the most easy to confuse. The Collection View calls this method and passes a rectangle from its own coordinate system. This rectangle represents the view’s visible rectangle area (its bounds), and you need to be ready to handle any rectangles that are passed to you.

Your implementation must return an array containing UICollectionViewLayoutAttributes object, for each cell contains such an object, supplementary view or decoration the view is visible in the area of the rectangle. UICollectionViewLayoutAttributes class contains a collection item in the view of all the relevant layout properties. By default, this class contains frame, Center, Size, transform3D, alpha, zIndex properties, and Hidden attributes. If you want to control the layout of the attribute of other views (for example, the background color), you can build a UICollectionViewLayoutAttributes subclasses, and then add your own properties.

Layout property objects are associated with their corresponding cell, Supplementary View, or Decoration View through the indexPath property. After the Collection View requests layout properties from the layout object for all items, it instantiates all views and applies the corresponding properties to each view.

Attention! This method involves all types of views, namely cells, Supplementary Views, and decoration views. A naive implementation might choose to ignore the incoming rectangle and return layout properties for all views in the Collection View. This is an effective approach during the prototyping and development layout phases. However, this can have a very bad effect on performance, especially if there are far fewer visible cells than all of them, and collection Views and layout objects do extra unnecessary work for views that are not visible.

2.3, – (BOOL) shouldInvalidateLayoutForBoundsChange (CGRect) newBounds;

When the Collection View’s bounds change, the layout needs to tell the Collection View whether the layout needs to be recalculated.

Key code analysis

The realization of custom UICollectionViewFlowLayout

#import "StretchyHeaderCollectionViewLayout.h"

@implementation StretchyHeaderCollectionViewLayout

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

- (UICollectionViewScrollDirection)scrollDirection{
    return UICollectionViewScrollDirectionVertical;
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{
    UICollectionView *collectionView = [self collectionView];
    CGPoint offset = [collectionView contentOffset];

    NSArray *attributes = [super layoutAttributesForElementsInRect:rect];

    if (offset.y<0) {
        CGFloat deltaY = fabs(offset.y);
        for (UICollectionViewLayoutAttributes *attrs in attributes ) {
            NSString *kind = [attrs representedElementKind];
            if (kind == UICollectionElementKindSectionHeader) {
                CGSize headerSize = [self headerReferenceSize];
                CGRect headRect = [attrs frame];
                headRect.size.height = headerSize.height+deltaY;
                headRect.size.width = headerSize.width +deltaY;
                headRect.origin.y = headRect.origin.y - deltaY;
                headRect.origin.x = headRect.origin.x - deltaY/2;
                [attrs setFrame:headRect];
                break; }}}return attributes;
}
@end
Copy the code

4. Demo download address

Demo download address: this is a my iOS communication group: 624212887, group file download, no matter you are small white or big ox warmly welcome to enter the group, share interview experience, discuss technology, we exchange learning to grow together! Hope to help developers avoid detours. — Click: Join

If you think you still have some use, pay attention to xiaobian + like this article. Your support is my motivation to continue.

Next article: use UICollectionView to achieve a slanted list effect

Article from the network, if there is infringement, please contact xiaobian to delete.