# Applying Shadow Effects to Collection View Section Backgrounds Using JJCollectionViewRoundFlowLayout

> Learn how to apply shadow effects to collection view section backgrounds using JJCollectionViewRoundFlowLayout by configuring the JJCollectionViewRoundConfigModel in the delegate method.

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

---

**Apply shadow effects to collection view section backgrounds by returning a configured `JJCollectionViewRoundConfigModel` from the `collectionView:layout:configModelForSectionAtIndex:` delegate method, which the layout applies to the section background view's layer properties.**

The `kingjiajie/jjcollectionviewroundflowlayout` library provides a drop-in replacement for `UICollectionViewFlowLayout` that adds rounded backgrounds and shadow effects to collection view sections. When applying shadow effects to collection view section backgrounds, you configure visual properties through a dedicated model object rather than manipulating layers directly.

## How Shadow Rendering Works in JJCollectionViewRoundFlowLayout

The layout creates an internal reusable background view for each section and applies visual styling by mapping properties from `JJCollectionViewRoundConfigModel` directly to the view's Core Animation layer. In `JJCollectionViewRoundFlowLayout.m`, the method `toChangeCollectionReusableViewRoundInfoWithLayoutAttributes:` handles the transfer of shadow parameters including `shadowColor`, `shadowOffset`, `shadowOpacity`, and `shadowRadius` to `view.layer`.

## Configuring Shadow Properties for Collection View Sections

### Implementing the Delegate Method

To apply shadow effects to collection view section backgrounds, implement the delegate method `collectionView:layout:configModelForSectionAtIndex:` in your `UICollectionViewDelegateFlowLayout`. Return a fully configured `JJCollectionViewRoundConfigModel` instance with the desired shadow parameters.

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

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

    // Shadow configuration
    model.shadowColor   = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.4];
    model.shadowOffset  = CGSizeMake(0, 2);
    model.shadowOpacity = 0.8;
    model.shadowRadius  = 6.0;

    return model;
}

```

This implementation mirrors the example found in `SecondViewController.m` within the library's example project.

### Available Shadow Parameters

The `JJCollectionViewRoundConfigModel` class defined in [`JJCollectionViewRoundConfigModel.h`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/JJCollectionViewRoundConfigModel.h) exposes four Core Animation shadow properties:

- **shadowColor** – The color of the shadow (converted to `CGColor` internally)
- **shadowOffset** – A `CGSize` specifying the shadow's displacement from the view
- **shadowOpacity** – A float between 0.0 and 1.0 controlling shadow transparency
- **shadowRadius** – The blur radius used to render the shadow

## Internal Implementation: Applying Shadows to Section Backgrounds

When the layout engine prepares section backgrounds, it calls `toChangeCollectionReusableViewRoundInfoWithLayoutAttributes:` in `JJCollectionViewRoundFlowLayout.m` to apply the model's properties to the reusable view's layer.

The shadow application includes iOS 13+ compatibility for dynamic colors:

```objc
// Inside JJCollectionViewRoundFlowLayout.m
if (attr.myConfigModel) {
    JJCollectionViewRoundConfigModel *model = attr.myConfigModel;
    UIView *view = self;
    
    // Shadow color with trait collection resolution for iOS 13+
    if (@available(iOS 13.0, *)) {
        view.layer.shadowColor = [model.shadowColor resolvedColorWithTraitCollection:self.traitCollection].CGColor;
    } else {
        view.layer.shadowColor = model.shadowColor.CGColor;
    }
    
    view.layer.shadowOffset   = model.shadowOffset;
    view.layer.shadowOpacity  = model.shadowOpacity;
    view.layer.shadowRadius   = model.shadowRadius;
}

```

This direct layer manipulation ensures optimal performance by avoiding additional shadow views or image-based shadows.

## Summary

- **JJCollectionViewRoundFlowLayout** provides built-in support for applying shadow effects to collection view section backgrounds through the `JJCollectionViewRoundConfigModel` configuration object.
- Configure shadow properties (`shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`) in the delegate method `collectionView:layout:configModelForSectionAtIndex:`.
- The layout automatically applies these properties to the section background view's Core Animation layer in `JJCollectionViewRoundFlowLayout.m`, with full support for iOS 13+ dynamic color resolution.
- No manual view hierarchy manipulation is required—shadows render directly on the reusable background views managed by the layout.

## Frequently Asked Questions

### How do I enable shadow effects for specific sections only?

Return `nil` from `collectionView:layout:configModelForSectionAtIndex:` for sections that should not display shadows, or create a model with `shadowOpacity` set to `0.0`. The layout only applies shadow properties when a valid configuration model exists for that section index.

### Does JJCollectionViewRoundFlowLayout support iOS 13 dark mode shadows?

Yes. The implementation in `JJCollectionViewRoundFlowLayout.m` uses `resolvedColorWithTraitCollection:` when running on iOS 13 or later, ensuring that dynamic colors set in `JJCollectionViewRoundConfigModel` correctly resolve to appropriate shadow colors for the current trait collection, including dark mode.

### What is the performance impact of adding shadows to collection view sections?

The library applies shadows directly to the Core Animation layer properties of reusable background views rather than creating additional shadow views or using image-based shadows. This approach leverages hardware acceleration and minimizes memory overhead, making it suitable for collection views with many sections.

### Can I animate shadow property changes when sections update?

While the layout applies shadow properties during layout passes, you can trigger animations by invalidating the layout with `invalidateLayout` or by returning updated `JJCollectionViewRoundConfigModel` instances with different shadow values. For smooth transitions, consider wrapping layout invalidation in a `UIView` animation block or using `UICollectionView` batch updates.