JJCollectionViewRoundFlowLayout Cell Alignment Types: System, Left, Center, Right, and Right-Start-R Explained

JJCollectionViewRoundFlowLayout supports five distinct cell alignment types—System, Left, Center, Right, and Right-and-Start-R—that determine how cells are horizontally positioned within each row through either the global collectionCellAlignmentType property or the section-specific alignmentTypeAtSection: delegate method.

JJCollectionViewRoundFlowLayout is a custom UICollectionViewLayout subclass that enhances standard flow layouts with rounded background decorations, shadows, borders, and granular cell alignment control. Unlike the standard UICollectionViewFlowLayout, this library allows developers to override system-defined spacing and align cells to the left, center, right, or staggered right positions. Mastering these JJCollectionViewRoundFlowLayout cell alignment types enables precise visual layouts for tags, form inputs, and asymmetric grids without writing custom layout logic from scratch.

The Five Cell Alignment Types Available in JJCollectionViewRoundFlowLayout

System Alignment (JJCollectionViewFlowLayoutAlignmentTypeBySystem)

This is the default behavior (value 0) defined in JJCollectionViewFlowLayoutConfig.h where cells follow standard UIKit flow layout rules using minimumInteritemSpacing and section insets. When using System alignment, the layout does not modify cell frames in JJCollectionViewRoundFlowLayout+Alignment.m, preserving native UICollectionViewFlowLayout positioning.

Left Alignment (JJCollectionViewFlowLayoutAlignmentTypeByLeft)

Cells are flush with the left edge of the section, respecting the left inset but ignoring minimumInteritemSpacing between the first cell and the boundary. The private helper evaluatedCellSettingFrameByLeftWithWithJJCollectionLayout:layoutAttributesAttrs: in JJCollectionViewRoundFlowLayout+Alignment.m calculates frames starting from the section's left inset position.

Center Alignment (JJCollectionViewFlowLayoutAlignmentTypeByCenter)

Calculates the total width of all cells in a row plus their spacing, then centers the entire group within the available width. This creates equal empty space on both the left and right sides of the content. The implementation uses evaluatedCellSettingFrameByCentertWithWithJJCollectionLayout:layoutAttributesAttrs: (note the "Centert" spelling in the source) to compute the centered offset.

Right Alignment (JJCollectionViewFlowLayoutAlignmentTypeByRight)

Positions cells flush with the right edge of the section, ending at the section's right inset. The layout calculates positions starting from the rightmost edge using evaluatedCellSettingFrameByRightWithWithJJCollectionLayout:layoutAttributesAttrs: and walks backwards through the cells.

Right-and-Start-R Alignment (JJCollectionViewFlowLayoutAlignmentTypeByRightAndStartR)

A specialized right alignment where the first cell of each line starts immediately after the previous line's last cell, effectively ignoring the left inset for staggered or waterfall-style layouts. This creates a continuous right-aligned flow without left-side padding between rows, implemented by reusing the right-align logic but eliminating the left inset reset between lines.

Architecture and Implementation Details

Alignment Type Definition

The alignment options are defined as an NSUInteger enum in JJCollectionViewFlowLayoutConfig.h at lines 11-17:

typedef enum : NSUInteger {
    JJCollectionViewFlowLayoutAlignmentTypeBySystem = 0,
    JJCollectionViewFlowLayoutAlignmentTypeByLeft,
    JJCollectionViewFlowLayoutAlignmentTypeByCenter,
    JJCollectionViewFlowLayoutAlignmentTypeByRight,
    JJCollectionViewFlowLayoutAlignmentTypeByRightAndStartR,
} JJCollectionViewRoundFlowLayoutAlignmentType;

Global Configuration via Property

In JJCollectionViewRoundFlowLayout.h at line 89, the layout exposes the collectionCellAlignmentType property to set the default alignment for all sections:

@property (nonatomic, assign) JJCollectionViewRoundFlowLayoutAlignmentType collectionCellAlignmentType;

