如何在 UICollectionView 单元格中获得 1 像素宽度的边框？ （提供代码）

Question

如何在 UICollectionView 中获得一个像素完美的一 (1) 像素和边框线（例如制作月历）。问题是细胞相交的地方，它们的边界相交，所以它实际上是 2 个像素（不是 1 个像素）。

因此，这是一个与 CollectionView 布局相关的问题/问题。随着每个单元格放置自己的 1 像素边框的方式上升，当所有单元格以零间距相遇时，整体看起来像 2 像素边框（collectionView 的外边缘除外，它将是 1 像素）

寻求使用什么方法/代码来解决这个问题。

这是我使用的自定义 UICollectionViewCell 类，我在这里使用 drawrect 在单元格上设置了边框。

import UIKit

class GCCalendarCell: UICollectionViewCell {

    @IBOutlet weak var title : UITextField!

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    override func drawRect(rect: CGRect) {
        self.layer.borderWidth = 1
        self.layer.borderColor = UIColor.redColor().CGColor
    }

}

Answer 1

您可以采取一些策略来解决此问题。哪个最好取决于您的布局的一些细节。

选项 1：半边框

在每个项目周围绘制 1/2 所需宽度的边框。这已被建议。它实现了项目之间边框的正确宽度，但集合边缘周围的边框也将是所需宽度的一半。要解决此问题，您可以在整个集合或部分周围绘制边框。

如果您的月份布局仅呈现给定月份中的天数，这意味着每个月都有一个独特的非矩形形状，那么修复边缘边框比它的价值要复杂得多。

选项 2：重叠单元格

在每个项目周围绘制完整边框，但调整框架，使它们重叠一半边框宽度，隐藏冗余。

这是最简单的策略并且效果很好，但请注意以下几点：

• 请注意，布局的外边缘也略有变化。如有必要，对此进行补偿。
• 边框会重叠，因此不能使用半透明边框。
• 如果不是所有边框的颜色都相同，则会丢失一些边缘。如果只有一个单元格具有不同的边框，您可以调整项目的 z-index 以使其位于其他单元格的顶部。

选项 3：手动绘图

完全不用在单元格上使用边框，您可以在容器周围添加边框，然后在超级视图中手动绘制边框。这可以通过覆盖drawRect(_:) 并使用UIBezierPaths 在单元格的间隔处绘制水平和垂直线来完成。这是最手动的选项。它为您提供更多控制权，但工作量更大。

选项 4：在每个单元格中仅绘制一些边框

与其指定图层的边框宽度和边框颜色（在整个视图周围绘制边框），不如选择性地绘制单元格的边缘。例如：每个单元格只能绘制它的底部和右边缘，除非它的上方或右侧没有单元格。

如果您的网格不规则，这可能会再次导致并发症。它还要求每个单元格了解它在网格中的上下文，这需要更多的结构。如果你走这条路，我建议子类化UICollectionViewLayoutAttributes 并添加关于应该绘制哪些边的附加信息。可以通过在drawRect(_:) 中为每个边缘创建UIBezierPath 来再次完成边缘绘制。

Answer 2

我一般用边框宽度除以屏幕比例：

width = 1.0f / [UIScreen mainScreen].scale

Answer 3

使用 nativeScale！

CGFloat width = 1.0f / [UIScreen mainScreen].nativeScale;

Answer 4

关于非常彻底的接受答案，我认为这些方法中的任何一个都不是很干净。为了使它在所有场景中看起来都很好，您将要“手动”绘制网格，但在 drawRect 中这样做不是一个好主意 a) 因为这会在您的单元格 under 下绘制并且b) drawRect 每秒绘制屏幕 60 次，因此您会遇到大型滚动视图的性能问题。

更好的 IMO 是使用 CALayers。使用 CALayer，您可以将网格线拖放到视图上一次，然后它就保留在 GPU 上，因此即使是巨大的网格也可以以 60fps 的速度绘制。我还发现实施更容易、更灵活。这是一个工作示例：

class GridLineCollectionView: UICollectionView {

    private var gridLineContainer: CALayer!
    private var verticalLines = [CALayer]()
    private var horizontalLiines = [CALayer]()

    private var cols: Int {
        return Int(self.contentSize.width / self.itemSize.width)
    }
    private var rows: Int {
        return Int(self.contentSize.height / self.itemSize.height)
    }
    private var colWidth: CGFloat {
        return self.itemSize.width + self.sectionInsets.left + self.sectionInsets.right
    }
    private var rowHeight: CGFloat {
        return self.itemSize.height + self.sectionInsets.top + self.sectionInsets.bottom
    }
    private var itemSize: CGSize {
        return (self.collectionViewLayout as! UICollectionViewFlowLayout).itemSize
    }
    private var sectionInsets: UIEdgeInsets {
        return (self.collectionViewLayout as! UICollectionViewFlowLayout).sectionInset
    }


    override func layoutSubviews() {
        super.layoutSubviews()

        if self.gridLineContainer == nil {
            self.gridLineContainer = CALayer()
            self.gridLineContainer.frame = self.bounds
            self.layer.addSublayer(self.gridLineContainer)
        }

        self.addNecessaryGridLayers()
        self.updateVerticalLines()
        self.updateHorizontalLines()
    }

