UICollectionViewFlowKhông gian trống rỗng với chiều rộng và chiều cao ô biến đổi

Question

Tôi đang cố xác định bố cục luồng tùy chỉnh cho UICollectionView bằng cách phân lớp UICollectionViewFlowLayout. Cách bố trí Tôi muốn trông như thế này:

Như bạn thấy, tôi đã chia xem bộ sưu tập thành 2 hàng ngang nhau dọc theo phân chia giữa ngang. Hàng trên cùng được chia thành ba phần để cung cấp 3 cột và các hàng dưới cùng chia làm hai phần để cung cấp cho 2 cột.

Tất cả mọi thứ dường như làm việc và tìm kiếm tốt cho đến khi bạn di chuyển sang bên phải (nhìn bộ sưu tập di chuyển là để UICollectionViewScrollDirectionHorizontal), và thấy có một không gian rộng lớn sau 5 tế bào đã hoàn thành được hiển thị:

Tôi không biết tại sao điều này lại xảy ra, tuy nhiên có vẻ như không gian trống trông giống như một ô từ hàng trên cùng; một phần ba chiều rộng của chế độ xem bộ sưu tập.

Dưới đây là làm thế nào tôi thiết lập các UICollectionView và UICollectionViewFlowLayout lớp con

- (void)loadView { 
    [super loadView]; 
    [self setupCollectionView]; 
} 

- (void)setupCollectionView { 
    CustomFlowLayout *flowLayout = [[CustomFlowLayout alloc] init]; 
    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal; 
    flowLayout.minimumInteritemSpacing = 0.0; 
    flowLayout.minimumLineSpacing = 0.0f; 

    CGRect frame = CGRectMake(0, 0, 748, 1024); 
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:frame collectionViewLayout:flowLayout]; 

    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:CollectionViewCellID]; 

    collectionView.delegate = self; 
    collectionView.dataSource = self; 

    collectionView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; 

    collectionView.backgroundColor = [UIColor whiteColor]; 

    collectionView.pagingEnabled = YES; 


    self.collectionView = collectionView; 

    [self.view addSubview:self.collectionView]; 
} 

#pragma mark - UICollectionViewDataSource 
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { 
    return 1; 
} 

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { 

    return 5; 
} 

Kích thước của các mục trong giao diện bộ sưu tập được xác định bởi cấu hình bố trí cho một bộ phận nhất định, vì vậy tôi thực hiện collectionView:layout:sizeForItemAtIndexPath: như vậy:

- (CGSize)collectionView:(UICollectionView *)collectionView 
        layout:(UICollectionViewLayout*)collectionViewLayout 
    sizeForItemAtIndexPath:(NSIndexPath *)indexPath { 

    return [collectionViewLayout layoutAttributesForItemAtIndexPath:indexPath].size; 

} 

lớp con tùy chỉnh của tôi về UICollectionViewLayout được thực hiện như sau:

@implementation CustomFlowLayout 

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect { 
    NSArray* attributesToReturn = [super layoutAttributesForElementsInRect:rect]; 
    for (UICollectionViewLayoutAttributes* attributes in attributesToReturn) { 
     if (nil == attributes.representedElementKind) { 
      NSIndexPath* indexPath = attributes.indexPath; 
      attributes.frame = [self layoutAttributesForItemAtIndexPath:indexPath].frame; 
     } 
    } 
    return attributesToReturn; 
} 

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath { 
    UICollectionViewLayoutAttributes* currentItemAttributes = [super layoutAttributesForItemAtIndexPath:indexPath]; 

    if (!currentItemAttributes) { 
     currentItemAttributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath]; 
    } 

    float height = self.collectionView.frame.size.height; 
    float width = self.collectionView.frame.size.width; 

    CGRect frame = CGRectZero;  
    switch (indexPath.row) { 
     case 0: 
      frame.size = CGSizeMake(width/3, height/2); 
      frame.origin = CGPointMake(0, 0); 
      break; 
     case 1: 
      frame.size = CGSizeMake(width/3, height/2); 
      frame.origin = CGPointMake(width/3, 0); 
      break; 
     case 2: 
      frame.size = CGSizeMake(width/3, height/2); 
      frame.origin = CGPointMake(2*width/3, 0); 
      break; 
     case 3: 
      frame.size = CGSizeMake(width/2, height/2); 
      frame.origin = CGPointMake(0, height/2); 
      break; 
     case 4: 
      frame.size = CGSizeMake(width/2, height/2); 
      frame.origin = CGPointMake(width/2, height/2); 
      break; 
     default: 
      break; 
    } 

    currentItemAttributes.frame = frame; 
    currentItemAttributes.size = frame.size; 
    return currentItemAttributes; 
} 

Bất cứ ai có ý tưởng nào về lý do tại sao tôi có không gian trống lớn sau khi tất cả các ô đã được hiển thị? Hay có ai có cách tiếp cận tốt hơn để hiển thị bố cục tôi đang theo dõi. Tất cả mã có sẵn dưới dạng dự án XCode mẫu here. Câu trả lời, lời khuyên, suy nghĩ, yêu cầu kéo được đánh giá cao.

Answer 1

Vấn đề dường như là khi có hai hàng ô có chiều rộng khác nhau, contentSize của collectionview đang được tính toán theo cách để lại một vùng không gian màu trắng ở bên phải. Cần đơn giản để khắc phục sự cố:

- (CGSize)collectionViewContentSize { 
    return CGSizeMake(1024, 748); 
} 

Cập nhật Github repo với thay đổi here. Mong rằng điều này sẽ giúp ai đó trong tương lai.