When this property remains at the default value (JJCollectionViewFlowLayoutAlignmentTypeBySystem), the layout passes through original attributes without modification.

Per-Section Override via Delegate

For section-specific control, implement the optional delegate method declared in JJCollectionViewRoundFlowLayout.h at line 51:

- (JJCollectionViewRoundFlowLayoutAlignmentType)collectionView:(UICollectionView *)collectionView
                     layout:(UICollectionViewLayout *)collectionViewLayout
               alignmentTypeAtSection:(NSInteger)section;

When implemented, this method overrides the global collectionCellAlignmentType property for the specified section, allowing mixed alignment strategies within a single collection view.

Internal Alignment Calculation

The alignment computation resides in JJCollectionViewRoundFlowLayout+Alignment.m and follows a three-phase process:

1. Grouping by Line: Cells sharing the same vertical position are grouped using groupLayoutAttributesForElementsByYLineWithLayoutAttributesAttrs: (or the X-line variant for horizontal scrolling).

2. Analysis: The analysisCellSettingFrameWithLayoutAttributesAttrs:toChangeAttributesAttrsList:cellAlignmentType: method iterates through grouped cells and delegates to specific alignment algorithms based on the alignment type parameter.

3. Frame Calculation: Private helpers calculate final frames:

   • evaluatedCellSettingFrameByLeftWithWithJJCollectionLayout:layoutAttributesAttrs: for left alignment
   • evaluatedCellSettingFrameByCentertWithWithJJCollectionLayout:layoutAttributesAttrs: for center alignment
   • evaluatedCellSettingFrameByRightWithWithJJCollectionLayout:layoutAttributesAttrs: for right alignment

The Right-and-Start-R type reuses the right-alignment helper but modifies the starting X calculation to continue from the previous line's end position rather than resetting to the section inset.

Practical Implementation Examples

Setting Global Alignment for All Sections

To apply a consistent alignment across the entire collection view, configure the layout property after initialization:

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

Configuring Different Alignments Per Section

Conform to JJCollectionViewDelegateRoundFlowLayout and implement the delegate method to vary alignment by section:

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

Summary

• JJCollectionViewRoundFlowLayout provides five cell alignment types defined in JJCollectionViewFlowLayoutConfig.h: System, Left, Center, Right, and Right-and-Start-R.
• Set global alignment using the collectionCellAlignmentType property in JJCollectionViewRoundFlowLayout.h.
• Override per-section alignment by implementing alignmentTypeAtSection: from the JJCollectionViewDelegateRoundFlowLayout protocol.
• The internal implementation in JJCollectionViewRoundFlowLayout+Alignment.m groups cells by line and recalculates frames using algorithm-specific helper methods without affecting headers, footers, or decoration views.

Frequently Asked Questions

What is the default cell alignment type in JJCollectionViewRoundFlowLayout?

The default value is JJCollectionViewFlowLayoutAlignmentTypeBySystem (0), which preserves standard UICollectionViewFlowLayout behavior without modifying cell frames. This allows the system to handle spacing via minimumInteritemSpacing and section insets.

How do I align cells to the right in specific sections only?

Implement the optional delegate method alignmentTypeAtSection: in your view controller. Return JJCollectionViewFlowLayoutAlignmentTypeByRight for the target sections, and return the global property value or JJCollectionViewFlowLayoutAlignmentTypeBySystem for others. The layout automatically recalculates frames for cells in that section.

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

Right alignment positions cells flush against the right inset of the section, maintaining consistent left spacing for each row. Right-and-Start-R also right-aligns cells but removes the left inset between rows, causing the first cell of a new row to start immediately after the previous row's last cell, creating a staggered waterfall appearance.

Does cell alignment affect collection view scrolling performance?

The alignment calculation in layoutAttributesForElementsInRect: works on copied attributes ([attr copy]) and only affects cell elements, leaving headers, footers, and decoration views untouched. While the grouping and recalculation in JJCollectionViewRoundFlowLayout+Alignment.m add minimal overhead, the impact is generally negligible for standard collection view sizes.

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