macos - 如何实现具有自动调整边距的居中项目的 NSCollectionView ？

Question

假设我在 Collection View 中有一个项目，该项目将在 Collection View 的第一行居中。

对于多个项目，所有这些项目都将在 Collection View 中水平分布，并在它们之间留有适当的间距。

如果 Collection View 的大小发生变化，项目之间的间距将同时更改以适应 Collection View 的新大小。

NSCollectionView 的默认行为将项目左侧对齐，多个项目之间没有间距。

我应该使用 Collection View 层的layoutManager来布局项目吗？

由于我使用数据绑定(bind)来提供项目，因此插入约束似乎并不容易。

Answer 1

最直接的方法是子类化NSCollectionViewFlowLayout。该布局几乎就是您想要的 - 它将始终具有与您要查找的相同的行数和每行项目数:您只希望它们居中。

主要思想是获取 NSCollectionViewFlowLayout 为每个项目提供的框架，从总宽度中减去这些宽度，然后更新框架，使它们均匀分布。

作为概述，步骤如下:

1. 重写 prepareLayout 以计算当前布局中的列数以及每个元素(和边缘)之间所需的空白。此处完成此操作，以便我们只需计算一次值。

2. 覆盖layoutAttributesForElementsInRect。在这里，获取给定矩形中每个项目的 NSCollectionViewLayoutAttributes ，并根据项目所在的列和上面计算的网格间距调整原点的 x 位置。返回新属性。

3. 重写 shouldInvalidateLayoutForBoundsChange 以始终返回 YES，因为我们需要在边界更改时重新计算所有内容。

我有一个工作示例应用程序在这里演示了这一点:

https://github.com/demitri/CenteringCollectionViewFlowLayout

但这是完整的实现:

//
//  CenteredFlowLayout.m
//
//  Created by Demitri Muna on 4/10/19.
//

#import "CenteredFlowLayout.h"
#import <math.h>

@interface CenteredFlowLayout()
{
    CGFloat itemWidth;   // width of item; assuming all items have the same width
    NSUInteger nColumns; // number of possible columns based on item width and section insets
    CGFloat gridSpacing; // after even distribution, space between each item and edges (if row full)
    NSUInteger itemCount;
}
- (NSUInteger)columnForIndexPath:(NSIndexPath*)indexPath;
@end

#pragma mark -

@implementation CenteredFlowLayout

- (void)prepareLayout
{
    [super prepareLayout];

    id<NSCollectionViewDelegateFlowLayout,NSCollectionViewDataSource> delegate = (id<NSCollectionViewDelegateFlowLayout,NSCollectionViewDataSource>)self.collectionView.delegate;
    NSCollectionView *cv = self.collectionView;

    if ([delegate collectionView:cv numberOfItemsInSection:0] == 0)
        return;

    itemCount = [delegate collectionView:cv numberOfItemsInSection:0];

    // Determine the maximum number of items per row (i.e. number of columns)
    //
    // Get width of first item (assuming all are the same)
    // Get the attributes returned by NSCollectionViewFlowLayout, not our method override.
    NSUInteger indices[] = {0,0};
    NSCollectionViewLayoutAttributes *attr = [super layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathWithIndexes:indices length:2]];
    itemWidth = attr.size.width;

    NSEdgeInsets insets;
    if ([delegate respondsToSelector:@selector(collectionView:layout:insetForSectionAtIndex:)])
        insets = [delegate collectionView:cv layout:self insetForSectionAtIndex:0];
    else
        insets = self.sectionInset;

    // calculate the number of columns that can fit excluding minimumInteritemSpacing:
    nColumns = floor((cv.frame.size.width - insets.left - insets.right) / itemWidth);
    // is there enough space for minimumInteritemSpacing?
    while ((cv.frame.size.width
            - insets.left - insets.right
            - (nColumns*itemWidth)
            - (nColumns-1)*self.minimumInteritemSpacing) < 0) {
        if (nColumns == 1)
            break;
        else
            nColumns--;
    }

    if (nColumns > itemCount)
        nColumns = itemCount; // account for a very wide window and few items

    // Calculate grid spacing
    // For a centered layout, all spacing (left inset, right inset, space between items) is equal
    // unless a row has fewer items than columns (but they are still aligned with that grid).
    //
    CGFloat totalWhitespace = cv.bounds.size.width - (nColumns * itemWidth);
    gridSpacing = floor(totalWhitespace/(nColumns+1));  // e.g.:   |  [x]  [x]  |
}

- (NSUInteger)columnForIndexPath:(NSIndexPath*)indexPath
{
    // given an index path in a collection view, return which column in the grid the item appears
    NSUInteger index = [indexPath indexAtPosition:1];
    NSUInteger row = (NSUInteger)floor(index/nColumns);
    return (index - (nColumns * row));
}

- (NSArray<__kindof NSCollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(NSRect)rect
{
    // We do not need to modify the number of rows/columns that NSCollectionViewFlowLayout
    // determines, we just need to adjust the x position to keep them evenly distributed horizontally.

    if (nColumns == 0) // prepareLayout not yet called
        return [super layoutAttributesForElementsInRect:rect];

    NSArray *attributes = [super layoutAttributesForElementsInRect:rect];
    if (attributes.count == 0)
        return attributes;

    for (NSCollectionViewLayoutAttributes *attr in attributes) {
        NSUInteger col = [self columnForIndexPath:attr.indexPath]; // column number
        NSRect newFrame = NSMakeRect(floor((col * itemWidth) + gridSpacing * (1 + col)),
                                     attr.frame.origin.y,
                                     attr.frame.size.width,
                                     attr.frame.size.height);
        attr.frame = newFrame;
    }

    return attributes;
}

- (BOOL)shouldInvalidateLayoutForBoundsChange:(NSRect)newBounds
{
    return YES;
}

@end