How to Set Different Background Colors for Each Section in JJCollectionViewRoundFlowLayout

To set different background colors for each section, implement the collectionView:layout:configModelForSectionAtIndex: delegate method and return a unique JJCollectionViewRoundConfigModel with a distinct backgroundColor for every section index.

JJCollectionViewRoundFlowLayout extends UICollectionViewFlowLayout to render rounded background decoration views behind each section. To set different background colors for each section, you configure these decoration views through a delegate protocol that provides a configuration model specific to each section index.

Understanding the Decoration View Architecture

The layout creates a decoration view (a JJCollectionReusableView instance) for every section in your collection view. The visual properties of this view—including its background color—are controlled by a JJCollectionViewRoundConfigModel object.

According to the source code in JJCollectionViewRoundFlowLayout/Classes/JJCollectionViewRoundFlowLayout.m (lines 85‑95), the layout extracts the backgroundColor from the config model and applies it directly to the decoration view's layer:

if (attr.myConfigModel) {
    JJCollectionViewRoundConfigModel *model = attr.myConfigModel;
    UIView *view = self;
    view.layer.backgroundColor = model.backgroundColor.CGColor;
    // ...
}

Implementing the Delegate Method

To provide different colors per section, conform to the JJCollectionViewDelegateRoundFlowLayout protocol and implement the configuration method declared in JJCollectionViewRoundFlowLayout/Classes/JJCollectionViewRoundFlowLayout.h:

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

Basic Implementation

Create a JJCollectionViewRoundConfigModel instance, set its backgroundColor property based on the section index, and return it:

#pragma mark - JJCollectionViewDelegateRoundFlowLayout

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

    JJCollectionViewRoundConfigModel *model = [[JJCollectionViewRoundConfigModel alloc] init];
    
    // Assign different colors based on section index
    switch (section) {
        case 0:
            model.backgroundColor = [UIColor colorWithRed:0.95 green:0.95 blue:0.95 alpha:1.0]; // Light gray
            break;
        case 1:
            model.backgroundColor = [UIColor colorWithRed:0.80 green:0.90 blue:1.00 alpha:1.0]; // Soft blue
            break;
        case 2:
            model.backgroundColor = [UIColor colorWithRed:0.85 green:1.00 blue:0.85 alpha:1.0]; // Light green
            break;
        default:
            model.backgroundColor = UIColor.whiteColor;
            break;
    }
    
    model.cornerRadius = 8.0;
    return model;
}

Dynamic Color Assignment by Section

You can also derive colors dynamically from your data source:

- (JJCollectionViewRoundConfigModel *)collectionView:(UICollectionView *)collectionView
                                               layout:(UICollectionViewLayout *)collectionViewLayout
                               configModelForSectionAtIndex:(NSInteger)section {
    
    JJCollectionViewRoundConfigModel *model = [[JJCollectionViewRoundConfigModel alloc] init];
    
    // Example: Color based on section category
    NSString *category = self.dataSource[section][@"category"];
    
    if ([category isEqualToString:@"urgent"]) {
        model.backgroundColor = [UIColor colorWithRed:1.0 green:0.9 blue:0.9 alpha:1.0]; // Light red
    } else if ([category isEqualToString:@"completed"]) {
        model.backgroundColor = [UIColor colorWithRed:0.9 green:1.0 blue:0.9 alpha:1.0]; // Light green
    } else {
        model.backgroundColor = [UIColor colorWithWhite:0.95 alpha:1.0]; // Neutral gray
    }
    
    model.cornerRadius = 10.0;
    model.borderWidth = 0.5;
    model.borderColor = [UIColor lightGrayColor];
    
    return model;
}

Complete Working Example

Here is a minimal, copy-paste ready implementation for a view controller using JJCollectionViewRoundFlowLayout:

#import "ViewController.h"
#import <JJCollectionViewRoundFlowLayout/JJCollectionViewRoundFlowLayout.h>

@interface ViewController () <UICollectionViewDataSource, JJCollectionViewDelegateRoundFlowLayout>

@property (nonatomic, strong) UICollectionView *collectionView;
@property (nonatomic, strong) NSArray *sectionColors;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // Define colors for each section
    self.sectionColors = @[
        [UIColor colorWithRed:0.95 green:0.95 blue:0.95 alpha:1.0], // Section 0: Gray
        [UIColor colorWithRed:0.80 green:0.90 blue:1.00 alpha:1.0], // Section 1: Blue
        [UIColor colorWithRed:1.00 green:0.85 blue:0.80 alpha:1.0]  // Section 2: Orange
    ];
    
    // Initialize the layout
    JJCollectionViewRoundFlowLayout *layout = [[JJCollectionViewRoundFlowLayout alloc] init];
    layout.delegate = self;
    
    // Setup collection view
    self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds 
                                             collectionViewLayout:layout];
    self.collectionView.dataSource = self;
    [self.view addSubview:self.collectionView];
}

