Configuring JJCollectionViewRoundConfigModel for Section Styling in Collection Views

To style collection view sections with rounded backgrounds, shadows, and borders, implement the JJCollectionViewDelegateRoundFlowLayout protocol and return a configured JJCollectionViewRoundConfigModel from the configModelForSectionAtIndex: delegate method.

The kingjiajie/jjcollectionviewroundflowlayout library extends UICollectionViewFlowLayout to support section-scoped background styling through the JJCollectionViewRoundConfigModel class. By implementing the delegate method and configuring model properties, you control the decoration view appearance—including background color, corner radius, and shadow effects—for each section independently.

Architecture Overview

The styling system relies on three primary components defined in the repository's Classes directory:

• JJCollectionViewRoundFlowLayout: A UICollectionViewFlowLayout subclass that computes geometry, creates decoration views, and queries the delegate for configuration models. Defined in JJCollectionViewRoundFlowLayout.h and implemented in JJCollectionViewRoundFlowLayout.m.
• JJCollectionViewRoundConfigModel: A plain Objective-C data container that stores styling properties such as backgroundColor, cornerRadius, shadowOpacity, and borderWidth. Declared in JJCollectionViewRoundConfigModel.h.
• JJCollectionViewTouchAnimationConfigModel: An optional configuration class for background tap animations, defined in JJCollectionViewTouchAnimationConfigModel.h.

The layout calls the delegate method collectionView:layout:configModelForSectionAtIndex: once per section to obtain the configuration model, then renders a decoration view behind the cells using those properties.

Implementing the Delegate Method

Implement JJCollectionViewDelegateRoundFlowLayout and provide the configuration model through the required delegate method. The layout invokes this method for every section index during layout calculations.

#pragma mark - JJCollectionViewDelegateRoundFlowLayout

- (JJCollectionViewRoundConfigModel *)collectionView:(UICollectionView *)collectionView
                     layout:(UICollectionViewLayout *)collectionViewLayout
          configModelForSectionAtIndex:(NSInteger)section {
    
    JJCollectionViewRoundConfigModel *model = [[JJCollectionViewRoundConfigModel alloc] init];
    model.backgroundColor = [UIColor colorWithRed:233/255.0 green:233/255.0 blue:233/255.0 alpha:1.0];
    model.cornerRadius = 10.0;
    
    return model;
}

Returning nil is safe—the layout ignores missing configurations for that specific section as of version 2.7.1.

Configuring Visual Properties

The JJCollectionViewRoundConfigModel supports comprehensive styling options. Set these properties to customize the decoration view rendered behind your cells:

• Background and Corners: Use backgroundColor and cornerRadius to create rounded card-style sections.
• Shadow Effects: Configure shadowColor, shadowOffset (a CGSize), shadowOpacity (a float), and shadowRadius (a CGFloat) for depth.
• Borders: Apply borderWidth and borderColor to outline sections.

Example with full styling:

- (JJCollectionViewRoundConfigModel *)collectionView:(UICollectionView *)collectionView
                     layout:(UICollectionViewLayout *)collectionViewLayout
          configModelForSectionAtIndex:(NSInteger)section {

    JJCollectionViewRoundConfigModel *model = [[JJCollectionViewRoundConfigModel alloc] init];
    model.backgroundColor = [UIColor whiteColor];
    model.cornerRadius = 12.0;
    
    // Shadow configuration
    model.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.15];
    model.shadowOffset = CGSizeMake(0, 4);
    model.shadowOpacity = 0.5;
    model.shadowRadius = 8.0;
    
    // Border configuration
    model.borderWidth = 1.0;
    model.borderColor = [UIColor colorWithWhite:0.9 alpha:1.0];
    
    return model;
}

Section-Specific Styling Strategies

Since the delegate method receives the section index as a parameter, you can return distinct models per section to create varied visual hierarchies. This enables alternating colors, different corner radii, or section-specific borders.

