ios - Collection View 或 TableView

Question

我正在尝试让一个简单的 Collection View 发挥作用。基本上，我希望 Collection View 与数据库中的表格完全相同，其中包含可以水平滚动的行和列。像这样的事情:

玩家 1 单元 1 单元 2 单元 3 单元 4 ... 单元 20

玩家 2 单元 1 单元 2 单元 3 单元 4 ... 单元 20

<-----------滚动---------------------------->

我使用的是 Collection View ，因此我可以准确确定玩家正在单击的单元格，并且与表格 View 相比，它似乎会给我带来更大的灵活性。

问题是我一生都无法让 Collection View 按我想要的方式显示。单元格垂直堆叠...示例(无法使它们保留在一行中并水平滚动以查看该行的其他列。示例...

玩家 1 单元 1 单元 2 单元 3

单元格 4 单元格 6 单元格 7 ...

玩家 2 单元 1 单元 2 单元 4

单元 4...

我开始认为 Collection View 可能不是一个好的 API，也许我应该简单地使用 TableView 。任何帮助将不胜感激。

Answer 1

这是我的尝试。它有效，但由于这是我第一次尝试自定义布局，我确信可以采取一些措施来改进它。我使用以下代码创建了一个名为 MultipleLineLayout 的 UICollectionViewFlowLayout 子类:

@implementation MultpleLineLayout {
    NSInteger itemWidth;
    NSInteger itemHeight;
}

-(id)init {
    if (self = [super init]) {
        itemWidth = 60;
        itemHeight = 60;
    }
    return self;
}

-(CGSize)collectionViewContentSize {
    NSInteger xSize = [self.collectionView numberOfItemsInSection:0] * (itemWidth + 20) + 60;
    NSInteger ySize = [self.collectionView numberOfSections] * (itemHeight + 20) ;
    return CGSizeMake(xSize, ySize);
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)path {
    UICollectionViewLayoutAttributes* attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:path];
    NSInteger xValue;
    if (path.row == 0) {
        itemWidth = 120;
        attributes.size = CGSizeMake(itemWidth,itemHeight);
        xValue = itemWidth/2 + path.row * (itemWidth +20);
    }else{
        itemWidth = 60;
        attributes.size = CGSizeMake(itemWidth,itemHeight);
        xValue = itemWidth/2 + path.row * (itemWidth +20) + 60;
    }
    NSInteger yValue = itemHeight + path.section * (itemHeight +20);
    attributes.center = CGPointMake(xValue, yValue);
    return attributes;
}


-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect {
    NSInteger minRow =  (rect.origin.x > 0)?  rect.origin.x/(itemWidth +20) : 0; // need to check because bounce gives negative values  for x.
    NSInteger maxRow = rect.size.width/(itemWidth +20) + minRow;
    NSMutableArray* attributes = [NSMutableArray array];
    for(NSInteger i=0 ; i < self.collectionView.numberOfSections; i++) {
        for (NSInteger j=minRow ; j < maxRow; j++) {
            NSIndexPath* indexPath = [NSIndexPath indexPathForItem:j inSection:i];
            [attributes addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
        }
    }
    return attributes;
}

这是 View Controller 中的代码:

#import "ViewController.h"
#import "MultpleLineLayout.h"

@interface ViewController ()
@property (strong,nonatomic) UICollectionView *collectionView;
@property (strong,nonatomic) NSArray *theData;
@end

@implementation ViewController

- (void)viewDidLoad {
    self.theData = @[@[@"Player 1",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20"], @[@"Player 2",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20"],@[@"Player 3",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20"],@[@"Player 4",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11",@"12",@"13",@"14",@"15",@"16",@"17",@"18",@"19",@"20"]];
    MultpleLineLayout *layout = [[MultpleLineLayout alloc] init];
    self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
    self.collectionView.dataSource = self;
    self.collectionView.delegate = self;
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    self.view.backgroundColor = [UIColor blackColor];
    [self.view addSubview:self.collectionView];
    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"Cell"];
    [self.collectionView reloadData];
}


- (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section {
    return [self.theData[section] count];
}

- (NSInteger)numberOfSectionsInCollectionView: (UICollectionView *)collectionView {
    return [self.theData count];
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView  cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [collectionView  dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
    [cell.contentView.subviews.lastObject removeFromSuperview]; //removes the label from a dequeued cell so we can make a new one of the right size.
    UILabel *label;
    if (indexPath.row == 0) {
        label = [[UILabel alloc]initWithFrame:CGRectMake(10, 15, 100, 30)];
    }else{
        label = [[UILabel alloc]initWithFrame:CGRectMake(10, 15, 40, 30)];
    }
    label.backgroundColor = [UIColor yellowColor];
    label.textAlignment = NSTextAlignmentCenter;
    label.text = self.theData[indexPath.section][indexPath.row];
    [cell.contentView addSubview:label];
    cell.backgroundColor = [UIColor orangeColor];
    return cell;
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *item = [collectionView cellForItemAtIndexPath:indexPath];
    NSLog(@"%@",[(UILabel *)item.contentView.subviews.lastObject text]);

}

因此，我的数据被设置为一个数组数组，每个子数组都是一个玩家和他的得分。这种布局似乎确实使每个玩家的单元格保持在水平线上。我将每行的第一个单元格放大以容纳玩家的名字 - 我不确定处理这个较大单元格的最佳方法是什么。我已经对一些数字进行了硬编码，但这可能不是最好的方法。

我欢迎任何改进或修复建议。