我想在UICollectionView为我们的新应用制作2pt黑色分隔符。我们的应用程序截图如下。我们无法使用UITableView，因为我们有自定义插入/删除动画，滚动和视差效果等。
我从三个想法开始如何制作它：
minimumLineSpacing的纯黑色背景，因此我们将在细胞之间的空间中看到背景前两个变体被拒绝，因为意识形态不一致，自定义动画和收集下面的内容。我也已经有了自定义布局。
我将用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
说布局使用自定义装饰。还要在单元格之间建立行间距。
UICollectionViewFlowLayout* layout = (UICollectionViewFlowLayout*) self.newsCollection.collectionViewLayout;
[layout registerClass:[FLCollectionSeparator class] forDecorationViewOfKind:@"Separator"];
layout.minimumLineSpacing = 2;
在自定义UICollectionViewFlowLayout子类中，我们应该从UICollectionViewLayoutAttributes返回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];
}
对于可见的rect，我们应返回可见的装饰索引路径。
- (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;
}
我们也应该实施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;
}
有时我发现这个解决方案给出了装饰外观的视觉故障，这是通过实施initialLayoutAttributesForAppearingDecorationElementOfKind来解决的。
- (UICollectionViewLayoutAttributes *)initialLayoutAttributesForAppearingDecorationElementOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)decorationIndexPath {
UICollectionViewLayoutAttributes *layoutAttributes = [self layoutAttributesForDecorationViewOfKind:elementKind atIndexPath:decorationIndexPath];
return layoutAttributes;
}
就这样。没有太多的代码，但做得对。
Anton的出色建议，但我认为FlowLayout子类中的实现可以更简单。因为 - （NSArray *）layoutAttributesForElementsInRect：（CGRect）rect的超级实现已经返回包括它们的frame和indexPath的单元格的布局属性，所以你有足够的信息来通过仅覆盖此方法并内省单元格布局来计算分隔符的帧。属性：
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
NSArray *layoutAttributesArray = [super layoutAttributesForElementsInRect:rect];
CGFloat lineWidth = self.minimumLineSpacing;
NSMutableArray *decorationAttributes = [[NSMutableArray alloc] initWithCapacity:layoutAttributesArray.count];
for (UICollectionViewLayoutAttributes *layoutAttributes in layoutAttributesArray) {
//Add separator for every row except the first
NSIndexPath *indexPath = layoutAttributes.indexPath;
if (indexPath.item > 0) {
UICollectionViewLayoutAttributes *separatorAttributes = [UICollectionViewLayoutAttributes layoutAttributesForDecorationViewOfKind:kCellSeparatorKind withIndexPath:indexPath];
CGRect cellFrame = layoutAttributes.frame;
//In my case I have a horizontal grid, where I need vertical separators, but the separator frame can be calculated as needed
//e.g. top, or both top and left
separatorAttributes.frame = CGRectMake(cellFrame.origin.x - lineWidth, cellFrame.origin.y, lineWidth, cellFrame.size.height);
separatorAttributes.zIndex = 1000;
[decorationAttributes addObject:separatorAttributes];
}
}
return [layoutAttributesArray arrayByAddingObjectsFromArray:decorationAttributes];
}
Swift中的快速解决方案
1.创建CustomFlowLayout.swift文件并粘贴下一个代码
import UIKit
private let separatorDecorationView = "separator"
final class CustomFlowLayout: UICollectionViewFlowLayout {
override func awakeFromNib() {
super.awakeFromNib()
register(SeparatorView.self, forDecorationViewOfKind: separatorDecorationView)
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let layoutAttributes = super.layoutAttributesForElements(in: rect) ?? []
let lineWidth = self.minimumLineSpacing
var decorationAttributes: [UICollectionViewLayoutAttributes] = []
// skip first cell
for layoutAttribute in layoutAttributes where layoutAttribute.indexPath.item > 0 {
let separatorAttribute = UICollectionViewLayoutAttributes(forDecorationViewOfKind: separatorDecorationView,
with: layoutAttribute.indexPath)
let cellFrame = layoutAttribute.frame
separatorAttribute.frame = CGRect(x: cellFrame.origin.x,
y: cellFrame.origin.y - lineWidth,
width: cellFrame.size.width,
height: lineWidth)
separatorAttribute.zIndex = Int.max
decorationAttributes.append(separatorAttribute)
}
return layoutAttributes + decorationAttributes
}
}
private final class SeparatorView: UICollectionReusableView {
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = .red
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) {
self.frame = layoutAttributes.frame
}
}
2.设置自定义流程
在界面构建器中，选择您的UICollectionViewFlow并设置我们的新类名CustomFlowLayout
3.更改分隔符颜色
在SeparatorView中，您可以更改init中分隔符的颜色
4.更改分隔符的高度
你可以用两种不同的方式做到这一点
Min Spacing for Lines要么
minimumLineSpacing的值
override func awakeFromNib() {
super.awakeFromNib()
register(SeparatorView.self, forDecorationViewOfKind: separatorDecorationView)
minimumLineSpacing = 2 }
谢谢，Anton和Werner，都帮助了我 - 我已经帮助我制作拖放解决方案，作为UICollectionView的一个类别，我想我会分享结果：
UICollectionView + Separators.h
#import <UIKit/UIKit.h>
@interface UICollectionView (Separators)
@property (nonatomic) BOOL sep_useCellSeparators;
@property (nonatomic, strong) UIColor *sep_separatorColor;
@end
UICollectionView + Separators.m
#import "UICollectionView+Separators.h"
@import ObjectiveC;
#pragma mark -
#pragma mark -
@interface UICollectionViewLayoutAttributes (SEPLayoutAttributes)
@property (nonatomic, strong) UIColor *sep_separatorColor;
@end
@implementation UICollectionViewLayoutAttributes (SEPLayoutAttributes)
- (void)setSep_separatorColor:(UIColor *)sep_separatorColor
{
objc_setAssociatedObject(self, @selector(sep_separatorColor), sep_separatorColor, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
- (UIColor *)sep_separatorColor
{
return objc_getAssociatedObject(self, @selector(sep_separatorColor));
}
@end
#pragma mark -
#pragma mark -
@interface SEPCollectionViewCellSeparatorView : UICollectionReusableView
@end
@implementation SEPCollectionViewCellSeparatorView
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
self.backgroundColor = [UIColor blackColor];
}
return self;
}
- (void)applyLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes
{
self.frame = layoutAttributes.frame;
if (layoutAttributes.sep_separatorColor != nil)
{
self.backgroundColor = layoutAttributes.sep_separatorColor;
}
}
@end
#pragma mark -
#pragma mark -
static NSString *const kCollectionViewCellSeparatorReuseId = @"kCollectionViewCellSeparatorReuseId";
@implementation UICollectionViewFlowLayout (SEPCellSeparators)
#pragma mark - Setters/getters
- (void)setSep_separatorColor:(UIColor *)sep_separatorColor
{
objc_setAssociatedObject(self, @selector(sep_separatorColor), sep_separatorColor, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
[self invalidateLayout];
}
- (UIColor *)sep_separatorColor
{
return objc_getAssociatedObject(self, @selector(sep_separatorColor));
}
- (void)setSep_useCellSeparators:(BOOL)sep_useCellSeparators
{
if (self.sep_useCellSeparators != sep_useCellSeparators)
{
objc_setAssociatedObject(self, @selector(sep_useCellSeparators), @(sep_useCellSeparators), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
[self registerClass:[SEPCollectionViewCellSeparatorView class] forDecorationViewOfKind:kCollectionViewCellSeparatorReuseId];
[self invalidateLayout];
}
}
- (BOOL)sep_useCellSeparators
{
return [objc_getAssociatedObject(self, @selector(sep_useCellSeparators)) boolValue];
}
#pragma mark - Method Swizzling
+ (void)load
{
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
Class class = [self class];
SEL originalSelector = @selector(layoutAttributesForElementsInRect:);
SEL swizzledSelector = @selector(swizzle_layoutAttributesForElementsInRect:);
Method originalMethod = class_getInstanceMethod(class, originalSelector);
Method swizzledMethod = class_getInstanceMethod(class, swizzledSelector);
BOOL didAddMethod =
class_addMethod(class,
originalSelector,
method_getImplementation(swizzledMethod),
method_getTypeEncoding(swizzledMethod));
if (didAddMethod) {
class_replaceMethod(class,
swizzledSelector,
method_getImplementation(originalMethod),
method_getTypeEncoding(originalMethod));
} else {
method_exchangeImplementations(originalMethod, swizzledMethod);
}
});
}
- (NSArray<UICollectionViewLayoutAttributes *> *)swizzle_layoutAttributesForElementsInRect:(CGRect)rect
{
NSArray *layoutAttributesArray = [self swizzle_layoutAttributesForElementsInRect:rect];
if (self.sep_useCellSeparators == NO)
{
return layoutAttributesArray;
}
CGFloat lineSpacing = self.minimumLineSpacing;
NSMutableArray *decorationAttributes = [[NSMutableArray alloc] initWithCapacity:layoutAttributesArray.count];
for (UICollectionViewLayoutAttributes *layoutAttributes in layoutAttributesArray)
{
NSIndexPath *indexPath = layoutAttributes.indexPath;
if (indexPath.item > 0)
{
id <UICollectionViewDelegateFlowLayout> delegate = (id <UICollectionViewDelegateFlowLayout>)self.collectionView.delegate;
if ([delegate respondsToSelector:@selector(collectionView:layout:minimumLineSpacingForSectionAtIndex:)])
{
lineSpacing = [delegate collectionView:self.collectionView layout:self minimumLineSpacingForSectionAtIndex:indexPath.section];
}
UICollectionViewLayoutAttributes *separatorAttributes = [UICollectionViewLayoutAttributes layoutAttributesForDecorationViewOfKind:kCollectionViewCellSeparatorReuseId withIndexPath:indexPath];
CGRect cellFrame = layoutAttributes.frame;
if (self.scrollDirection == UICollectionViewScrollDirectionHorizontal)
{
separatorAttributes.frame = CGRectMake(cellFrame.origin.x - lineSpacing, cellFrame.origin.y, lineSpacing, cellFrame.size.height);
}
else
{
separatorAttributes.frame = CGRectMake(cellFrame.origin.x, cellFrame.origin.y - lineSpacing, cellFrame.size.width, lineSpacing);
}
separatorAttributes.zIndex = 1000;
separatorAttributes.sep_separatorColor = self.sep_separatorColor;
[decorationAttributes addObject:separatorAttributes];
}
}
return [layoutAttributesArray arrayByAddingObjectsFromArray:decorationAttributes];
}
@end
#pragma mark -
#pragma mark -
@implementation UICollectionView (Separators)
- (UICollectionViewFlowLayout *)sep_flowLayout
{
if ([self.collectionViewLayout isKindOfClass:[UICollectionViewFlowLayout class]])
{
return (UICollectionViewFlowLayout *)self.collectionViewLayout;
}
return nil;
}
- (void)setSep_separatorColor:(UIColor *)sep_separatorColor
{
[self.sep_flowLayout setSep_separatorColor:sep_separatorColor];
}
- (UIColor *)sep_separatorColor
{
return [self.sep_flowLayout sep_separatorColor];
}
- (void)setSep_useCellSeparators:(BOOL)sep_useCellSeparators
{
[self.sep_flowLayout setSep_useCellSeparators:sep_useCellSeparators];
}
- (BOOL)sep_useCellSeparators
{
return [self.sep_flowLayout sep_useCellSeparators];
}
@end
使用Objective-C运行时和一些调配，单元格分隔符可以添加几行到任何现有的UICollectionView，其布局是/继承自UICollectionViewFlowLayout。
用法示例：
#import "UICollectionView+Separators.h"
...
self.collectionView.sep_useCellSeparators = YES;
self.collectionView.sep_separatorColor = [UIColor blackColor];
几个笔记：
collectionView:layout:minimumLineSpacingForSectionAtIndex:确定每个部分，如果没有实现，则回退到minimumLineSpacing希望能帮助到你
这是Anton Gaenko的版本，但是在C＃中实现，这对Xamarin用户可能有用：
[Register(nameof(FLCollectionSeparator))]
public class FLCollectionSeparator : UICollectionReusableView
{
public FLCollectionSeparator(CGRect frame) : base(frame)
{
this.BackgroundColor = UIColor.Black;
}
public FLCollectionSeparator(IntPtr handle) : base(handle)
{
this.BackgroundColor = UIColor.Black;
}
public override void ApplyLayoutAttributes(UICollectionViewLayoutAttributes layoutAttributes)
{
this.Frame = layoutAttributes.Frame;
}
}
[Register(nameof(UILinedSpacedViewFlowLayout))]
public class UILinedSpacedViewFlowLayout : UICollectionViewFlowLayout
{
public const string SeparatorAttribute = "Separator";
private static readonly NSString NSSeparatorAttribute = new NSString(SeparatorAttribute);
public UILinedSpacedViewFlowLayout() : base() { this.InternalInit(); }
public UILinedSpacedViewFlowLayout(NSCoder coder) : base (coder) { this.InternalInit(); }
protected UILinedSpacedViewFlowLayout(NSObjectFlag t) : base(t) { this.InternalInit(); }
private void InternalInit()
{
this.RegisterClassForDecorationView(typeof(FLCollectionSeparator), NSSeparatorAttribute);
}
public override UICollectionViewLayoutAttributes[] LayoutAttributesForElementsInRect(CGRect rect)
{
return LayoutAttributesForElementsInRect_internal(rect).ToArray();
}
private IEnumerable<UICollectionViewLayoutAttributes> LayoutAttributesForElementsInRect_internal(CGRect rect)
{
foreach (var baseDecorationAttr in base.LayoutAttributesForElementsInRect(rect))
{
yield return baseDecorationAttr;
}
foreach (var indexPath in this.IndexPathsOfSeparatorsInRect(rect))
{
yield return this.LayoutAttributesForDecorationView(NSSeparatorAttribute, indexPath);
}
}
private IEnumerable<NSIndexPath> IndexPathsOfSeparatorsInRect(CGRect rect)
{
int firstCellIndexToShow = (int)(rect.Y / this.ItemSize.Height);
int lastCellIndexToShow = (int)((rect.Y + rect.Height) / this.ItemSize.Height);
int countOfItems = (int)this.CollectionView.DataSource.GetItemsCount(this.CollectionView, 0);
for (int i = Math.Max(firstCellIndexToShow, 0); i <= lastCellIndexToShow; i++)
{
if (i < countOfItems)
{
yield return NSIndexPath.FromItemSection(i, 0);
}
}
}
public override UICollectionViewLayoutAttributes LayoutAttributesForDecorationView(NSString kind, NSIndexPath indexPath)
{
UICollectionViewLayoutAttributes layoutAttributes = base.LayoutAttributesForDecorationView(kind, indexPath);
var decorationOffset = (indexPath.Row + 1) * this.ItemSize.Height + indexPath.Row * this.MinimumLineSpacing + this.HeaderReferenceSize.Height;
layoutAttributes = UICollectionViewLayoutAttributes.CreateForDecorationView(kind, indexPath);
layoutAttributes.Frame = new CGRect(0, decorationOffset, this.CollectionViewContentSize.Width, this.MinimumLineSpacing);
layoutAttributes.ZIndex = 1000;
return layoutAttributes;
}
public override UICollectionViewLayoutAttributes InitialLayoutAttributesForAppearingDecorationElement(NSString elementKind, NSIndexPath decorationIndexPath)
{
return base.InitialLayoutAttributesForAppearingDecorationElement(elementKind, decorationIndexPath);
}
}
在@SlavikVoloshyn中，以编程方式使用此部分的答案：
override func awakeFromNib() {
super.awakeFromNib()
register(SeparatorView.self, forDecorationViewOfKind: separatorDecorationView)
}
需要改为：
override init() {
super.init()
register(SeparatorView.self, forDecorationViewOfKind: separatorDecorationView)
minimumLineSpacing = 2
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}