    private func addNecessaryGridLayers() {
        while self.verticalLines.count < cols - 1 {
            let newLayer = CALayer()
            newLayer.backgroundColor = UIColor.darkGray.cgColor
            self.verticalLines.append(newLayer)
            self.gridLineContainer.addSublayer(newLayer)
        }
        while self.horizontalLiines.count < rows + 1 {
            let newLayer = CALayer()
            newLayer.backgroundColor = UIColor.darkGray.cgColor
            self.horizontalLiines.append(newLayer)
            self.gridLineContainer.addSublayer(newLayer)
        }
    }

    private func updateVerticalLines() {
        for (idx,layer) in self.verticalLines.enumerated() {
            let x = CGFloat(idx + 1) * self.colWidth
            layer.frame = CGRect(x: x, y: 0, width: 1, height: CGFloat(self.rows) * self.rowHeight)
        }
    }

    private func updateHorizontalLines() {
        for (idx,layer) in self.horizontalLiines.enumerated() {
            let y = CGFloat(idx) * self.rowHeight
            layer.frame = CGRect(x: 0, y: y, width: CGFloat(self.cols) * self.colWidth, height: 1)
        }
    }
}

Answer 5

我通过继承UICollectionViewFlowLayout 并利用layoutAttributesForElementsInRect 方法解决了这个问题。有了这个，您可以设置自定义框架属性并允许重叠。这是最基本的例子：

@interface EqualBorderCellFlowLayout : UICollectionViewFlowLayout <UICollectionViewDelegateFlowLayout>

/*! @brief Border width. */
@property (strong, nonatomic) NSNumber *borderWidth;

@end

#import "EqualBorderCellFlowLayout.h"

@interface EqualBorderCellFlowLayout() { }
@end

@implementation EqualBorderCellFlowLayout

- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
    
    NSArray *attributes = [super layoutAttributesForElementsInRect:rect];
    
    for (UICollectionViewLayoutAttributes *attribute in attributes) {
        
        if (self.borderWidth) {
            
            CGFloat origin_x = attribute.frame.origin.x;
            CGFloat origin_y = attribute.frame.origin.y;
            CGFloat width = attribute.frame.size.width;
            CGFloat height = attribute.frame.size.height;
            
            if (attribute.frame.origin.x == 0) {
                width = width + self.borderWidth.floatValue;
            }
            
            height = height + self.borderWidth.floatValue;
            attribute.frame = CGRectMake(origin_x, origin_y, width, height);
            
        }
        
    }
    
    return attributes;
    
}

- (CGFloat)minimumLineSpacing {
    return 0;
}

- (CGFloat)minimumInteritemSpacing {
    return 0;
}

- (UIEdgeInsets)sectionInset {
    return UIEdgeInsetsMake(0, 0, 0, 0);
}

@end

Answer 6

这里的主要挑战是，由于屏幕WIDTH限制，很难提供像素完美的边框/单元格测量值。即，几乎总是存在无法分割的剩余像素。例如，如果你想要一个内边框为 1px 的 3 列网格，屏幕宽度为 375px，则意味着每列宽度必须为 124.333 px，这是不可能的，所以如果向下取整并使用 124px 作为宽度，你将有 1 px 剩余。 （额外的微小像素对设计的影响有多大，这不是很疯狂吗？）

一个选项是选择一个可以为您提供完美数字的边框宽度，但这并不理想，因为您不应该让机会决定您的设计。此外，它可能不会成为面向未来的解决方案。

我研究了在 Instagram 上表现最好的应用程序，正如预期的那样，它们的边框看起来像素完美。我检查了每一列的宽度，结果发现最后一列的宽度不一样，这证实了我的怀疑。对于人眼来说，不可能分辨出网格列是窄还是宽了一个像素，但是当边框宽度不同时，它绝对可见。所以这种方法似乎是最好的

起初我尝试使用单个可重复使用的单元格视图并根据是否是最后一列来更新宽度。这种方法有点工作，但单元格看起来有问题，因为它不适合调整单元格的大小。所以我只是创建了一个额外的可重复使用的单元格，它将放在最后一列以避免调整大小。

首先，设置集合的宽度和间距，并为集合视图单元格注册 2 个可重复使用的标识符

let borderWidth : CGFloat = 1
let columnsCount : Int = 3
let cellWidth = (UIScreen.main.bounds.width - borderWidth*CGFloat(columnsCount-1))/CGFloat(columnsCount)

let layout = UICollectionViewFlowLayout()
layout.estimatedItemSize = CGSize(width: cellWidth, height: cellWidth)
layout.minimumLineSpacing = borderWidth
layout.minimumInteritemSpacing = borderWidth

collectionView = UICollectionView(frame: self.frame, collectionViewLayout: layout)
collectionView.register(CustomCollectionViewCell.self, forCellWithReuseIdentifier: lastReuseIdentifier)
collectionView.register(CustomCollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)

然后创建一个辅助方法来查看某个索引路径的单元格是否在最后一列

func isLastColumn(indexPath: IndexPath) -> Bool {
    return (indexPath.row % columnsCount) == columnsCount-1
}

为您的集合视图更新cellForItemAt 委托方法，以便使用最后一列单元格

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let identifier = isLastColumn(indexPath: indexPath) ? lastReuseIdentifier : reuseIdentifier
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: identifier, for: indexPath)
    return cell
}

最后，以编程方式更新单元格的大小，因此最后一列单元格会占用所有剩余的可用空间

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let width = isLastColumn(indexPath: indexPath) ? UIScreen.main.bounds.width-(cellWidth+borderWidth)*CGFloat(columnsCount -1) : cellWidth
    return CGSize(width: width, height: cellWidth)
}

最终结果应该是这样的（附赠食物图片）：