收集视图或表格视图

Question

我试图让一个简单的收集视图工作。基本上我希望集合视图完全像一个数据库中的表格，其中可以水平滚动的行和列。事情是这样的：

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

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

< --- -------- scroll --------------------------->

我在使用集合视图，所以我可以确切地确定玩家点击的单元格，看起来它会给我更大的灵活性，而不是tableview。

问题是我不能为我的生活得到集合视图来显示像我想要的。在细胞被垂直堆叠...例子（没有办法让他们留在一个行和水平滚动看到该行。例如另一列...

玩家1个单元1单元2小区3

小区4单元6单元7 ...

玩家2单元1个单元2小区4

单元4 ...

我开始想，也许采集的看法是不是一个很好的API来使用，也许我应该简单地使用tableview。任何帮助将b非常感谢。

Answer 1

我没有用过这个个人，但它似乎是建议对其他SO帖子：

https://github.com/TheVole/HorizontalTable

也许这可能工作比UICollectionView更好？

（看到这个职位也：How to make a horizontal UI table view on iPhone?）

祝你好运！

Answer 2

这是我的尝试。它可以工作，但由于这是我第一次尝试自定义布局，我相信有些事情可以改进。我制成UICollectionViewFlowLayout的子类，称为MultipleLineLayout与此代码：

@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 3

UICollectionView功能强大且易于扩展，因为它增加了一项新功能：UICollectionViewFlowLayout。恐怕你无法得到完美的解决方案，你需要默认在Cocoa中实现，但如果将UICollectionViewFlowLayout扩展为新的布局，那么也许是蛇布局，这是很好的方法。

如果有任何帮助，也许你可以看到这个github url：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 

需要一段时间来阅读或苹果的文档，你会得到了很多！