OStack程序员社区-中国程序员成长平台

标题: ios - 带有两个单元格的 UICollectionView 自定义布局 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-13 06:53
标题: ios - 带有两个单元格的 UICollectionView 自定义布局

我一直在阅读关于具有不同布局的 UICollectionView 的在线教程。还看了很多关于这个主题的 SO Questions。但似乎我正在寻找的东西可能更简单，但我被困在如何前进上。

目标

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

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

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

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

问题

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

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

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

感谢任何输入。

谢谢大家。

---

Best Answer-推荐答案

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

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

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

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

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

所以 - 对于表格 View 布局，我这样做了:

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 *)collectionViewUICollectionView *)collectionView cellForItemAtIndexPathNSIndexPath *)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

关于ios - 带有两个单元格的 UICollectionView 自定义布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22421975/

---

欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/)

Powered by Discuz! X3.4