# JJCollectionViewRoundFlowLayout Delegate Methods: Complete Customization Guide

> Master JJCollectionViewRoundFlowLayout delegate methods to customize section backgrounds, shadows, alignment, animations, and tap handling without subclassing. Explore the complete guide.

- Repository: [Kingjiajie_Go/jjcollectionviewroundflowlayout](https://github.com/kingjiajie/jjcollectionviewroundflowlayout)
- Tags: deep-dive
- Published: 2026-03-05

---

**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`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/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`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/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.

```objc
- (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`.

```objc
- (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.

```objc
@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:

```objc
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`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/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.