ios - 具有两个单元格的 UICollectionView 自定义布局

Question

我一直在阅读有关具有不同布局的 UICollectionView 的在线教程。还查看了很多关于该主题的 SO 问题。但似乎我正在寻找的东西可能更简单，但我仍然坚持如何前进。

目标

我有一个嵌入在 UINavigation Controller 中的 UIViewController。我在 UITableView 中显示数据，其中包括:每个单元格中的 1 个 UIImageView 和三个 UILabel。数据是从服务器获取的，一切正常。

然后我想要一个 UIButton，当点击它时，它会启动一个很酷的动画，显示单元格过渡到一个漂亮的 GridView 。

我突然意识到我需要使用 UICollectionView 在这两个单元格之间切换并完全抛弃 UITableView。再次点击按钮，将切换回上次状态(Grid 或 UITableView 样式)

网格单元需要松开一个标签 - 但保留图像。

问题

过去两天我一直在阅读 UICollectionView 和 UICollectionViewFlowLayout。我想我可以使用 Apple 的预制 UICollectionViewFlowLayout 并稍微调整一下。

我不知道我是否需要两个自定义单元格或一个在两个 View 之间改变形状的单元格以及动画必须如何工作。

我不是在寻找执行此操作的确切代码 - 我只需要知道我需要进入哪个方向以及是否需要使用两个自定义单元格 - 以及如何在两者之间切换动画而不是再次重新加载所有数据。

感谢任何输入。

谢谢大家。

Answer 1

我终于找到了满足我需求的解决方案。如果有人有类似的需求 - 这就是您如何使用两个不同的自定义 UICollectionViewCell 以及如何在两个不同的单元格/布局之间进行更改。

• 首先是在 IB 中创建 customCells - 创建 xib文件。
• 然后根据需要进行设置

由于我的要求需要类 UICollectionViewFlowLayout 提供的标准流布局 - 我只需要创建两个自定义布局并根据我的需要调整它们。

• 创建两个(或更多，如果需要的话)子类 UICollectionViewFlowLayout


在实现中 - 根据需要设置布局。由于我将预制的 UICollectionViewFlowLayOut 子类化，我需要做的就是调整它 - 实现非常简单。

所以 - 对于 TableView 布局，我这样做了:

tableViewFlowLayOut.m

-(id)init
{
    self = [super init];

    if (self){

        self.itemSize = CGSizeMake(320, 80);
        self.minimumLineSpacing = 0.1f;
    }

    return self;
}

这会将每个单元格的宽度和高度设置为我需要的值。 self.minimumLineSpacing 设置单元格之间的间距。 (单元格上方/下方的间距)

然后是网格布局:

gridFlowLayOut.m

-(id)init
{
    self = [super init];

    if (self){

        self.itemSize = CGSizeMake(159, 200);
        self.minimumInteritemSpacing = 0.1f;
        self.minimumLineSpacing = 0.1f;
    }
    return self; 
}

和以前一样 - 然而，这次我需要我的单元格右边缘之间的间距 -

self.minimumInteritemSpacing = 0.1f'

负责处理。

现在 - 现在将它们放在一起 - 在具有 UICollectionView

的 viewController 中

viewController.m

// Import the new layouts needed. 

#import "GridFlowLayOut.h"
#import "TableViewFlowLayOut.m"

//Create the properties 

@property (strong, nonatomic) TableViewFlowLayOut *tableViewLayout;
@property (strong, nonatomic) GridFlowLayOut *grideLayout;

-(void)viewDidLow
{
//Register the two custom collection view cells you created earlier. Make sure you set the correct reuse identifier here. 

[self.tradeFeedCollectionView registerNib:[UINib nibWithNibName:@"TableViewCell" bundle:nil] forCellWithReuseIdentifier:@"TableItemCell"];
    [self.tradeFeedCollectionView registerNib:[UINib nibWithNibName:@"GridViewCell" bundle:nil] forCellWithReuseIdentifier:@"GridItemCell"];

}

-(void)viewWillAppear
{
//Create the layout objects

         self.grideLayout = [[GridFlowLayOut alloc]init];
    self.tableViewLayout = [[TableViewFlowLayOut alloc]init];

//Set the first layout to what it should be 

    [self.tradeFeedCollectionView setCollectionViewLayout:self.tableViewLayout];

}

现在 - 现在用一些动画在布局之间切换。这其实很容易做到，只需要几行代码 -

我在 viewController.m 的按钮方法中调用了这段代码

-(void)changeViewLayoutButtonPressed
{
//BOOl value to switch between layouts 

    self.changeLayout = !self.changeLayout;

    if (self.changeLayout){
    [self.tradeFeedCollectionView setCollectionViewLayout:self.grideLayout animated:YES];

    }

    else {

          [self.tradeFeedCollectionView setCollectionViewLayout:self.tableViewLayout animated:YES];
    }
}

最后在 cellForItemAtIndexPath

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{   static NSString *tableCellIdentifier = @"TableItemCell";
    static NSString *gridCellIdentifier = @"GridItemCell";

//BOOL used to detect which layout is active
    if (self.gridLayoutActive == NO){

        CustomCollectionCellClass *tableItemCell = [collectionView dequeueReusableCellWithReuseIdentifier:tableCellIdentifier forIndexPath:indexPath];

    //Setup the cell

    }
        return tableItemCell;
}else
    {

        CustomCollectionCellClass *gridItemCell= [collectionView dequeueReusableCellWithReuseIdentifier:gridCellIdentifier forIndexPath:indexPath];

    //Setup the cell

    }

    return gridItemCell;
    }
        return nil;

}

当然，您需要遵循其他 UICollectionView 委托(delegate)并设置其余内容。

这实际上花了我一段时间才弄清楚。我真的希望它能帮助其他人。如果有人想要演示项目 - 我会很乐意创建一个并上传到 GitHub。

对于 UICollectionViews 的新手，我强烈建议阅读 Apple 关于该主题的编程指南 - 正是这份文档让我找到了这个解决方案。

引用: https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/CollectionViewPGforIOS/Introduction/Introduction.html