UICollectionView流布局中的单元格边框

我正在使用UICollectionView布置一组由第一个字母开头的单元格。每个单元应该有一个非常薄的边框，并且节标题应该有上下边框。这是我目前的原型：UICollectionView流布局中的单元格边框

Grid of large equally-sized cells, four to a row, with slim light gray headings between sections. Narrow gray borders show the edges of the cells and dividers.

我实现当前外观上采用了下列规则：

行程的权利，每个单元格的下边缘。
描边每个部分标题的底部边缘。

这是非常接近我想要的东西，但有两个缺陷：

如果章节标题前行不充分，然后沿航向的顶部边框停止短屏幕的右边缘。
在此屏幕截图中不可见，但如果一行为已满，则该行中最后一个单元格的右边框仍会绘制，这对于屏幕边缘看起来有点奇怪。

我最好的解决办法是以某种方式告诉每个单元格，如果它在一个节的最后一行或一行中的最后一个单元格;那么单元格会关闭有问题的边界，部分标题会绘制顶部边框以及底部，并且所有内容都将变得浑浊。不过，我不知道如何实现这一点。

任何想法如何管理，或另一种方式来获得我的目光？我目前正在使用UICollectionViewFlowLayout。

来源

2013-07-11 Brent Royal-Gordon

我结束了继承UICollectionViewFlowLayout和应用一些启发式的流布局算过之后每个单元的属性：

如果center.y等于在部分中的最后一个项目的center.y，所述细胞是在该部分的最后一行。
如果CGRectGetMaxY(frame)等于CGRectGetMaxY(self.collectionView.bounds)，那么该单元就是集合视图的右边缘。

我然后存储这些计算结果中的UICollectionViewLayoutAttributes一个子类，并写了UICollectionViewCell子类，其-applyLayoutAttributes:方法将调整边框的背景视图平局基础上，附加属性。

我已经把整个烂摊子放进了fairly enormous gist，所以你可以看到我做了什么。快乐的黑客攻击。

来源

2013-07-14 03:34:58

我的最好的办法，以解决这个问题是以某种方式告诉每一个细胞，如果它是一节或一排最后一个单元格的最后一排;那么单元格会关闭有问题的边界，部分标题会绘制顶部边框以及底部，并且所有内容都将变得浑浊。不过，我不知道如何实现这一点。

你所描述的或多或少是我在类似场景中所做的。我添加了一个边界属性，我的手机：

typedef NS_OPTIONS(NSInteger, TLGridBorder) { 
    TLGridBorderNone = 0, 
    TLGridBorderTop = 1 << 0, 
    TLGridBorderRight = 1 << 1, 
    TLGridBorderBottom = 1 << 2, 
    TLGridBorderLeft = 1 << 3, 
    TLGridBorderAll = TLGridBorderTop | TLGridBorderRight | TLGridBorderBottom | TLGridBorderLeft, 
}; 

@interface TLGridCellView : UIView 
@property (nonatomic) TLGridBorder border; 
@end

然后，我将边框设置为我的视图控制器的电池配置：

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath 
{ 
    TLGridCellView *cell = ...; 

    if (indexPath.item == self collectionView:collectionView numberOfItemsInSection:indexPath.section - 1) { 
     cell.border = TLGridBorderLeft; 
    } else { 
     cell.border = TLGridBorderLeft | TLGridBorderRight; 
    } 

    return cell; 
}

来源

2013-07-12 15:27:45

我最终做了一件很喜欢这样 - 我只要我把它变成一个要点在这里发表一个答案，所以我可以分享。 –

我用简单的方法解决这个问题。我没有添加寄宿生到单元格，而是添加了一个寄宿生标签到单元格中。对于第一列，标签的框架与单元格相同。对于另一个标签，我将x坐标设置为-0.5以使它们的边框重叠。希望能帮助到你。

下面是代码：

- (UICollectionViewCell *) collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { 
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath]; 

    // Then use it 
    UILabel *label = nil; 
    if (cell.contentView.subviews.count > 0) { 
     label = cell.contentView.subviews[0]; 
    } else { 
     label = [[UILabel alloc] init]; 
    } 
    label.text = @"北京"; 

    [label setTextAlignment:NSTextAlignmentCenter]; 
    [label setFont:[UIFont systemFontOfSize:14]]; 
    [label setCenter:cell.contentView.center]; 


    CGRect frame = label.frame; 
    if (indexPath.row%4 == 0) { 
     frame.origin.x = 0; 
    } else { 
     frame.origin.x = -0.5; 
    } 

    frame.origin.y = 0; 
    frame.size.width = self.collectionView.frame.size.width/4; 
    frame.size.height = self.collectionView.frame.size.height/9; 

    [label setFrame:frame]; 

    if (cell.contentView.subviews.count == 0) { 
     [[cell contentView] addSubview:label]; 
    } 

    label.layer.borderWidth = 0.5; 
    label.layer.borderColor = [[UIColor lightGrayColor] CGColor]; 


    cell.backgroundColor = [UIColor whiteColor]; 

    return cell; 
}

来源

2015-09-04 11:56:03 wgr

UICollectionView流布局中的单元格边框

回答

相关问题