# How to Set Different Background Colors for Each Section in JJCollectionViewRoundFlowLayout > Learn how to set different background colors for each section in JJCollectionViewRoundFlowLayout. Implement the delegate method to customize section background colors easily. - Repository: [Kingjiajie_Go/jjcollectionviewroundflowlayout](https://github.com/kingjiajie/jjcollectionviewroundflowlayout) - Tags: how-to-guide - Published: 2026-03-05 --- **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: ```objc 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`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/JJCollectionViewRoundFlowLayout/Classes/JJCollectionViewRoundFlowLayout.h): ```objc - (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: ```objc #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: ```objc - (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`: ```objc #import "ViewController.h" #import @interface ViewController () @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. ```objc - (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.