我正在尝试在 my 的 s 之间添加s UIView，但我不知道该怎么做。我正在尝试完成这样的事情：UICollectionViewCellUICollectionView
我可能需要编写一个 custom UICollectionViewLayout，但我真的不知道从哪里开始。
问问题
14616 次
4 回答
46
我研究了更多UICollectionViewLayout的工作原理并想出了如何解决它。我有一个UICollectionReusableView名为的子类OrangeView，它将位于我的视图之间，而不是我编写了一个UICollectionViewFlowLayout名为的子类CategoriesLayout来处理我的布局。
抱歉，代码块很大，但它是这样的：
@implementation CategoriesLayout
- (void)prepareLayout {
// Registers my decoration views.
[self registerClass:[OrangeView class] forDecorationViewOfKind:@"Vertical"];
[self registerClass:[OrangeView class] forDecorationViewOfKind:@"Horizontal"];
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind atIndexPath:(NSIndexPath *)indexPath {
// Prepare some variables.
NSIndexPath *nextIndexPath = [NSIndexPath indexPathForItem:indexPath.row+1 inSection:indexPath.section];
UICollectionViewLayoutAttributes *cellAttributes = [self layoutAttributesForItemAtIndexPath:indexPath];
UICollectionViewLayoutAttributes *nextCellAttributes = [self layoutAttributesForItemAtIndexPath:nextIndexPath];
UICollectionViewLayoutAttributes *layoutAttributes = [UICollectionViewLayoutAttributes layoutAttributesForDecorationViewOfKind:decorationViewKind withIndexPath:indexPath];
CGRect baseFrame = cellAttributes.frame;
CGRect nextFrame = nextCellAttributes.frame;
CGFloat strokeWidth = 4;
CGFloat spaceToNextItem = 0;
if (nextFrame.origin.y == baseFrame.origin.y)
spaceToNextItem = (nextFrame.origin.x - baseFrame.origin.x - baseFrame.size.width);
if ([decorationViewKind isEqualToString:@"Vertical"]) {
CGFloat padding = 10;
// Positions the vertical line for this item.
CGFloat x = baseFrame.origin.x + baseFrame.size.width + (spaceToNextItem - strokeWidth)/2;
layoutAttributes.frame = CGRectMake(x,
baseFrame.origin.y + padding,
strokeWidth,
baseFrame.size.height - padding*2);
} else {
// Positions the horizontal line for this item.
layoutAttributes.frame = CGRectMake(baseFrame.origin.x,
baseFrame.origin.y + baseFrame.size.height,
baseFrame.size.width + spaceToNextItem,
strokeWidth);
}
layoutAttributes.zIndex = -1;
return layoutAttributes;
}
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
NSArray *baseLayoutAttributes = [super layoutAttributesForElementsInRect:rect];
NSMutableArray * layoutAttributes = [baseLayoutAttributes mutableCopy];
for (UICollectionViewLayoutAttributes *thisLayoutItem in baseLayoutAttributes) {
if (thisLayoutItem.representedElementCategory == UICollectionElementCategoryCell) {
// Adds vertical lines when the item isn't the last in a section or in line.
if (!([self indexPathLastInSection:thisLayoutItem.indexPath] ||
[self indexPathLastInLine:thisLayoutItem.indexPath])) {
UICollectionViewLayoutAttributes *newLayoutItem = [self layoutAttributesForDecorationViewOfKind:@"Vertical" atIndexPath:thisLayoutItem.indexPath];
[layoutAttributes addObject:newLayoutItem];
}
// Adds horizontal lines when the item isn't in the last line.
if (![self indexPathInLastLine:thisLayoutItem.indexPath]) {
UICollectionViewLayoutAttributes *newHorizontalLayoutItem = [self layoutAttributesForDecorationViewOfKind:@"Horizontal" atIndexPath:thisLayoutItem.indexPath];
[layoutAttributes addObject:newHorizontalLayoutItem];
}
}
}
return layoutAttributes;
}
@end
我还编写了一个类别，其中包含一些方法来检查索引路径是一行中的最后一行、最后一行还是一节中的最后一个：
@implementation UICollectionViewFlowLayout (Helpers)
- (BOOL)indexPathLastInSection:(NSIndexPath *)indexPath {
NSInteger lastItem = [self.collectionView.dataSource collectionView:self.collectionView numberOfItemsInSection:indexPath.section] -1;
return lastItem == indexPath.row;
}
- (BOOL)indexPathInLastLine:(NSIndexPath *)indexPath {
NSInteger lastItemRow = [self.collectionView.dataSource collectionView:self.collectionView numberOfItemsInSection:indexPath.section] -1;
NSIndexPath *lastItem = [NSIndexPath indexPathForItem:lastItemRow inSection:indexPath.section];
UICollectionViewLayoutAttributes *lastItemAttributes = [self layoutAttributesForItemAtIndexPath:lastItem];
UICollectionViewLayoutAttributes *thisItemAttributes = [self layoutAttributesForItemAtIndexPath:indexPath];
return lastItemAttributes.frame.origin.y == thisItemAttributes.frame.origin.y;
}
- (BOOL)indexPathLastInLine:(NSIndexPath *)indexPath {
NSIndexPath *nextIndexPath = [NSIndexPath indexPathForItem:indexPath.row+1 inSection:indexPath.section];
UICollectionViewLayoutAttributes *cellAttributes = [self layoutAttributesForItemAtIndexPath:indexPath];
UICollectionViewLayoutAttributes *nextCellAttributes = [self layoutAttributesForItemAtIndexPath:nextIndexPath];
return !(cellAttributes.frame.origin.y == nextCellAttributes.frame.origin.y);
}
@end
这是最终的结果：
于 2013-04-03T19:39:01.377 回答
0
如果您正在使用节并且布局适合它，则可以使用节页眉和页脚。
但是根据您的插图，您似乎只需要定义 UICollectionViewCell 来包含这些视图。所以，你在哪里注册你的班级：
[collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"Cell"];
将这些边框图像放在 UICollectionView 单元子类中（在上述情况下，“CollectionViewCell”）。这似乎是最简单的方法。
这是我使用的一个：
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
self.restorationIdentifier = @"Cell";
self.backgroundColor = [UIColor clearColor];
self.autoresizingMask = UIViewAutoresizingNone;
const CGFloat borderWidth = 3.0f;
UIView *bgView = [[UIView alloc] initWithFrame:frame];
bgView.layer.borderColor = [UIColor blackColor].CGColor;
bgView.layer.borderWidth = borderWidth;
bgView.layer.cornerRadius = 6.0f;
self.selectedBackgroundView = bgView;
}
return self;
}
于 2013-04-01T19:18:30.333 回答
0
看起来如果您的 collectionView 背景是绿色而 contentView 是白色的，您可以获得在单元格minimumLineSpacing之间有空格的水平线。垂直间隙将是棘手的部分，但如果您对 contentView 有创意并仔细设置minimumInteritemSpacing您可以得到它。
于 2013-04-03T02:47:18.673 回答
-1
哇。其他答案中有很多代码仅用于行之间的分隔线..
这就是我解决它的方法。首先，您需要在单元格内添加行分隔符。确保你一直拖动它，使它比实际的单元格宽度更宽，所以如果你的单元格宽度是 60p，你的分隔线将是 70。
@implementation CollectionViewController
{
NSArray *test;
int currentLocInRow;
}
里面cellForItemAtIndexPath：
if((indexPath.row+1) % 4 == 0)
{
cell.clipsToBounds = YES;
}
else
{
cell.clipsToBounds = NO;
}
currentLocInRow++;
if([test count] - indexPath.row+1 < 4 - currentLocInRow)
{
cell.lineSeparator.alpha = 0;
}
else
{
cell.lineSeparator.alpha = 1;
}
if(currentLocInRow==4)currentLocInRow=0;
如果您想在集合视图的末尾添加一个分隔符，但最后一行可能没有 4 个单元格，您可以添加一个简单的集合可重用视图作为页脚。
于 2013-12-10T13:19:10.143 回答