Question

所以基本上我的问题是我的uicollectionview的单元格是从上到下排序，而不是从左到右排序。

This is what it looks like -
[1][4][7]
[2][5][8]
[3][6][9]

This is what i want -
[1][2][3]
[4][5][6]
[7][8][9]

另一个问题是当我水平滚动而不是将页面移动完整的320点时。它只移动到足以适合视图中的下一个单元格。

this is what it looks like -
    [2][3][10]
    [5][6][  ]
    [8][9][  ]

this is what i want -
    [10][ ][ ]
    [  ][ ][ ]
    [  ][ ][ ]

我希望水平渲染它会修复它。我还是ios的新手所以请告诉我怎么做，我搜索的所有tuts都不是我的确切问题或者已经过时了。

Answer 1

这是我的解决方案，希望它有所帮助：

CELLS_PER_ROW = 4;
CELLS_PER_COLUMN = 5;
CELLS_PER_PAGE = CELLS_PER_ROW * CELLS_PER_COLUMN;

UICollectionViewFlowLayout* flowLayout = (UICollectionViewFlowLayout*)collectionView.collectionViewLayout;
flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
flowLayout.itemSize = new CGSize (size.width / CELLS_PER_ROW - delta, size.height / CELLS_PER_COLUMN - delta);
flowLayout.minimumInteritemSpacing = ..;
flowLayout.minimumLineSpacing = ..;
..

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
                  cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSInteger index = indexPath.row;
    NSInteger page = index / CELLS_PER_PAGE;
    NSInteger indexInPage = index - page * CELLS_PER_PAGE;
    NSInteger row = indexInPage % CELLS_PER_COLUMN;
    NSInteger column = indexInPage / CELLS_PER_COLUMN;

    NSInteger dataIndex = row * CELLS_PER_ROW + column + page * CELLS_PER_PAGE;

    id cellData = _data[dataIndex];
    ...
}

Answer 2

1）如果您在集合视图中使用水平滚动，则订单将与您拥有的一样

[1][4][7]
[2][5][8]
[3][6][9]

如果您想要更改此订单，则必须使用垂直滚动。

2）如果您希望集合视图滚动整页，请从IB或

启用分页

colloctionView.pagingEnabled = YES;

Answer 3

您必须实现CustomLayout才能解决此问题。这是我的解决方案：

/*
    This is what it looks like -
    [1][3] [5][7]
    [2][4] [6][8]

    This is what i want -
    [1][2] [5][6]
    [3][4] [7][8]
*/

#import "AWCustomFlowLayout.h"

CGFloat const kCellWidth = 130.0;
CGFloat const kCellHeight = 170.0;
CGFloat const kCellLineSpacing = 20.0;
CGFloat const kCellInteritemSpacing = 10.0;

@implementation AWCustomFlowLayout

- (instancetype)init {
    self = [super init];
    if (self) {
        self.minimumLineSpacing = kCellLineSpacing;
        self.minimumInteritemSpacing = kCellInteritemSpacing;
        self.itemSize = CGSizeMake(kCellWidth, kCellHeight);
        self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        self.sectionInset = UIEdgeInsetsMake(0, kCellLineSpacing, 0, 0);
    }

    return self;
}

- (UICollectionViewLayoutAttributes*)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
    UICollectionViewLayoutAttributes *attribute = [super layoutAttributesForItemAtIndexPath:indexPath];
    [self modifyLayoutAttribute:attribute];
    return attribute;
}

- (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect{
    NSArray *attributes = [super layoutAttributesForElementsInRect:rect];
    for(UICollectionViewLayoutAttributes *attribute in attributes){
        [self modifyLayoutAttribute:attribute];
    }

    return attributes;
}


- (void)modifyLayoutAttribute:(UICollectionViewLayoutAttributes*)attribute{
    CGRect frame = attribute.frame;

    NSInteger cellX = attribute.frame.origin.x;
    NSInteger cellY = attribute.frame.origin.y;
    NSInteger cellWidth = attribute.frame.size.width;
    NSInteger const firstColumnX = kCellLineSpacing;
    NSInteger const secondColumnX = kCellWidth + kCellLineSpacing*2;
    NSInteger const firstRowY = 0;
    NSInteger const secondRowY = kCellHeight + kCellInteritemSpacing;

    BOOL isFirstColumn = cellX % firstColumnX == 0;
    BOOL isSecondColumn = (cellX+cellWidth) % (secondColumnX+cellWidth) == 0;
    BOOL isFirstRow = cellY == firstRowY;
    BOOL isSecondRow = cellY == secondRowY;

    if (isFirstColumn && isSecondRow) {
        frame.origin.x += secondColumnX-firstColumnX;
        frame.origin.y = firstRowY;
    }
    else if (isSecondColumn && isFirstRow) {
        frame.origin.x -= secondColumnX-firstColumnX;
        frame.origin.y = secondRowY;
    }

    attribute.frame = frame;
}

@end

Answer 4

假设您为每个“页面”使用一个部分，请看这张图片，该图片描述了单元格的构建方式：

因此我们需要以下顺序而不是[0..11]： [0,3,6,9,1,4,7,10,2,5,8,11]。

如果进一步看一下第二个数组，则可以使用页面的列数和行数来重建该数组：

let columns: Int = 4
let rows: Int = 3

var correctRowOrder = [Int]()

for index in 0..<columns {
    let array = Array(0..<rows).map {$0*columns}.map {$0+index}
    correctRowOrder += array
}
    // You can use this one within the cellForItemAt method provided by the collectionview!
    let correctIndexPath = correctRowOrder[indexPath.row]

请记住使用此解决方案的各个部分！

UICollectionView - 水平排序单元格

4 个答案: