JJCollectionViewRoundFlowLayout Cell Alignment Options: A Complete Guide

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. 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.

Setting Global Alignment

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

#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:

@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.
• 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.

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