UICollectionView 自定义行分隔符 [英] UICollectionView custom line separators

问题描述

我想在 UICollectionView 中为我们的新应用制作 2pt 黑色分隔符.我们应用程序的屏幕截图如下.我们不能使用 UITableView，因为我们有自定义插入/删除动画、滚动和视差效果等等.

I wanna making 2pt black separators in UICollectionView for our new app. Screenshot from our app is below. We couldn't use UITableView, because we have custom insert/delete animations, scrolling and parallax effects and so on.

推荐答案

我从三个想法开始:

• 在单元格内实现这些分隔符
• 将纯黑色背景与minimumLineSpacing一起使用，因此我们将在单元格之间的空间中看到背景
• 使用自定义布局并将此分隔符实现为装饰

• implement these separators right inside the cells
• use solid black background with minimumLineSpacing, thus we will see background in spaces between cells
• use custom layout and implement this separators as decorations

前两个变体被拒绝，因为意识形态不一致、自定义动画和内容低于集合.我也已经有了自定义布局.

First two variants were rejected because ideologic inconsistency, custom animations and having content below collection. Also I already have a custom layout.

我将使用 UICollectionViewFlowLayout 的自定义子类来描述这些步骤.

I will describe the steps with a custom subclass of UICollectionViewFlowLayout.

实现自定义UICollectionReusableView子类.

@interface FLCollectionSeparator : UICollectionReusableView

@end

@implementation FLCollectionSeparator

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor blackColor];
    }

    return self;
}

- (void)applyLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes {
    self.frame = layoutAttributes.frame;
}

@end

--2--

说布局使用自定义装饰.还要在单元格之间设置行距.

--2--

Say layout to use custom decorations. Also make line spacing between cells.

UICollectionViewFlowLayout* layout = (UICollectionViewFlowLayout*) self.newsCollection.collectionViewLayout;
[layout registerClass:[FLCollectionSeparator class] forDecorationViewOfKind:@"Separator"];
layout.minimumLineSpacing = 2;

--3--

在自定义 UICollectionViewFlowLayout 子类中，我们应该为 layoutAttributesForElementsInRect 的装饰返回 UICollectionViewLayoutAttributes.

--3--

In custom UICollectionViewFlowLayout subclass we should return UICollectionViewLayoutAttributes for decorations from layoutAttributesForElementsInRect.

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    ... collect here layout attributes for cells ... 

    NSMutableArray *decorationAttributes = [NSMutableArray array];
    NSArray *visibleIndexPaths = [self indexPathsOfSeparatorsInRect:rect]; // will implement below

    for (NSIndexPath *indexPath in visibleIndexPaths) {
        UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForDecorationViewOfKind:@"Separator" atIndexPath:indexPath];
        [decorationAttributes addObject:attributes];
    }

    return [layoutAttributesArray arrayByAddingObjectsFromArray:decorationAttributes];
}

--4--

对于可见的矩形，我们应该返回可见的装饰索引路径.

--4--

For visible rect we should return visible decorations index pathes.

- (NSArray*)indexPathsOfSeparatorsInRect:(CGRect)rect {
    NSInteger firstCellIndexToShow = floorf(rect.origin.y / self.itemSize.height);
    NSInteger lastCellIndexToShow = floorf((rect.origin.y + CGRectGetHeight(rect)) / self.itemSize.height);
    NSInteger countOfItems = [self.collectionView.dataSource collectionView:self.collectionView numberOfItemsInSection:0];

    NSMutableArray* indexPaths = [NSMutableArray new];
    for (int i = MAX(firstCellIndexToShow, 0); i <= lastCellIndexToShow; i++) {
        if (i < countOfItems) {
            [indexPaths addObject:[NSIndexPath indexPathForRow:i inSection:0]];
        }
    }
    return indexPaths;
}

--5--

我们还应该实现 layoutAttributesForDecorationViewOfKind.

- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind atIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewLayoutAttributes *layoutAttributes = [UICollectionViewLayoutAttributes layoutAttributesForDecorationViewOfKind:decorationViewKind withIndexPath:indexPath];
    CGFloat decorationOffset = (indexPath.row + 1) * self.itemSize.height + indexPath.row * self.minimumLineSpacing;
    layoutAttributes.frame = CGRectMake(0.0, decorationOffset, self.collectionViewContentSize.width, self.minimumLineSpacing);
    layoutAttributes.zIndex = 1000;

    return layoutAttributes;
}

--6--

有时我发现这个解决方案会在装饰外观上出现视觉故障，通过实现 initialLayoutAttributesForAppearingDecorationElementOfKind 解决了这个问题.

- (UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingDecorationElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)decorationIndexPath {
    UICollectionViewLayoutAttributes *layoutAttributes =  [self layoutAttributesForDecorationViewOfKind:elementKind atIndexPath:decorationIndexPath];
    return layoutAttributes;
}

就是这样.代码不多，但做得对.

That's all. Not too much code but done right.

这篇关于UICollectionView 自定义行分隔符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！