# Per-Section Cell Alignment Customization in JJCollectionViewRoundFlowLayout: A Complete Guide

> Master per-section cell alignment customization in JJCollectionViewRoundFlowLayout. Implement delegate methods to control layout for each section and enhance your UI.

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

---

**To customize cell alignment per section in JJCollectionViewRoundFlowLayout, implement the delegate method `collectionView:layout:alignmentTypeAtSection:` and return the desired `JJCollectionViewRoundFlowLayoutAlignmentType` enum value for each section.**

JJCollectionViewRoundFlowLayout is a drop-in replacement for `UICollectionViewFlowLayout` that adds rounded background decoration and granular per-section cell alignment capabilities. Available in the [kingjiajie/jjcollectionviewroundflowlayout](https://github.com/kingjiajie/jjcollectionviewroundflowlayout) repository, this layout allows individual sections to use left, center, right, or system-default alignment without affecting other sections.

## How Per-Section Alignment Works in JJCollectionViewRoundFlowLayout

The layout achieves per-section alignment through a delegate protocol that extends the standard UIKit flow layout delegate. The `JJCollectionViewDelegateRoundFlowLayout` protocol defines the method `collectionView:layout:alignmentTypeAtSection:`, which the layout queries for each section during its layout calculation.

The method returns a value from the `JJCollectionViewRoundFlowLayoutAlignmentType` enum defined in [`JJCollectionViewFlowLayoutConfig.h`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/JJCollectionViewFlowLayoutConfig.h):

- `JJCollectionViewFlowLayoutAlignmentTypeBySystem` – Uses the standard UIKit flow layout behavior
- `JJCollectionViewFlowLayoutAlignmentTypeByLeft` – Aligns cells to the left edge of the section
- `JJCollectionViewFlowLayoutAlignmentTypeByCenter` – Centers cells within the section width
- `JJCollectionViewFlowLayoutAlignmentTypeByRight` – Aligns cells to the right edge
- `JJCollectionViewFlowLayoutAlignmentTypeByRightAndStartR` – Right-aligns cells while preserving the original item order (reverse-right alignment)

## Implementing the Delegate Protocol

To enable per-section alignment, conform your view controller or data source to `JJCollectionViewDelegateRoundFlowLayout` and implement the alignment method.

```objc
#pragma mark - JJCollectionViewDelegateRoundFlowLayout

- (JJCollectionViewRoundFlowLayoutAlignmentType)collectionView:(UICollectionView *)collectionView
                                                      layout:(UICollectionViewLayout *)collectionViewLayout
                                         alignmentTypeAtSection:(NSInteger)section {
    switch (section) {
        case 0:
            return JJCollectionViewFlowLayoutAlignmentTypeByLeft;
        case 1:
            return JJCollectionViewFlowLayoutAlignmentTypeByCenter;
        case 2:
            return JJCollectionViewFlowLayoutAlignmentTypeByRight;
        default:
            return JJCollectionViewFlowLayoutAlignmentTypeBySystem;
    }
}

```

When the collection view performs layout, `JJCollectionViewRoundFlowLayout` automatically queries this delegate method for each section and applies the specified alignment algorithm to the cells in that section.

## Alignment Algorithms and Implementation Details

The actual positioning logic resides in `JJCollectionViewRoundFlowLayout+Alignment.m`. The layout processes alignment in three distinct phases:

### Cell Grouping by Y-Center Line

First, the layout groups cells that share the same vertical position. The method `groupLayoutAttributesForElementsByYLineWithLayoutAttributesAttrs:` in `JJCollectionViewRoundFlowLayout+Alignment.m` (lines 30-45) iterates through layout attributes and groups them by their Y-center coordinate, ensuring that cells on the same row are aligned together.

### Alignment Strategy Selection

The method `analysisCellSettingFrameWithLayoutAttributesAttrs:toChangeAttributesAttrsList:cellAlignmentType:` (lines 63-81) determines whether to apply custom alignment or fall back to the system layout. If the alignment type is `BySystem`, it returns immediately; otherwise, it proceeds to the specific alignment implementation.

### Concrete Alignment Helpers

The method `evaluatedAllCellSettingFrameWithLayoutAttributesAttrs:toChangeAttributesAttrsList:cellAlignmentType:` (lines 84-108) dispatches to the concrete alignment routines:

- `evaluatedCellSettingFrameByLeft...` – Calculates the left edge based on section insets and minimum inter-item spacing, then sets `frame.origin.x` for each cell in the row
- `evaluatedCellSettingFrameByCenter...` – Computes the total width of the row content, calculates the center offset, and distributes cells from the center outward
- `evaluatedCellSettingFrameByRight...` – Aligns cells to the right edge of the section, accounting for right section insets

These helpers utilize utility methods from [`JJCollectionViewFlowLayoutUtils.h`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/JJCollectionViewFlowLayoutUtils.h) to retrieve section insets and minimum inter-item spacing values.

## Configuration Options and Fallback Behavior

You can specify a default alignment for all sections by setting the `collectionCellAlignmentType` property on the layout instance:

```objc
JJCollectionViewRoundFlowLayout *layout = [[JJCollectionViewRoundFlowLayout alloc] init];
layout.collectionCellAlignmentType = JJCollectionViewFlowLayoutAlignmentTypeByCenter;

```

When a delegate implements `collectionView:layout:alignmentTypeAtSection:`, the delegate method takes precedence over the global property for that specific section. Sections without a delegate implementation use the value from `collectionCellAlignmentType`, or `JJCollectionViewFlowLayoutAlignmentTypeBySystem` if no value is set.

## Summary

- **JJCollectionViewRoundFlowLayout** extends `UICollectionViewFlowLayout` to support per-section cell alignment and rounded backgrounds.
- Implement `JJCollectionViewDelegateRoundFlowLayout` and override `collectionView:layout:alignmentTypeAtSection:` to specify alignment per section.
- Choose from **left**, **center**, **right**, **reverse-right**, or **system** alignment types defined in [`JJCollectionViewFlowLayoutConfig.h`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/JJCollectionViewFlowLayoutConfig.h).
- The layout groups cells by Y-center line in `JJCollectionViewRoundFlowLayout+Alignment.m`, then applies specific alignment algorithms that calculate frame origins based on section insets and spacing.
- Set `collectionCellAlignmentType` for a global default; delegate methods override this per section.

## Frequently Asked Questions

### How do I left-align cells in only one specific section while keeping others default?

Implement the delegate method `collectionView:layout:alignmentTypeAtSection:` and return `JJCollectionViewFlowLayoutAlignmentTypeByLeft` for the target section index, and `JJCollectionViewFlowLayoutAlignmentTypeBySystem` for all others. The layout automatically applies the specified alignment only to cells in that section while leaving other sections unchanged.

### What is the difference between `ByRight` and `ByRightAndStartR` alignment types?

`JJCollectionViewFlowLayoutAlignmentTypeByRight` aligns cells to the right edge of the section but may reverse the visual order of items depending on the layout calculation. `JJCollectionViewFlowLayoutAlignmentTypeByRightAndStartR` (reverse-right) also aligns to the right edge but explicitly preserves the original item order from the data source, ensuring that the first item appears at the top-left of the right-aligned group.

### Can I use per-section alignment without implementing the delegate protocol?

Yes, but with limitations. You can set the `collectionCellAlignmentType` property on the layout instance to apply a single alignment type to all sections globally. However, to achieve different alignments for different sections (per-section customization), you must implement the `JJCollectionViewDelegateRoundFlowLayout` protocol and provide section-specific logic in `collectionView:layout:alignmentTypeAtSection:`.

### Where does the actual alignment calculation happen in the source code?

The alignment algorithms are implemented in `JJCollectionViewRoundFlowLayout+Alignment.m`. The entry point is `analysisCellSettingFrameWithLayoutAttributesAttrs:toChangeAttributesAttrsList:cellAlignmentType:`, which dispatches to `evaluatedAllCellSettingFrameWithLayoutAttributesAttrs:toChangeAttributesAttrsList:cellAlignmentType:`. This method then calls specific helpers like `evaluatedCellSettingFrameByLeft...`, `...ByCenter...`, and `...ByRight...` to calculate and update the `frame.origin.x` values for each cell based on section insets and spacing values retrieved from `JJCollectionViewFlowLayoutUtils`.