# JJCollectionViewRoundFlowLayout Cell Alignment Options: A Complete Guide

> Explore JJCollectionViewRoundFlowLayout cell alignment options: System, Left, Center, Right, and Right-and-Start-R. Easily control cell positioning without custom code. Learn more now.

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

---

**JJCollectionViewRoundFlowLayout supports five distinct cell alignment types—System, Left, Center, Right, and Right-and-Start-R—that allow you to control horizontal positioning of cells within each row without writing custom layout logic.**

The `JJCollectionViewRoundFlowLayout` library extends `UICollectionViewFlowLayout` to provide rounded background decorations and precise cell alignment control. Whether you need left-justified tags, centered photo grids, or right-aligned chat bubbles, understanding the available **JJCollectionViewRoundFlowLayout cell alignment options** enables you to implement complex UI designs directly through configuration properties and delegate methods.

## Understanding JJCollectionViewRoundFlowLayout Alignment Types

The alignment behavior is defined by the `JJCollectionViewRoundFlowLayoutAlignmentType` enum in [`JJCollectionViewFlowLayoutConfig.h`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/JJCollectionViewFlowLayoutConfig.h). Each type determines how cells are positioned horizontally within their respective lines.

### System Alignment (Default)

**System alignment** (`JJCollectionViewFlowLayoutAlignmentTypeBySystem`) preserves the standard `UICollectionViewFlowLayout` behavior. Cells are positioned using the system's default spacing calculations based on `minimumInteritemSpacing` and section insets. This is the default value for the `collectionCellAlignmentType` property.

### Left Alignment

**Left alignment** (`JJCollectionViewFlowLayoutAlignmentTypeByLeft`) positions the first cell in each line at the left edge of the section (respecting the left section inset). Subsequent cells follow with standard inter-item spacing. This creates a clean, left-justified appearance ideal for tag clouds or form labels.

### Center Alignment

**Center alignment** (`JJCollectionViewFlowLayoutAlignmentTypeByCenter`) calculates the total width of all cells in a line plus their spacing, then centers the entire group within the collection view bounds. This produces equal empty space on both sides of the content, perfect for photo galleries or icon grids.

### Right Alignment

**Right alignment** (`JJCollectionViewFlowLayoutAlignmentTypeByRight`) aligns cells to the right edge of the section (respecting the right section inset). The layout calculates positions starting from the rightmost edge and places cells backwards. This is commonly used for chat interfaces or right-justified action buttons.

### Right-and-Start-R Alignment

**Right-and-Start-R alignment** (`JJCollectionViewFlowLayoutAlignmentTypeByRightAndStartR`) combines right alignment with a "staggered" start behavior. While cells align to the right edge, the first cell of each line starts immediately after the previous line's last cell, ignoring the left section inset. This creates a Pinterest-style staggered layout with right alignment.

## How to Configure Cell Alignment in JJCollectionViewRoundFlowLayout

You can configure alignment globally for the entire collection view or override it per-section using the delegate protocol defined in [`JJCollectionViewRoundFlowLayout.h`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/JJCollectionViewRoundFlowLayout.h).

### Setting Global Alignment

To apply a uniform alignment across all sections, set the `collectionCellAlignmentType` property after initializing the layout:

```objc
#import "JJCollectionViewRoundFlowLayout.h"

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

UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds
                                                      collectionViewLayout:layout];
collectionView.dataSource = self;
collectionView.delegate = self;

```

If you leave this property at its default value (`JJCollectionViewFlowLayoutAlignmentTypeBySystem`), the layout behaves exactly like a standard `UICollectionViewFlowLayout`.

### Implementing Per-Section Alignment

For mixed alignment requirements, implement the optional delegate method from `JJCollectionViewDelegateRoundFlowLayout`:

```objc
@interface MyViewController () <JJCollectionViewDelegateRoundFlowLayout>
@end

@implementation MyViewController

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

@end

```

When this method returns a non-system value, the layout recalculates cell frames for that specific section using the selected alignment algorithm.

## Technical Implementation Details

The alignment logic resides in the `JJCollectionViewRoundFlowLayout+Alignment` category files. During `layoutAttributesForElementsInRect:`, the layout performs three key operations:

1. **Grouping**: Cells are grouped by line using `groupLayoutAttributesForElementsByYLineWithLayoutAttributesAttrs:` (for vertical scrolling) or the X-line variant for horizontal scrolling.

2. **Analysis**: The `analysisCellSettingFrameWithLayoutAttributesAttrs:toChangeAttributesAttrsList:cellAlignmentType:` method dispatches each group to the appropriate alignment algorithm.

3. **Frame Calculation**: Private helpers like `evaluatedCellSettingFrameByLeftWithWithJJCollectionLayout:layoutAttributesAttrs:` and `evaluatedCellSettingFrameByCentertWithWithJJCollectionLayout:layoutAttributesAttrs:` compute exact `CGRect` values. The layout operates on copied attributes (`[attr copy]`) to avoid mutating the original layout cache.

The "Right-and-Start-R" type specifically modifies the starting X calculation to continue from the previous line's end position rather than resetting to the section inset, creating the staggered effect.

## Summary

- **JJCollectionViewRoundFlowLayout** provides five alignment types: System, Left, Center, Right, and Right-and-Start-R.
- Set global alignment via the `collectionCellAlignmentType` property in [`JJCollectionViewRoundFlowLayout.h`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/JJCollectionViewRoundFlowLayout.h).
- Override per-section alignment by implementing `alignmentTypeAtSection:` from `JJCollectionViewDelegateRoundFlowLayout`.
- Alignment calculations occur in `JJCollectionViewRoundFlowLayout+Alignment.m`, grouping cells by line and applying geometric transformations.
- All alignment types respect section insets except Right-and-Start-R, which staggers lines by continuing from the previous line's end position.

## Frequently Asked Questions

### How do I center cells horizontally in a JJCollectionViewRoundFlowLayout?

Set the `collectionCellAlignmentType` property to `JJCollectionViewFlowLayoutAlignmentTypeByCenter` on your layout instance. This calculates the total width of cells in each row and centers the group within the available space, creating equal margins on both sides.

### Can I use different alignments for different sections in the same collection view?

Yes. Implement the optional delegate method `collectionView:layout:alignmentTypeAtSection:` from the `JJCollectionViewDelegateRoundFlowLayout` protocol. Return the desired alignment type for each section index. If you don't implement this method, the layout uses the global `collectionCellAlignmentType` value for all sections.

### What is the difference between Right and Right-and-Start-R alignment?

**Right alignment** positions cells flush against the right section inset, with each new line starting at the left inset (standard row behavior). **Right-and-Start-R alignment** also right-aligns cells, but the first cell of each subsequent line starts immediately after the previous line's last cell, ignoring the left inset. This creates a staggered, Pinterest-style layout while maintaining right alignment.

### Where are the alignment calculations performed in the source code?

The alignment logic is implemented in the `JJCollectionViewRoundFlowLayout+Alignment` category, specifically in `JJCollectionViewRoundFlowLayout+Alignment.m`. Key methods include `groupLayoutAttributesForElementsByYLineWithLayoutAttributesAttrs:` for grouping cells by row, and `evaluatedCellSettingFrameByLeftWithWithJJCollectionLayout:layoutAttributesAttrs:` (and similar methods for center and right) for calculating final cell frames.