收集視圖或表格視圖

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 

需要一段時間來閱讀或蘋果的文檔，你會得到了很多！