Question

我正在尝试使用简单的集合视图。基本上我希望集合视图与数据库中的表格完全相同，其中包含行和列，我可以在其中水平滚动。像这样：

玩家1小区1小区2小区3小区4 ...小区20

玩家2小区1小区2小区3小区4 ...小区20

＆lt; ----------- scroll ---------------------------＆gt;

我正在使用集合视图，因此我可以准确确定玩家正在点击哪个单元格，看起来它会给我更大的灵活性而不是桌面视图。

问题是我不能为我的生活获得集合视图来显示我想要的。单元格正在垂直堆叠...示例（无法使它们保持在一行并水平滚动以查看该行的其他列。示例...

玩家1小区1小区2小区3

细胞4细胞6细胞7 ...

玩家2小区1小区2小区4

小区4 ......

我开始认为也许集合视图不是一个好用的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;
}

这是视图控制器中的代码：

#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]);

}

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

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

Answer 2

我个人没有使用过，但似乎在其他SO帖子上推荐：

https://github.com/TheVole/HorizontalTable

也许这可能比UICollectionView更好？

（参见这篇文章：How to make a horizontal UI table view on iPhone?）

祝你好运！

Answer 3

UICollectionView功能强大且易于扩展，因为它增加了一项新功能：UICollectionViewFlowLayout。我担心你无法通过Cocoa中的默认工具获得完美的解决方案，但是在你的情况下将UICollectionViewFlowLayout扩展到新的布局可能是一个蛇布局。

如果有任何帮助，也许你可以看到这个github网址：KMCollectionViewSnakeLayout来获得一些提示。它的风格不是：

Player 1 cell 1 cell 2 cell3

cell 4 cell 6 cell 7 ...

Player 2 cell 1 cell 2 cell4

cell 4...

但是风格如下：

Player 1 cell 1 cell 2 | Player 2 cell 1 cell 2

cell3 cell 4 cell 6    | cell3 cell 4 cell6

cell 7 ...             | cell7

花点时间阅读它或Apple Doc，你会得到很多！

集合视图或表视图

3 个答案: