自定义 UICollectionViewLayout 不同的单元格大小

Posted 2023-02-23

【中文标题】自定义 UICollectionViewLayout 不同的单元格大小

【英文标题】：Custom UICollectionViewLayout Different Cell Sizes

【发布时间】：2013-06-05 08:15:30

【问题描述】：

我想像这样自定义UICollectionViewLayout。 http://i.stack.imgur.com/aWUIa.jpg

当我滚动第二页图像大小不适合单元格大小时； http://i.stack.imgur.com/GOUmF.jpg

然后再翻回第一页；http://i.stack.imgur.com/lQQ3h.png

图像大小和单元格大小不匹配。 这是我的自定义布局代码；

//
//  SeyahatLayout.m
//  SeyahatTrend
//
//  Created by Mehmet Can Yavuz on 03.06.2013.
//  Copyright (c) 2013 Mehmet Can Yavuz. All rights reserved.
//

#import "SeyahatLayout.h"
#import "SeyahatLayoutAttributes.h"

#define kNumberOfItemsPerPage 5

static NSString * const BHPhotoAlbumLayoutPhotoCellKind = @"PhotoCell";

@interface SeyahatLayout ()

@property (nonatomic, strong) NSDictionary *layoutInfo;

@end

@implementation SeyahatLayout

- (CGSize)collectionViewContentSize

    // Ask the data source how many items there are (assume a single section)
    id<UICollectionViewDataSource> dataSource = self.collectionView.dataSource;
    int numberOfItems = [dataSource collectionView:self.collectionView 
                            numberOfItemsInSection:0];

    // Determine how many pages are needed
    int numberOfPages = ceil((float)numberOfItems/(float)kNumberOfItemsPerPage);

    // Set the size
    float pageWidth = self.collectionView.frame.size.width;
    float pageHeight = self.collectionView.frame.size.height;
    CGSize contentSize = CGSizeMake(numberOfPages * pageWidth, pageHeight);

    return contentSize;


#pragma mark - Layout

- (void)prepareLayout

    NSMutableDictionary *newLayoutInfo = [NSMutableDictionary dictionary];
    NSMutableDictionary *cellLayoutInfo = [NSMutableDictionary dictionary];

    NSInteger sectionCount = [self.collectionView numberOfSections];
    NSIndexPath *indexPath = [NSIndexPath indexPathForItem:0 inSection:0];

    for (NSInteger section = 0; section < sectionCount; section++) 
         NSInteger itemCount = 
           [self.collectionView numberOfItemsInSection:section];

        for (NSInteger item = 0; item < itemCount; item++) 
            indexPath = [NSIndexPath indexPathForItem:item inSection:section];

            SeyahatLayoutAttributes* attr = 
              [self layoutAttributesForItemAtIndex:item];
         // UICollectionViewLayoutAttributes *itemAttributes =
         //  [UICollectionViewLayoutAttributes 
         //     layoutAttributesForCellWithIndexPath:indexPath];
         // itemAttributes.frame = [self frameForAlbumPhotoAtIndexPath:indexPath];

            [cellLayoutInfo setObject:attr forKey:indexPath];
        
    

    newLayoutInfo[BHPhotoAlbumLayoutPhotoCellKind] = cellLayoutInfo;
    self.layoutInfo = newLayoutInfo;


- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:
       (NSIndexPath *)indexPath 

    return self.layoutInfo[BHPhotoAlbumLayoutPhotoCellKind][indexPath];


-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect

//  NSInteger itemCount = [self.collectionView numberOfItemsInSection:0];
//  NSMutableArray* attributes = [NSMutableArray array];
//  for (NSInteger i=0 ; i < itemCount; i++) 
//       NSIndexPath* indexPath = [NSIndexPath indexPathForItem:i 
                                                      inSection:0];
//       [attributes addObject:
           [self layoutAttributesForItemAtIndexPath:indexPath]];
//  
//    return attributes;
    NSLog(@"RECTX: %f",rect.origin.x );
    NSLog(@"RECTY: %f",rect.origin.y );
    NSLog(@"RECTWIDTH: %f",rect.size.width );
    NSLog(@"RECTHEIGHT: %f",rect.size.height );

    id<UICollectionViewDataSource> dataSource = self.collectionView.dataSource;
    int numberOfItems = [dataSource collectionView:self.collectionView 
                            numberOfItemsInSection:0];

    NSMutableArray* attributes = [NSMutableArray array];
    int page = rect.origin.x / 1024.0;
    if(numberOfItems>0)
    for(NSInteger i = 0; i<kNumberOfItemsPerPage; i++)
        int x = page*kNumberOfItemsPerPage + i;
        NSLog(@"%d",x);
        NSIndexPath* indexPath = [NSIndexPath indexPathForItem:x inSection:0];
        [attributes addObject:self.layoutInfo[BHPhotoAlbumLayoutPhotoCellKind]
           [indexPath]];
    

    return attributes;
    
    else
        return nil;



