can UICollectionLayoutListConfiguration support footer view like tableFooterView not like section footer view?

Question

I am using UICollectionLayoutListConfiguration to make a UICollectionView layout like UITableView.

But it seem like the only supported footer view mode in UICollectionLayoutListConfiguration is section footer view. which will pinning to the view when the section is scrolling on the screen.

@property (nonatomic) UICollectionLayoutListFooterMode footerMode;
    
typedef NS_ENUM(NSInteger, UICollectionLayoutListFooterMode) {
        /// No footers are shown
        UICollectionLayoutListFooterModeNone,
        
        /// Uses supplementary views of kind UICollectionElementKindSectionFooter to show footers
        UICollectionLayoutListFooterModeSupplementary,
    } API_AVAILABLE(ios(14.0), tvos(14.0), watchos(7.0));

But I want the footer view behave like UITableView's tableFooterView which has nothing to do with any section and will not pin the screen.

If I use UICollectionViewCompositionalLayoutConfiguration instead of UICollectionLayoutListConfiguration , there will be a boundarySupplementaryItems property to do this . But UICollectionLayoutListConfiguration seems has no boundarySupplementaryItems to this.

Any way to make a tableFooterView layout with UICollectionLayoutListConfiguration?

Answer 1

I found a way to do this:

1. using sectionWithListConfiguration to create a NSCollectionLayoutSection
2. now you can using boundarySupplementaryItems to this line section

demo code is posted:

@interface ListFooterViewController:UIViewController
@end

@interface ListFooterViewController () <UICollectionViewDelegate, UICollectionViewDataSource>

@property (nonatomic, strong) UICollectionView *collectionView;

@end

@implementation ListFooterViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self setupCollectionView];
}

- (void)setupCollectionView {
    // 创建列表布局配置
    UICollectionLayoutListConfiguration *listConfig = [[UICollectionLayoutListConfiguration alloc] initWithAppearance:UICollectionLayoutListAppearancePlain];
    listConfig.footerMode = UICollectionLayoutListFooterModeSupplementary;

    // 创建并配置 UICollectionViewCompositionalLayout
    UICollectionViewCompositionalLayout *layout = [[UICollectionViewCompositionalLayout alloc] initWithSectionProvider:^NSCollectionLayoutSection * _Nullable(NSInteger section, id<NSCollectionLayoutEnvironment> _Nonnull layoutEnvironment) {
        // 创建列表布局
        NSCollectionLayoutSection *listSection = [NSCollectionLayoutSection sectionWithListConfiguration:listConfig layoutEnvironment:layoutEnvironment];
        
        // 添加页脚
        NSCollectionLayoutBoundarySupplementaryItem *footerItem = [NSCollectionLayoutBoundarySupplementaryItem boundarySupplementaryItemWithLayoutSize:[NSCollectionLayoutSize sizeWithWidthDimension:[NSCollectionLayoutDimension fractionalWidthDimension:1] heightDimension:[NSCollectionLayoutDimension absoluteDimension:50]] elementKind:UICollectionElementKindSectionFooter alignment:NSRectAlignmentBottom];
        listSection.boundarySupplementaryItems = @[footerItem];

        return listSection;
    }];

    // 创建并配置 UICollectionView
    self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
    self.collectionView.backgroundColor = [UIColor systemBackgroundColor];
    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;
    [self.view addSubview:self.collectionView];
    
    // 注册单元格和页脚视图
    [self.collectionView registerClass:[UICollectionViewListCell class] forCellWithReuseIdentifier:@"cell"];
    [self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"];
}

#pragma mark - UICollectionViewDataSource

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

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

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    cell.contentView.backgroundColor = [UIColor whiteColor];
    return cell;
}

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
    UICollectionReusableView *footer = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer" forIndexPath:indexPath];
    footer.backgroundColor = [UIColor redColor];
    return footer;
}

#pragma mark - UICollectionViewDelegate

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"Selected item at indexPath: %@", indexPath);
}

@end

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
}

- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    ListFooterViewController* vc = [ListFooterViewController new];
    [self.navigationController pushViewController:vc animated:YES];
}