#pragma mark - JJCollectionViewDelegateRoundFlowLayout

- (JJCollectionViewRoundConfigModel *)collectionView:(UICollectionView *)collectionView
                                               layout:(UICollectionViewLayout *)collectionViewLayout
                               configModelForSectionAtIndex:(NSInteger)section {
    
    JJCollectionViewRoundConfigModel *model = [[JJCollectionViewRoundConfigModel alloc] init];
    
    // Apply color based on section index
    if (section < self.sectionColors.count) {
        model.backgroundColor = self.sectionColors[section];
    } else {
        model.backgroundColor = UIColor.whiteColor;
    }
    
    model.cornerRadius = 8.0;
    return model;
}

#pragma mark - UICollectionViewDataSource

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return self.sectionColors.count;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView 
     numberOfItemsInSection:(NSInteger)section {
    return 5; // Example: 5 items per section
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView 
                  cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" 
                                                                           forIndexPath:indexPath];
    cell.backgroundColor = UIColor.systemBlueColor;
    return cell;
}

@end

Supporting Dark Mode with Dynamic Colors

On iOS 13 and later, you can provide colors that automatically adapt to the current interface style. This is particularly useful when setting different background colors for each section in apps that support Dark Mode.

- (JJCollectionViewRoundConfigModel *)collectionView:(UICollectionView *)collectionView
                                               layout:(UICollectionViewLayout *)collectionViewLayout
                               configModelForSectionAtIndex:(NSInteger)section {
    
    JJCollectionViewRoundConfigModel *model = [[JJCollectionViewRoundConfigModel alloc] init];
    
    if (@available(iOS 13.0, *)) {
        model.backgroundColor = [UIColor colorWithDynamicProvider:^UIColor *(UITraitCollection *trait) {
            // Different colors for each section based on interface style
            if (trait.userInterfaceStyle == UIUserInterfaceStyleDark) {
                switch (section) {
                    case 0: return [UIColor colorWithWhite:0.15 alpha:1.0];
                    case 1: return [UIColor colorWithWhite:0.20 alpha:1.0];
                    default: return [UIColor colorWithWhite:0.10 alpha:1.0];
                }
            } else {
                switch (section) {
                    case 0: return [UIColor colorWithWhite:0.95 alpha:1.0];
                    case 1: return [UIColor colorWithWhite:0.90 alpha:1.0];
                    default: return [UIColor colorWithWhite:0.98 alpha:1.0];
                }
            }
        }];
    } else {
        // Fallback for iOS 12 and earlier
        model.backgroundColor = [UIColor colorWithWhite:0.95 alpha:1.0];
    }
    
    model.cornerRadius = 8.0;
    return model;
}

Summary

• JJCollectionViewRoundFlowLayout renders section backgrounds using decoration views controlled by JJCollectionViewRoundConfigModel objects.
• To set different background colors for each section, implement collectionView:layout:configModelForSectionAtIndex: in your delegate.
• The method receives the section index as a parameter, allowing you to return a unique JJCollectionViewRoundConfigModel with a distinct backgroundColor for every section.
• The layout applies these colors automatically in JJCollectionViewRoundFlowLayout.m (lines 85‑95) by assigning the color's CGColor to the decoration view's layer.

Frequently Asked Questions

How do I change the background color for only one specific section?

Implement the delegate method collectionView:layout:configModelForSectionAtIndex: and check the section index parameter. Return a JJCollectionViewRoundConfigModel with your desired color for the target section, and return a default model (or the standard flow layout behavior) for all other sections.

Can I use gradient backgrounds instead of solid colors?

The standard JJCollectionViewRoundConfigModel only exposes a backgroundColor property. To implement gradients, you would need to subclass JJCollectionReusableView (the decoration view class used by the layout) and override its layout methods to add a CAGradientLayer, then register this custom class as the decoration view in your layout initialization.

Why is my background color not appearing after implementing the delegate method?

Ensure you have set the layout's delegate property to your view controller or data source object. The delegate method will not be called if layout.delegate is nil. Also verify that your view controller conforms to the JJCollectionViewDelegateRoundFlowLayout protocol to avoid compiler warnings that might indicate a missing implementation.

Does this approach work with iOS Dark Mode?

Yes. You can assign a dynamic color created with +[UIColor colorWithDynamicProvider:] to the backgroundColor property of the config model. The decoration view will automatically update its appearance when the trait collection changes, as the layout applies the color directly to the view's layer during each layout pass.

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