- (SeyahatLayoutAttributes *)layoutAttributesForItemAtIndex:(int)index

    NSIndexPath *path = [NSIndexPath indexPathForItem:index inSection:0];
    SeyahatLayoutAttributes *attributes = 
      (SeyahatLayoutAttributes *)[UICollectionViewLayoutAttributes  
                                    layoutAttributesForCellWithIndexPath:path]; 

    // Figure out what page this item is on
    int pageNumber = floor((float)index / (float) kNumberOfItemsPerPage);

    // Set the horizontal offset for the start of the page
    float pageWidth = self.collectionView.frame.size.width;
    float horizontalOffset = pageNumber * pageWidth;

    // Now, determine which position this cell occupies on the page.
    int indexOnPage = index % kNumberOfItemsPerPage;

    int column = 0;
    switch (indexOnPage) 
        case 0:
        case 1:
            column = 0;
            break;
        case 2:
        case 3:
        case 4:
            column = 3;
            break;
        default:
            column = 0;
            break;
    

    int row = 0;
    switch (indexOnPage) 
        case 0:
        case 2:
            row = 0;
            break;
        case 3:
            row = 1;
            break;
        case 1:
        case 4:
            row = 2;
            break;
        default:
            row = 0;
            break;
    

    horizontalOffset = horizontalOffset + ((175.0 + 30.0) * column) + 30.0;
    float verticalOffset = (194.0 + 30.0) * row + 30.0;

    // finally, determine the size of the cell.
    float width = 0.0;
    float height = 0.0;

    switch (indexOnPage) 
        case 0:
            width = 585.0;
            height = 418.0;
            break;
        case 1:
            width = 585.0;
            height = 194.0;
            break;
        default:
            width = 350.0;
            height = 194.0;
            break;
    

    CGRect frame = CGRectMake(horizontalOffset, verticalOffset, width, height);
    [attributes setFrame:frame];

    return attributes;


+ (Class)layoutAttributesClass

    return [SeyahatLayoutAttributes class];


@end

这是我自定义的 uicollectionviewcell 代码；

//
//  SeyahatCell.m
//  SeyahatTrend
//
//  Created by Mehmet Can Yavuz on 03.06.2013.
//  Copyright (c) 2013 Mehmet Can Yavuz. All rights reserved.
//

#import "SeyahatCell.h"
#import "PNCollectionCellBackgroundView.h"
@implementation SeyahatCell

- (id)initWithFrame:(CGRect)frame

    self = [super initWithFrame:frame];
    if (self) 
        // Initialization code
        //self.backgroundColor = [UIColor whiteColor];


        PNCollectionCellBackgroundView* backgroundView = 
          [[PNCollectionCellBackgroundView alloc] initWithFrame:frame];
        self.backgroundView = backgroundView;
        self.imageView = 
          [[UIImageView alloc] initWithFrame:CGRectMake(5, 
                                                        5, 
                                                        frame.size.width-10, 
                                                        frame.size.height-10)];
        [self.contentView addSubview:self.imageView];
    
    return self;

还有我的 cellForItemAtIndexPath 方法；

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
                  cellForItemAtIndexPath:(NSIndexPath *)indexPath


    SeyahatCell *seyahatCell =
    [collectionView dequeueReusableCellWithReuseIdentifier:SeyahatCellIdentifier    
                                              forIndexPath:indexPath];


    Post * p = [self.posts objectAtIndex:indexPath.row];
    [seyahatCell.imageView setImage:nil];
    if(p.thumbnail)
        [seyahatCell.imageView setImageWithURL:[NSURL URLWithString:p.thumbnail]];
    
    else
        [seyahatCell.imageView setImage:nil];
    

    return seyahatCell;

我该如何解决这个问题？

【问题讨论】：

您得到解决方案了吗？

您的问题解决了吗？也许你可以告诉我们解决方案；）

【参考方案1】：

尝试使用现有的布局解决方案。为此，我更喜欢使用https://github.com/bryceredd/RFQuiltLayout