JJCollectionViewRoundFlowLayout Delegate Methods: Complete Customization Guide

The JJCollectionViewDelegateRoundFlowLayout protocol exposes nine optional delegate methods that let you configure per‑section backgrounds, shadows, alignment, touch animations, and tap handling without subclassing the layout.

JJCollectionViewRoundFlowLayout is a drop‑in replacement for UICollectionViewFlowLayout that draws rounded backgrounds behind collection‑view sections. All visual and interactive behavior is controlled through the delegate protocol defined in JJCollectionViewRoundFlowLayout.h. This guide covers every delegate method, its implementation in the source code, and practical examples for the kingjiajie/jjcollectionviewroundflowlayout repository.

Architecture of the Delegate Protocol

The protocol extends UICollectionViewDelegateFlowLayout and is queried during prepareLayout in JJCollectionViewRoundFlowLayout.m. The layout builds a JJCollectionViewRoundLayoutAttributes object for each section’s decoration view, storing your custom configuration and passing it to JJCollectionReusableView for rendering.

Key source files:

• JJCollectionViewRoundFlowLayout.h – Declares the delegate protocol and all optional methods.
• JJCollectionViewRoundFlowLayout.m – Implements prepareLayout and layoutAttributesForElementsInRect: to merge decoration attributes with cell attributes.
• JJCollectionViewRoundConfigModel – Model returned by the delegate to define background color, corner radius, shadow, and border.
• JJCollectionViewTouchAnimationConfigModel – Model for touch‑animation parameters when interaction is enabled.

Required and Optional Delegate Methods

While the protocol declares all methods as optional, you must implement collectionView:layout:configModelForSectionAtIndex: to render backgrounds. The layout falls back to internal defaults for any unimplemented selector.

Background Configuration (Required)

collectionView:layout:configModelForSectionAtIndex: returns a JJCollectionViewRoundConfigModel instance that defines the section’s background appearance.

- (JJCollectionViewRoundConfigModel *)collectionView:(UICollectionView *)cv
                                            layout:(UICollectionViewLayout *)layout
                         configModelForSectionAtIndex:(NSInteger)section {
    JJCollectionViewRoundConfigModel *model = [JJCollectionViewRoundConfigModel new];
    model.backgroundColor = [UIColor whiteColor];
    model.cornerRadius = 8.0;
    model.shadowColor = [UIColor blackColor];
    model.shadowOpacity = 0.15;
    model.shadowRadius = 4.0;
    model.borderWidth = 0.5;
    model.borderColor = [UIColor lightGrayColor];
    return model;
}

Custom Insets and Geometry

borderEdgeInsertsForSectionAtIndex: supplies UIEdgeInsets that apply only to the background decoration, allowing padding between the section’s cells and its rounded container without affecting cell layout.

isCalculateHeaderViewIndex: and isCalculateFooterViewIndex: return BOOL values indicating whether the background should extend to include the section’s header or footer views.

isCanCalculateWhenRowEmptyWithSection: determines if a background should still appear when the section contains zero cells.

Cell Alignment Control

alignmentTypeAtSection: overrides the global alignment for a specific section. Return values include JJCollectionViewRoundFlowLayoutAlignmentTypeLeft, JJCollectionViewRoundFlowLayoutAlignmentTypeCenter, or JJCollectionViewRoundFlowLayoutAlignmentTypeBySystem.

- (JJCollectionViewRoundFlowLayoutAlignmentType)collectionView:(UICollectionView *)cv
                                                       layout:(UICollectionViewLayout *)layout
                                   alignmentTypeAtSection:(NSInteger)section {
    return (section == 0) ? JJCollectionViewRoundFlowLayoutAlignmentTypeCenter 
                          : JJCollectionViewRoundFlowLayoutAlignmentTypeLeft;
}

Touch Animation and Interaction

isDecorationViewShowAnimationAtIndex: enables or disables the touch animation for a specific section.

animationConfigModelForSection: returns a JJCollectionViewTouchAnimationConfigModel defining scale factors (transformScaleSx, transformScaleSy) and animation duration.

collectionView:didSelectDecorationViewAtIndexPath: receives callbacks when the user taps the section background.

Complete Implementation Example

The following Objective‑C example demonstrates a view controller acting as the delegate, configuring multiple sections with distinct backgrounds, custom insets, selective header inclusion, left alignment, and touch animations.

@interface MyViewController () <JJCollectionViewDelegateRoundFlowLayout, UICollectionViewDataSource>
@property (nonatomic, strong) UICollectionView *collectionView;
@end

@implementation MyViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    JJCollectionViewRoundFlowLayout *layout = [[JJCollectionViewRoundFlowLayout alloc] init];
    layout.delegate = self;
    layout.isDecorationViewTouchAnimationEnable = YES;

    self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds 
                                             collectionViewLayout:layout];
    self.collectionView.dataSource = self;
    self.collectionView.delegate = self;
    [self.view addSubview:self.collectionView];
}

#pragma mark - JJCollectionViewDelegateRoundFlowLayout

