Question

我一直在阅读UICollectionView上有不同布局的在线教程。还看了很多关于这个问题的SO问题。但看起来我看起来可能更简单，但我仍然坚持如何前进。

目标

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

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

我突然意识到我需要使用UICollectionView在这两个单元格之间进行切换，完全抛弃UITableView。再次点击该按钮，将切换回最后一个状态（网格或UITableView样式）

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

问题

我花了最近两天的时间来阅读UICollectionView和UICollectionViewFlowLayout。我想我可以使用Apple的预制UICollectionViewFlowLayout并稍微调整一下。

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

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

感谢任何输入。

谢谢大家。

Answer 1

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

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

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

创建两个（或更多，如果需要）子类UICollectionViewFlowLayout

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

所以 - 对于表格视图布局，我这样做了：

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委托并设置剩余的东西。

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

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

参考： https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/CollectionViewPGforIOS/Introduction/Introduction.html

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

1 个答案: