在网格的每个角处带有圆角的 Collectionview 网格答案

【问题标题】：Collectionview grid with rounded corners at each corner of the grid在网格的每个角处带有圆角的 Collectionview 网格
【发布时间】：2015-11-02 13:52:09
【问题描述】：

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

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

我遇到了挑战

在 4 个角单元格上设置圆角 WHILST
设置单元格之间的实际边界

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

谢谢！

【问题讨论】：

你的问题解决了吗？你是如何把集合视图单元格的所有角落都修圆的？

标签： ios objective-c uicollectionview rounded-corners

【解决方案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

【讨论】：