# Configuring JJCollectionViewRoundConfigModel for Section Styling in Collection Views > Style collection view sections with rounded backgrounds shadows and borders using JJCollectionViewRoundConfigModel and the JJCollectionViewDelegateRoundFlowLayout protocol Learn how to implement configModelForSectionAtIndex for... - Repository: [Kingjiajie_Go/jjcollectionviewroundflowlayout](https://github.com/kingjiajie/jjcollectionviewroundflowlayout) - Tags: how-to-guide - Published: 2026-03-05 --- **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`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/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`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/JJCollectionViewRoundConfigModel.h). - **`JJCollectionViewTouchAnimationConfigModel`**: An optional configuration class for background tap animations, defined in [`JJCollectionViewTouchAnimationConfigModel.h`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/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. ```objc #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: ```objc - (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. ```objc - (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: ```objc JJCollectionViewRoundFlowLayout *layout = [[JJCollectionViewRoundFlowLayout alloc] init]; layout.isCalculateHeader = YES; // Include header view in background layout.isCalculateFooter = YES; // Include footer view in background ``` Per-section control: ```objc - (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: ```objc layout.isDecorationViewTouchAnimationEnable = YES; ``` Then implement the animation delegate method: ```objc - (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.