ios - Collectionview 网格在网格的每个角落都有圆角

Question

我正在尝试实现一个简单的由灰线分隔的小矩形单元格组成的网格。此外，我的收藏 View 的四个角应该有圆角。

我发现我不能只在 UICollectionView 层上设置 cornerRadius，因为那样会整个 collectionview 在一个“盒子”中，它在滚动时看起来很奇怪等等。看起来我必须在每个角处绕过 4 个单元格的角。

我遇到了挑战

1. 同时在 4 个角单元格上设置圆角
2. 设置单元格之间的实际边框

我将不胜感激。我设法做到了，但使用图形作为顶部、底部、左侧和右侧的边框，并模拟了圆形边缘。这对我有用，因为我的网格具有固定值，因此我可以计算并计算出每个单元格在网格中的位置。

谢谢!

Answer 1

你可以通过类似的方式设置单元格的边框

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    UICollectionViewCell *cell = [...]

    if (indexPath.row == 0 && indexPath.section == 0) { // top left

        [self roundView:cell.view onCorner:UIRectCornerTopLeft radius:yourRadius];

    } else [...]

}

我建议你使用类似于下一个的函数来圆化单元格的角

- (void)roundView:(UIView *)view onCorner:(UIRectCorner)rectCorner radius:(float)radius {
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds byRoundingCorners:rectCorner cornerRadii:CGSizeMake(radius, radius)];
    CAShapeLayer *maskLayer = [CAShapeLayer new];
    maskLayer.frame = view.bounds;
    maskLayer.path = maskPath.CGPath;
    [view.layer setMask:maskLayer];
}

要设置单元格之间的边框，您应该创建自定义 UICollectionViewFlowLayout 并使用方法设置所有单元格的框架

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect