これが私の試みです。それは機能しますが、これはカスタムレイアウトでの私の最初の試みであるため、それを改善するためにできることがあると確信しています。このコードを使用して、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;
}
これは、ViewControllerのコードです。
#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]);
}
したがって、私のデータは配列の配列として設定され、各サブ配列は1人のプレーヤーとそのスコアです。このレイアウトでは、各プレーヤーのセルが水平線上に保持されているように見えます。プレーヤーの名前を保持するために、各行の最初のセルを大きくしました。この1つの大きなセルを処理するための最良の方法がわかりません。いくつかの数値をハードコーディングしましたが、それはおそらく最善の方法ではありません。
改善や修正の提案を歓迎します。