- (JJCollectionViewRoundConfigModel *)collectionView:(UICollectionView *)collectionView
                     layout:(UICollectionViewLayout *)collectionViewLayout
          configModelForSectionAtIndex:(NSInteger)section {

    JJCollectionViewRoundConfigModel *model = [[JJCollectionViewRoundConfigModel alloc] init];
    model.cornerRadius = 8.0;

    switch (section) {
        case 0:
            model.backgroundColor = [UIColor colorWithRed:0.95 green:0.95 blue:0.95 alpha:1];
            break;
        case 1:
            model.backgroundColor = [UIColor colorWithRed:0.80 green:0.90 blue:1.00 alpha:1];
            model.borderWidth = 1.0;
            model.borderColor = [UIColor lightGrayColor];
            break;
        default:
            model.backgroundColor = [UIColor whiteColor];
            break;
    }
    return model;
}

Incorporating Headers and Footers

By default, the background decoration covers only the cell frames. To extend the background to include section headers and footers, enable the calculation flags either globally on the layout instance or per-section through delegate methods.

Global configuration:

JJCollectionViewRoundFlowLayout *layout = [[JJCollectionViewRoundFlowLayout alloc] init];
layout.isCalculateHeader = YES;   // Include header view in background
layout.isCalculateFooter = YES;   // Include footer view in background

Per-section control:

- (BOOL)collectionView:(UICollectionView *)collectionView
                layout:(UICollectionViewLayout *)collectionViewLayout
  isCalculateHeaderViewIndex:(NSInteger)section {
    return (section % 2 == 0);   // Only even sections include header
}

Adding Touch Animations to Backgrounds

For interactive section backgrounds, enable touch animations on the layout and provide per-section animation configurations.

First, enable animations globally:

layout.isDecorationViewTouchAnimationEnable = YES;

Then implement the animation delegate method:

- (JJCollectionViewTouchAnimationConfigModel *)collectionView:(UICollectionView *)collectionView
                     layout:(UICollectionViewLayout *)collectionViewLayout
        animationConfigModelForSection:(NSInteger)section {

    JJCollectionViewTouchAnimationConfigModel *anim = [JJCollectionViewTouchAnimationConfigModel createDefaultModel];
    if (section == 2) {
        anim.isCellsAnimationEnable = NO;   // Background animates, cells remain static
        anim.endDuration = 0.6;
    }
    return anim;
}

Summary

• Implement collectionView:layout:configModelForSectionAtIndex: in JJCollectionViewDelegateRoundFlowLayout to provide section-specific styling configuration.
• Configure JJCollectionViewRoundConfigModel properties such as backgroundColor, cornerRadius, shadowColor, and borderWidth to define the decoration view appearance.
• Return nil for sections that should not display a background decoration view; the layout safely skips rendering as of v2.7.1.
• Set isCalculateHeader and isCalculateFooter on the layout, or implement isCalculateHeaderViewIndex:, to include supplementary views within the background frame.
• Use JJCollectionViewTouchAnimationConfigModel for per-section tap animation behavior when isDecorationViewTouchAnimationEnable is active.

Frequently Asked Questions

What happens if I return nil from configModelForSectionAtIndex:?

Returning nil prevents the layout from creating a decoration view for that specific section. As implemented in JJCollectionViewRoundFlowLayout.m since version 2.7.1, the layout safely handles missing configurations without crashing or rendering artifacts.

Can I use different corner radii for each section?

Yes. Since the delegate method collectionView:layout:configModelForSectionAtIndex: is invoked individually for every section index, you can instantiate separate JJCollectionViewRoundConfigModel objects with unique cornerRadius values for each section, enabling mixed card styles within the same collection view.

How do I include the section header inside the rounded background?

Set the isCalculateHeader property to YES on your JJCollectionViewRoundFlowLayout instance to include all headers, or implement the delegate method isCalculateHeaderViewIndex: to return YES for specific sections. The layout automatically expands the decoration view's frame to encompass the header view's geometry.

Is it possible to animate the background when the user taps it?

Yes. Set isDecorationViewTouchAnimationEnable to YES on the layout instance, then implement animationConfigModelForSection: to return a JJCollectionViewTouchAnimationConfigModel configured with your desired startDuration, endDuration, and scale parameters.

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