- (JJCollectionViewRoundConfigModel *)collectionView:(UICollectionView *)cv
                                            layout:(UICollectionViewLayout *)layout
                         configModelForSectionAtIndex:(NSInteger)section {
    JJCollectionViewRoundConfigModel *model = [JJCollectionViewRoundConfigModel new];
    model.backgroundColor = (section % 2 == 0) ? [UIColor colorWithWhite:0.95 alpha:1] 
                                               : [UIColor whiteColor];
    model.cornerRadius = 8.0;
    model.shadowOpacity = 0.2;
    model.shadowRadius = 4.0;
    model.borderWidth = 0.5;
    model.borderColor = [UIColor lightGrayColor];
    return model;
}

- (UIEdgeInsets)collectionView:(UICollectionView *)cv
                       layout:(UICollectionViewLayout *)layout
        borderEdgeInsertsForSectionAtIndex:(NSInteger)section {
    return UIEdgeInsetsMake(8, 12, 8, 12);
}

- (BOOL)collectionView:(UICollectionView *)cv
                layout:(UICollectionViewLayout *)layout
isCalculateHeaderViewIndex:(NSInteger)section {
    return (section % 2 != 0);
}

- (JJCollectionViewRoundFlowLayoutAlignmentType)collectionView:(UICollectionView *)cv
                                                       layout:(UICollectionViewLayout *)layout
                                   alignmentTypeAtSection:(NSInteger)section {
    return (section == 1) ? JJCollectionViewRoundFlowLayoutAlignmentTypeLeft 
                          : JJCollectionViewRoundFlowLayoutAlignmentTypeBySystem;
}

- (BOOL)collectionView:(UICollectionView *)cv
                layout:(UICollectionViewLayout *)layout
isDecorationViewShowAnimationAtIndex:(NSInteger)section {
    return section < 3;
}

- (JJCollectionViewTouchAnimationConfigModel *)collectionView:(UICollectionView *)cv
                                                      layout:(UICollectionViewLayout *)layout
                                   animationConfigModelForSection:(NSInteger)section {
    JJCollectionViewTouchAnimationConfigModel *anim = [JJCollectionViewTouchAnimationConfigModel new];
    anim.transformScaleSx = 0.9;
    anim.transformScaleSy = 0.9;
    anim.startDuration = 0.2;
    anim.endDuration = 0.2;
    anim.isCellsAnimationEnable = YES;
    return anim;
}

- (void)collectionView:(UICollectionView *)cv 
didSelectDecorationViewAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"Background tapped – section %ld", (long)indexPath.section);
}

@end

Global Settings vs. Per‑Section Delegation

For layouts requiring uniform behavior across all sections, set global properties on the layout instance instead of implementing per‑section delegate methods:

JJCollectionViewRoundFlowLayout *layout = [JJCollectionViewRoundFlowLayout new];
layout.collectionCellAlignmentType = JJCollectionViewRoundFlowLayoutAlignmentTypeLeft;
layout.isRoundEnabled = NO; // Disables all backgrounds and delegate queries

Summary

• Delegate Protocol: JJCollectionViewDelegateRoundFlowLayout extends UICollectionViewDelegateFlowLayout and is defined in JJCollectionViewRoundFlowLayout.h.
• Core Method: Implement collectionView:layout:configModelForSectionAtIndex: to return a JJCollectionViewRoundConfigModel defining background color, corner radius, shadows, and borders.
• Geometry Control: Use borderEdgeInsertsForSectionAtIndex: for background‑only padding and isCalculateHeaderViewIndex:/isCalculateFooterViewIndex: to include headers/footers in the rounded container.
• Alignment: Override alignmentTypeAtSection: for per‑section cell alignment or set the global collectionCellAlignmentType property.
• Interaction: Enable touch animations via isDecorationViewShowAnimationAtIndex: and supply parameters through animationConfigModelForSection:; receive tap events via collectionView:didSelectDecorationViewAtIndexPath:.

Frequently Asked Questions

What is the minimum delegate implementation required to show rounded backgrounds?

You must implement collectionView:layout:configModelForSectionAtIndex: and return a configured JJCollectionViewRoundConfigModel. Without this method, the layout has no styling information and will not render decoration views, even if isRoundEnabled is YES.

How do I add padding between the cells and the section background?

Implement borderEdgeInsertsForSectionAtIndex: and return UIEdgeInsets values. These insets apply only to the background decoration view calculated in JJCollectionViewRoundFlowLayout.m, leaving the actual cell layout unaffected by standard sectionInset values.

Can I disable backgrounds for specific sections while keeping them for others?

Yes. Return nil from collectionView:layout:configModelForSectionAtIndex: for sections that should not display a background, or implement isCanCalculateWhenRowEmptyWithSection: to control background visibility when sections contain no items.

How does the touch animation work under the hood?

When you return YES from isDecorationViewShowAnimationAtIndex:, the layout attaches a JJCollectionViewTouchAnimationConfigModel to the decoration view’s layout attributes. The internal JJCollectionReusableView class reads this model in its touchesBegan:, touchesEnded:, and touchesCancelled: methods to perform the scale animation using the specified transformScaleSx, transformScaleSy, and duration values.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}