单元格在UICollectionView中排序 [英] Cells order in UICollectionView

问题描述

我需要使用不同大小的单元格（1x1,2x2,2x1,3x2.5）创建 UICollectionView 。我已经编写代码来添加单元格，具体取决于它们使用的大小 collectionView：layout：sizeForItemAtIndexPath：。

I need to create a UICollectionView with cells of different sizes (1x1, 2x2, 2x1, 3x2.5). I've already code to add cells depending on which size they are using collectionView:layout:sizeForItemAtIndexPath:.

这是预期的结果（单元格1和3必须位于单元格2的左侧）：

Here is expected result (cells 1 and 3 have to be on the left of cell 2) :

但目前的结果是：

But current result is :

我的（丑陋的）当前代码是（self.cellSize =屏幕宽度/ 3）：

My (ugly) current code is (self.cellSize = screen width / 3) :

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {

    CGFloat size = self.cellSize;

    if (indexPath.item == 0) {
        return CGSizeMake(self.cellSize * 3.f, self.cellSize * 2.5f);
    }

    if (indexPath.item == 1) {
        return CGSizeMake(self.cellSize, self.cellSize);
    }

    if (indexPath.item == 2) {
        return CGSizeMake(self.cellSize * 2.f, self.cellSize * 2.f);
    }

    if (indexPath.item == 3) {
        return CGSizeMake(self.cellSize, self.cellSize);
    }

    if (indexPath.item == 4) {
        return CGSizeMake(self.cellSize * 2.f, self.cellSize);
    }

    if (indexPath.item == 5) {
        return CGSizeMake(self.cellSize, self.cellSize);
    }

    if (indexPath.item == 6) {
        return CGSizeMake(self.cellSize, self.cellSize);
    }

    if (indexPath.item == 7) {
        return CGSizeMake(self.cellSize * 2.f, self.cellSize);
    }

    if (indexPath.item == 8) {
        return CGSizeMake(self.cellSize * 3.f, self.cellSize * 2.5f);
    }

    return CGSizeMake(size, size);
}

有没有办法指定单元格3必须高于单元格1，但是在单元格2的左边？

Is there a way to specify that cell 3 has to be above cell 1, but on left of cell 2 ?

我不想做一个不会改变的静态布局，因为将来每个单元格的大小可能不同。例如，单元格2可以是2x1大小...

I don't want to do a static layout that will not change because each cell could be of different size in future. For example, cell 2 could be 2x1 sized ...

这是最好的方法吗？我期望指定 UICollectionViewLayout 一个流程（如从顶部），但它不能像那样......

Which is the best approach to do that ? I was expecting to specify to UICollectionViewLayout a flow (like "from top"), but it doesn't work like that ...

推荐答案

通过继承UICollectionViewLayout的示例示例。
所有值都是硬编码的，只是为了明确它背后的逻辑。当然，这可以进行优化。

A sample example by subclassing UICollectionViewLayout. All values are hard coded, just to explicit the logic behind it. Of course, that could be optimized.

@interface CustomCollectionViewLayout ()

@property (nonatomic, strong) NSMutableDictionary *cellLayouts;
@property (nonatomic, assign) CGSize              unitSize;

@end

@implementation CustomCollectionViewLayout


-(id)initWithSize:(CGSize)size
{
  self = [super init];
  if (self)
  {
    _unitSize = CGSizeMake(size.width/3,150);
    _cellLayouts = [[NSMutableDictionary alloc] init];
  }
  return self;
}
-(void)prepareLayout
{

  for (NSInteger i = 0; i < [[self collectionView] numberOfItemsInSection:0]; i ++)
  {
    NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    CGRect frame;
    switch ([indexPath item])
    {
      case 0:
        frame = CGRectMake(0, 0, _unitSize.width*3, _unitSize.height*2.5);
        break;
      case 1:
        frame = CGRectMake(0, _unitSize.height*2.5, _unitSize.width, _unitSize.height);
        break;
      case 2:
        frame = CGRectMake(_unitSize.width, _unitSize.height*2.5, _unitSize.width*2, _unitSize.height*2);
        break;
      case 3:
        frame = CGRectMake(0, _unitSize.height*2.5+_unitSize.height, _unitSize.width, _unitSize.height);
        break;
      case 4:
        frame = CGRectMake(0, _unitSize.height*2.5+_unitSize.height+_unitSize.height, _unitSize.width*2, _unitSize.height);
        break;
      case 5:
        frame = CGRectMake(_unitSize.width*2, _unitSize.height*2.5+_unitSize.height+_unitSize.height, _unitSize.width, _unitSize.height);
        break;
      case 6:
        frame = CGRectMake(0, _unitSize.height*2.5+_unitSize.height+_unitSize.height+_unitSize.height, _unitSize.width, _unitSize.height);
        break;
      case 7:
        frame = CGRectMake(_unitSize.width, _unitSize.height*2.5+_unitSize.height+_unitSize.height+_unitSize.height, _unitSize.width*2, _unitSize.height);
        break;
      case 8:
        frame = CGRectMake(0, _unitSize.height*2.5+_unitSize.height+_unitSize.height+_unitSize.height+_unitSize.height, _unitSize.width*3, _unitSize.height*2.5);
        break;
      default:
        frame = CGRectZero;
        break;
    }
    [attributes setFrame:frame];
    [[self cellLayouts] setObject:attributes forKey:indexPath];
  }
}

-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
  NSMutableArray *retAttributes = [[NSMutableArray alloc] init];
  for (NSIndexPath *anIndexPath in [self cellLayouts])
  {
    UICollectionViewLayoutAttributes *attributes = [self cellLayouts][anIndexPath];
    if (CGRectIntersectsRect(rect, [attributes frame]))
    {
      [retAttributes addObject:attributes];
    }
  }
  return retAttributes;
}

-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{

  return [self cellLayouts][indexPath];
}

-(CGSize)collectionViewContentSize
{
  return CGSizeMake(_unitSize.width*3, _unitSize.height*9);
}

@end

然后，你只需要call：

Then, you just have to call :

CustomCollectionViewLayout *layout = [[CustomCollectionViewLayout alloc] initWithSize:self.myCollectionView.bounds.frame.size];
[self.myCollectionView setCollectionViewLayout:layout];

渲染：

这篇关于单元格在UICollectionView中排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！