# JJCollectionViewRoundFlowLayout Cell Alignment Types: System, Left, Center, Right, and Right-Start-R Explained > Explore JJCollectionViewRoundFlowLayout cell alignment types: System, Left, Center, Right, and Right-Start-R. Control cell positioning globally or per section for precise layout control. - 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 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`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/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`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/JJCollectionViewFlowLayoutConfig.h) at lines 11-17: ```objc typedef enum : NSUInteger { JJCollectionViewFlowLayoutAlignmentTypeBySystem = 0, JJCollectionViewFlowLayoutAlignmentTypeByLeft, JJCollectionViewFlowLayoutAlignmentTypeByCenter, JJCollectionViewFlowLayoutAlignmentTypeByRight, JJCollectionViewFlowLayoutAlignmentTypeByRightAndStartR, } JJCollectionViewRoundFlowLayoutAlignmentType; ``` ### Global Configuration via Property In [`JJCollectionViewRoundFlowLayout.h`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/JJCollectionViewRoundFlowLayout.h) at line 89, the layout exposes the `collectionCellAlignmentType` property to set the default alignment for all sections: ```objc @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`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/JJCollectionViewRoundFlowLayout.h) at line 51: ```objc - (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: ```objc 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: ```objc - (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`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/JJCollectionViewFlowLayoutConfig.h): System, Left, Center, Right, and Right-and-Start-R. - Set global alignment using the `collectionCellAlignmentType` property in [`JJCollectionViewRoundFlowLayout.h`](https://github.com/kingjiajie/jjcollectionviewroundflowlayout/blob/main/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.